Сервисы для Favicon

Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — это значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Как проверить свой Favicon на ошибки

Какую фавиконку для вашего сайта видит Яндекс для моего сайта wiki.dieg.info. Перейдите по ссылке и укажите свой сайт.
Проверить правильность подключения ваших фавикон.

Favicon для SEO

По большому счету Favicon в SEO продвижении имеет значение только для поиска в Яндексе, duckduckgo или других поисковых системах, которые выводят фавикон на странице поиска. Пример вывода на скриншоте:

В Google поиске фавиконка не выводится, потому большого смысла заморачиваться нет. Но все же если вы решили сделать свой Favicon придерживайтесь таких рекомендаций:

Favicon – «иконка для избранного» повышает частоту выдачи и кликабельность сниппетов: боты Яндекса специально индексируют ее, чтобы проверить, насколько сайт оптимизирован.
Наличие фавиконки влияет на узнаваемость бренда: читатель никогда не спутает любимый источник информации, стриминг или маркетплейс с прочими закладками в браузере.
Прежде чем создавать свою фавиконку, изучите своих конкурентов в поисковой выдаче Яндекса и создавайте фавикон отличный от ваших конкурентов. Вы должны выделяться, потому что в выдаче поисковой системы человек сначала видит вашу фавикон, а потом уже читает заголовок. То есть у вас может быть прекрасная статья, продуманные заголовку, но вас не будут читать, потому что взгляд человека отвлекается на более притягательные фавикон ваших конкурентов.

Создать или найти Favicon онлайн

Некоторые делают фавикон в нескольких размерах, чтобы он адекватно отображался в десктопных и мобильных браузерах. В самом простом случае делайте фавикон 32×32 пикселя и не забивайте себе голову.

Где искать фавикон:

Icon Search Engine - поиск иконок, есть качественные бесплатные иконки

Сервисы для создания Favicon: Я использую сервис Realfavicongenerator

Как создать фавикон в конструкторе сервиса Canva

Как создать и проверить фавикон вашего сайта в сервисе Realfavicongenerator

RealFavicon Generator - удобный сервис. Realfavicongenerator умеет проверять правильно ли установлены у вас фавиконы и для всех ли устройств они отображаются. Для этого достаточно указать ваш сайт и вы получите информацию как на скриншоте:

Инструкция по созданию фавикон в Realfavicongenerator:

Чтобы создать в сервисе Realfavicongenerator фавикон достаточно загрузить свою картинку.
На выходе вы получите архив с коллекцией своих фавикон и инструкцию по подключению.
Распаковываете полученный архив в корень вашего сайта.

Код HTML подключения Favicons в WordPress использование, настройка я подключаю при помощи плагина Clearfy Pro→страница "Код"→ Раздел "Код в <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="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

На последнем этапе вы можете при помощи сервиса проверить правильность подключения ваших фавикон

Подключение Favicon

Favicons для старых версий IE, для остальных браузеров и последних версий IE используйте PNG иконки и атрибут sizes.

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

Favicons в устройствах Apple. Стандарт, предназначенный специально для продуктов фирмы Apple, таких как iPod, iPad, и iPhone. Для этих устройств вы можете использовать иконки размером 57×57 в формате PNG, ICO или GIF (с поддержкой прозрачного фона)и закруглённые углы. Для правильного отображения, укажите rel:

<link rel="apple-touch-icon" href="images/icon.png" />