Търсенето на „размер на favicon“ все още връща списъци с петнадесет файла от 2014 г. На практика днес шест размера покриват разделите, резултатите от търсене, iOS, Android и PWA. Ето кои са те и защо.
Таблица с размерите за генериране
Всеки ред съответства на документирана употреба на предлагания пакет. Таблицата дава предимство на малък съвместим комплект пред колекция от исторически варианти.
| Файл | Размери | Предназначение |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Раздели, отметки, стари браузъри, роботи за индексиране |
| favicon.svg | векторен, квадратен | Съвременни браузъри, ясен при всеки размер, поддържа тъмен режим |
| favicon-96x96.png | 96×96 | Резултати от търсене в Google на мобилни устройства |
| apple-touch-icon.png | 180×180 | Начален екран в iOS и iPadOS, без прозрачност |
| web-app-manifest-192x192.png | 192×192 | Начален екран в Android, деклариран в уеб манифеста |
| web-app-manifest-512x512.png | 512×512 | Стартов екран на PWA, вариант „maskable“ |
Защо 16, 32 и 48 са в един .ico
ICO е контейнерен формат: един файл може да съдържа няколко изображения, а браузърът избира подходящото за своя изглед. Това е точно необходимото, защото средата определя търсения размер.
16×16 служи за раздела на обикновен екран. 32×32 предлага вариант за екрани с висока плътност и други елементи на браузъра. 48×48 допълва контейнера и отговаря на изискването на Google размерът на favicon в резултатите да е кратен на 48.
Най-честата грешка е генерирането на .ico само с 16×16: на Retina екран иконата се увеличава и постоянно изглежда размазана.
180×180 за iOS, 192 и 512 за Android
iOS не чете уеб манифеста за иконата на началния екран: търси таг apple-touch-icon. Един размер, 180×180, покрива всички съвременни iPhone и iPad. Системата сама намалява изображението за по-старите устройства.
Android използва уеб манифеста. Два записа са достатъчни: 192×192 за иконата на началния екран и 512×512 за стартовия екран, когато сайтът е инсталиран като приложение. Версията 512 трябва да е декларирана с purpose „maskable“, тоест да понася изрязване в кръг или заоблен квадрат.
При икона maskable запазете съществената част от рисунката в централните 80%. Всичко извън тях може да бъде изрязано според производителя на телефона.
Какво изходно изображение да използвате
Най-добрата отправна точка е SVG: преоразмерява се без загуба до всички посочени размери. Иначе използвайте квадратен PNG поне 512×512 пиксела, така че дори стартовата икона за Android да се получи чрез намаляване, а не увеличаване.
Хоризонтално лого с текст не работи на 16×16: при този размер думата става неясно петно с височина три пиксела. Използвайте само символа или започнете от една-две букви на контрастен фон.
Накрая проверете контраста върху светъл и тъмен фон: черно лого изчезва в раздел с тъмна тема. Тъмният вариант на SVG favicon решава точно този проблем.
Размерите, които вече не са ви нужни
Старите генератори все още създават файлове за исторически интеграции, като плочките на Windows с mstile-150x150.png и browserconfig.xml. Добавяйте ги само ако списъкът ви с поддържани среди изрично включва тези интерфейси.
Дългата поредица apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 и 152x152 е от времето, когато iOS не умееше да преоразмерява. Едно изображение 180×180 ги заменя всички.
Премахването на неизползваните декларации опростява хранилището и HTML. Все пак проверете собствените си целеви браузъри и платформи, преди да премахнете съществуваща интеграция.
Първоизточници
Често задавани въпроси
Все още ли е нужен favicon.ico?
Да, но само в основната директория на сайта. Съвременните браузъри предпочитат SVG, но много роботи, агрегатори и пощенски клиенти все още заявяват /favicon.ico, без да четат HTML. Файлът е няколко килобайта: запазете го.
Какъв размер трябва да има favicon в резултатите на Google?
Google изисква икона със страна, кратна на 48 пиксела, и обикновено показва 48×48. PNG 96×96 или SVG лесно покрива този случай. Иконата трябва да е достъпна за роботи и да не е блокирана от robots.txt.
Може ли favicon да е правоъгълен?
Технически да, визуално не. Всички места за показване отделят квадрат: правоъгълното изображение ще бъде деформирано или центрирано с празни ивици. Винаги започвайте от квадрат, при нужда с отстояния около символа.