Зачем нужен фавикон?
Благодаря иконке фавикон пользователю проще искать нужный сайт за счет того, что она является элементом фирменного стиля и напрямую влияет на степень узнаваемости сайта. Особенно полезна в случаях, когда у пользователя открыто достаточно много вкладок в браузере и ориентироваться можно исключительно по иконкам.
Также фавикон особенно полезен в поисковой выдаче, когда пользователь забыл название нужного ему сайта, но помнит уникальную запоминающуюся иконку сайта, отражающую часть логотипа.
Аналогично поиску, при помощи favicon пользователю проще найти нужный сайт в избранных вкладках сайтов, что заметно ускоряет работу с сайтом и упрощает процесс его повторного посещения.
Как правильно создать фавикон?
Самый идеальный вариант, это когда favicon является “сокращенной версией” логотипа вашего сайта с теми же стилями оформления. Это важно с точки зрения узнаваемости иконки.
Следующий момент - инструмент генерации фавикон из вашей картинки, размер которой, кстати, должен быть не менее 260x260 пикселей. Это онлайн-сервис, называется он realfavicongenerator.net. Используя данный сайт можно сгенерировать необходимый пакет иконок с инструкциями по его дальнейшему размещению, а также тестированием корректности размещения на вашем сайте. Все в одном месте, что еще для счастья нужно?
Почему пакет иконок? Разве не должна быть одна иконка?
Практически у каждого браузера и платформы (android, ios, windows, mac os) есть свои рекомендации и условия по иконкам фавикон для их корректного отображения. Создавая целый пакет иконок favicon, мы закрываем все эти условия, получая универсальное решение.
Пошаговая инструкция по созданию фавикон(favicon).
- Подготавливаем иконку сайта в формате png, jpg или svg с размерами минимум 70X70 пикселей. Для получения лучшего результата желательно использовать 260X260 пикселей и выше.
- Проходим на сайт https://realfavicongenerator.net
- Нажимаем на кнопку “Sele ct your Favicon image” и прикрепляем изображение. Если ваше изображение меньше 260X260 пикселей, система покажет предупреждающее уведомление о том, что рекомендуется использовать изображение лучшего качества. Нажимаете кнопку “Continue with this picture”.
- Фавикон загружен в систему, необходимо настроить отображение иконки на разных платформах.
Несмотря на интуитивно понятный интерфейс и персональность настройки, продемонстрируем процесс на примере нашего сайта https://tommy-gun.pro/
Favicon for Desktop Browsers and Google Result Pages
Все опции оставляем без изменений.
Favicon for iOS - Web Clip
Выбираем “Add a solid, plain background to fill the transparent regions”, добавив сплошной белый фон. Дополнительно для опции “Margin size (for a 57x57 icon)” можно подкорректировать значение, выставив 10px.
Favicon for Android Chrome
Выбираем “Add a solid, plain background to fill the transparent regions”, добавив сплошной фон. В “Margin size (for a 96x96 icon)” выставляем значение 13px. В опции “App name” пишем название вашего сайта или компании.
Windows Metro
Выбираем “Use a white silhouette version of the favicon. Works well with pictures with significant transparent regions” для использования белого значка. Дополнительно выбираем подходящий фон либо из готовых вариантов, либо указав код фирменного цвета вашего сайта.
macOS Safari и Favicon Generator Options
Все опции оставляем без изменений.
- Нажимаем кнопку “Generate your Favicons and HTML code”
Попадаем на страницу “Установка фавикон” с готовым набором фавикон и кодом установки.
- Через FTP, используя данные авторизации, заходим на сервер вашего сайта.
- Скачиваем архив с иконками и распаковываем в корневой директории сайта.
- Копируем код установки и вставляем между тегами <head> страниц вашего сайта.
- Код установлен, осталось проверить его работоспособность. Для этого нажимаем на ссылку “check your favicon”
- Вводим адрес вашего сайта, нажимаем “Check Favicon” и получаем отчет проверки. Ошибки подсвечиваются красным, если все в порядке - все пункты будет подсвечены зеленым цветом.
Отлично, вы молодец. Пройдя все 11 этапов создания и установки фавикон мы достигли универсального варианта иконки сайта, поддерживаемого всеми браузерами и системами.
