В данной статье я попробую описать как установить фавикон на сайт. Так же рассмотрим какие проблемы встречаются.
Что такое фавикон и для чего он нужен?
Фавикон это маленькая картинка которую вы видите в поисковой выдаче. С помощью нее сайт выделяется и его легче запомнить.
Пример того как выглядит фавикон на сайте Яндекс.
Как сделать фавикон для сайта
Есть несколько способов сделать фавикон. Создать фавикон в бесплатном онлайн генераторе https://www.favicon.by/. Работа с сервисом очень проста. Вы заполняете квадратную область как показано на рисунке — внизу вы сразу видите как будет выглядеть ваша иконка. Нажимаете скачать фавиконку и на выходе у вас будет файл favicon.ico размером 16×16 он то нам и нужен. Все фавиконка создана.
Способ 1. Нарисовать с помощью онлайн-сервиса
Онлайн генератор https://www.favicon.by/
Способ 2. Нарисовать в FIGMA (лучший способ)
Сначала нам нужно найти нужное изображение или иконку. Я предпочитаю сайт flaticon — тут просто огромное количество иконок для сайта.
Выбираете понравившуюся иконку и выбираете формат SVG для скачивания. Почему именно SVG? Потому что это масштабируемая векторная графика, при увеличении в размере она не поменяет в качестве, а это важно.
Теперь нам нужно открыть файл в Figma. Figma — это очень крутой инструмент для работы с графикой и дизайном сайтов. Этот инструмент можно не скачивать, а работать онлайн.
Комбинацией ctrl + shift + k добавляете изображение на рабочий фрейм и видоизменяете как вам нужно далее внизу делаете экспорт вашей иконки в формате SVG и загружаете в фавикон генератор.
Пример как в Figma сделать экспорт фавиконки
Установка фавикона
Если фавикон вы подготовили — теперь его нужно сгенерировать. И поможет нам в этом сервис https://realfavicongenerator.net/. Данный сервис генерирует под все браузеры и любые платформы. Все что нам нужно это загрузить нашу картинку не менее 260×260 и сервис на выходе сгенерирует все необходимые файлы. Нам только останется разместить их на сайте.
Загрузите изображение не менее 260×260. Формат PNG, JPG, SVG
После того как вы загрузите свое изображение вам предложат сделать несколько настроек, здесь по желанию можно настраивать, а можно оставить как есть. Я всегда настраиваю так как это не долго.
Настройки фавикона
Настройка фавикона для IOS. Наша фавиконка расположена посередине. У нее можно изменить размер в окне так же заменить фон.
Настройка фавикона для Android. Немного больше настроек Чем у IOS. Можно указать название, и добавить фон.
Настройка фавикона для Windows. Тут так же подгоняем как нам нравиться.
Настройка фавикона для вкладок MacBook.
И наконец заключительная часть этой настройки — нажимаете на кнопку, создайте свои фавиконы и HTML код.
После того как ваш фавикон сгенерируется, вам нужно будет скачать к себе на рабочий стол, а так же сохранить html мета теги. Смотрите на фото шаг 1 и шаг третий.
Архив нужно распаковать, а его содержимое положить в корень сайта. Мета теги на черном фоне нужно вставить на страницу между <head></head>. Вот пример:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
Вот собственно и все! Почистите КЕШ, и ваша иконка отобразится во вкладе. Жесткая очистка КЕША — комбинация клавиш ctrl+shift+R.
Фавикон не отображается в яндексе
Фавикон в поисковой выдаче появляется не сразу, Яндекс вебмастер даже ругается, говорит что «фавикон не добавлен» — не беспокойтесь просто ему нужно время, до двух недель и раньше. Если после длительного времени фавикона не видно проверьте пути в мета тегах которые вы вставили, возможно там ошибка.
Требования к фавикону Яндекс
Самое лучшее это официальная документация от яндекса. Вот ссылка на нее — перейти
Установить фавикон на сайт несложно! Желаю всем успеха!
