Фавикон – значок сайта, отображающийся в браузерных вкладках и избранном, а также результатах поиска. Слово «Favicon» (Favorites Icon) буквально означает «значок для избранного».
Зачем нужен фавикон
Благодаря фавикону пользователь может быстро ориентироваться в открытых вкладках браузера и закладках – поймать взглядом знакомую картинку гораздо проще, чем читать название страницы. В поисковой выдаче фавикон делает сниппет сайта более привлекательным и заметным для пользователя.
Как создать фавикон
Поддерживаемые форматы
Самые популярные форматы для создания фавиконок:
- ICO – самый распространенный формат, позволяет создавать фавиконки в разных разрешениях.
- PNG – этот формат позволяет создавать даже маленькие файлы. Недостаток – этот формат не поддерживается браузером Internet Explorer.
- Единственный плюс формата GIF – это возможность отображения в старых браузерах.
- Фавиконкам формата JPG часто не хватает четкости по сравнению с форматом PNG,
- Формат SVG не поддерживается большинством браузеров, но подходит, к примеру, для Safari MacOS и Opera.
- Фавиконки в формате APNG (анимированный PNG) могут раздражать и отвлекать пользователей.
Рекомендуемые размеры
Размер фавиконок стоит выбирать в зависимости от места их отображения:
- Для десктопных браузеров подходят форматы 16х16, 32х32, 48х48,
- Для браузеров на Android предпочтительно использовать размеры 36х36, 48х48,72х72, 96х96 и 144х144.
- Для iOS браузеров стоит использовать разрешения от 57х57 до 76х76 для не ретины версии и от 120х120 до 152х152 для ретины. Для iPhone 6 Plus версия 8 и выше – 180х180 пикселей.
Что учесть при создании фавиконки
- Изображение на фавиконке должно быть простым и понятным, а также ассоциироваться с сайтом.
- Не стоит использовать стандартные значки CMS, так как сайт может затеряться на фоне других с такими же фавиконками.
- Анимированные фавиконки привлекают внимание пользователей, но в то же время отвлекают и раздражают их. Лучше остановиться на статичной картинке.
- Можно сделать кроссплатформенные значки для разных браузеров, чтобы избежать некорректного ресайза одного и то же файла.
Как добавить фавиконку на сайт
- Файл с названием favicon.ico (разрешение файла может быть любым) нужно загрузить в корневую директорию сайта через веб-интерфейс или FTP-менеджер.
- Прописать адрес в коде на главной странице в теге <head>. Например, <link rel="icon" sizes="192x192" href="/images/favicon.ico".
