Как да създадете пълен набор от значки за вашия сайт за всички видове устройства - CMS Magazine
Иконата на уебсайт е важна подробност за вашия уебсайт. Въпреки това, ние често мислим за прословутия значок в последния момент и вмъкваме линк с етикет за връзка само с една версия на иконата. Понякога смятаме, че е достатъчно да поставим файла с фавикон в корена на сайта, тъй като съвременният браузър е в състояние самостоятелно да намери и свърже вашата икона. И понякога изобщо забравяме за favicon.
Favicon за десктоп
Нека започнем с обичайните неща. Почти всички версии на настолните браузъри разчитат на икони 16x16, 32x32 и 48x48 във формат .png или .ico (за по-старите версии на IE, само .ico).
Favicon за Android
- 36 × 36 - за екрани с коефициент на плътност 0,75
- 48 × 48 - за екрани с коефициент на плътност 1
- 72 × 72 - за екрани с коефициент на плътност 1,5
- 96 × 96 - за екрани с коефициент на плътност 2
- 144 × 144 - за екрани с коефициент на плътност 3
- 192 × 192 - за екрани с коефициент на плътност 4
Android приема икони във формат .png и също така разчита на файла manifest.json, който може да съдържа редица различни козметични параметри. При липса на възможни опции за икони за android, системата разчита на икони с икони на Apple-touch.
Favicon за мобилни устройства на Apple
Подобно на android, устройствата на Apple имат различни PPI за различни устройства, включително така наречените Retina екрани. За различните версии на разделителните способности на екрана и версиите на ОС има и редица различни опции за икони:
- 57 × 57 - за iPhone с дисплей без ретина и iOS версия 6.0 и по-стари
- 60 × 60 - за iPhone с дисплей без ретина и iOS версия 7.0
- 72 × 72 - за iPad с дисплей без ретина и iOS версия 6.0 и по-стари
- 76 × 76 - за iPad с дисплей без ретина и iOS версия 7.0
- 114 × 144 - за iPhone с дисплей на ретината и iOS версия 6.0 и по-стари
- 120 × 120 - за iPhone с дисплей на ретината и iOS версия 7.0
- 144 × 144 - за iPad с дисплей на ретината и iOS версия 6.0 и по-стари
- 152 × 152 - за iPad с дисплей на ретината и iOS версия 7.0
- 180 × 180 - за iPhone 6 Plus с iOS версия 8.0
Други фавикон
- IE10 за Windows 8 изисква цвят на фона
- IE11 за Windows 8 и 10 приема няколко различни опции за икони, както и настройки, базирани на XML файла browserconfig.xml
- Safari на Mac OS X El Capitan изисква икона SVG за фиксирани раздели
- 96 × 96 - за Google TV
- 228 × 228 - за Opera Coast
И как да настроите и свържете цялото това разнообразие?
Логично е да се предположи, че ще са необходими много усилия, за да се свърже цялото това разнообразие от значки. На което възниква разумен въпрос: има ли инструмент за автоматизиране на този процес? И разбира се, че съществува. За тези, които използват мениджъри на задачи като Grunt или Gulp при разработката си отпред, има специални плъгини (за тях накратко в края на статията). Ще използваме онлайн решение, което ще ви позволи удобно да конфигурирате всички параметри и веднага да видите резултата.