Как установить фавикон на сайт?

В данной статье я попробую описать как установить фавикон на сайт. Так же рассмотрим какие проблемы встречаются.

Что такое фавикон и для чего он нужен?

Фавикон это маленькая картинка которую вы видите в поисковой выдаче. С помощью нее сайт выделяется и его легче запомнить.

Что такое фавикон
Кликните для увеличения

Пример того как выглядит фавикон на сайте Яндекс.

Как сделать фавикон для сайта

Есть несколько способов сделать фавикон. Создать фавикон в бесплатном онлайн генераторе 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.

Фавикон не отображается в яндексе

Фавикон в поисковой выдаче появляется не сразу, Яндекс вебмастер даже ругается, говорит что «фавикон не добавлен» — не беспокойтесь просто ему нужно время, до двух недель и раньше. Если после длительного времени фавикона не видно проверьте пути в мета тегах которые вы вставили, возможно там ошибка.

Требования к фавикону Яндекс

Самое лучшее это официальная документация от яндекса. Вот ссылка на нее — перейти

Установить фавикон на сайт несложно! Желаю всем успеха!

Добавить комментарий

Ваш адрес email не будет опубликован.

Здравствуйте! Меня зовут Александр. Я веб-разработчик. Мне нравится верстка, дизайн и программирование . В свободное время пишу статьи на тему веб-разработки. Если у вас есть вопрос вы можете задать его по контактам ниже.
Сообщество Вконтакте: vk.com/code_studio_ru