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

Как создать фавикон: лучшие сервисы

Я подготовил для вас небольшой список с достаточно популярными и простыми в освоении ресурсами по созданию фавиконок. Ну а чтобы не возникло вопросов о том, как с ними работать – составил небольшие инструкции. Кстати, о том, как добавить созданный фавикон на сайт можете прочитать в моей статье — как добавить фавикон на сайт WordPress: готовые фавиконы для сайта.

X-Icon Editor

Достаточно простой в освоении сервис. Можно творить непосредственно в редакторе или создать фавикон из своей картинки. Выбор целиком и полностью принадлежит вам.

Итак, для начала перейдите на сайт – x-icon.

Затем, выберите один из двух вариантов работы:

• Создать фавикон самому, попиксельно, используя редактор;
• Подгрузить заранее созданную в фотошопе картинку и работать непосредственно с ней.

Небольшая инструкция для тех, кто выбрал второй вариант:

1. Нажмите «Import»:

1. Загрузите картинку нажав «Upload», выделите необходимую область и размеры. Нажмите «Ok»:

1. В случае необходимости воспользуйтесь редактором и подкорректируйте загруженную картинку по своему усмотрению;
2. Когда все будет готово — нажмите «Preview» и посмотрите, как ваш фавикон отображаться в браузере;
3. Если все устраивает, вернитесь на вкладку с редактором и нажмите «Export». В появившимся окошке нажмите «Export your icon» и фавикон будет автоматически скачан на ПК:

Готово. Вам остается только добавить его на сайт.

BWS

Еще один достаточно простой в освоении ресурс. Правда, у него есть один существенный минус: если сравнивать с X-Icon – он так же позволяет создать фавикон из картинки в режиме онлайн, вот только не дает его редактировать. По сути – он просто конвертирует ваше заранее подготовленное изображение в иконку необходимого размера и расширения. Поэтому, придется как следует попотеть в фотошопе, чтобы потом не переделывать все по сто раз.

Итак, как же сделать фавикон для сайта в этом сервисе? Все просто. Вы заранее подготавливаете картинку в пейнте или фотошопе, подгружаете ее, выбираете подходящие размеры и нажимаете «Конвертировать». Когда все будет готово, иконка автоматически скачается на компьютер:

Pr-cy

Данный сервис (ссылка на сайт) своим функционалом очень похож на предыдущий. Вы так же заранее подготавливаете изображение, загружаете его и нажимаете «Создать Favicon». Сервис сам сгенерирует иконку и покажет, как она будет выглядеть в строке поиска. Вам остается только нажать «Скачать»:

Favicon.by

Весьма симпатичный и крайне интересный ресурс. Позволяет выбрать один из трех вариантов создания значка: сделать фавикон для сайта онлайн вручную, использовать для этого заранее подготовленную картинку или импортировать чужую иконку введя url сайта. Круто, не правда ли? А теперь давайте пройдемся по всем трем функциям и посмотрим, как именно они работают:

Сделать фавикон онлайн используя редактор;

Главная фишка сервиса — вам сразу же будет виден результат вашей работы:

Когда закончите творить, просто нажмите «Скачать фавиконку» справа от строчки с результатом. Загрузка начнется автоматически.

Сделать фавикон из своей картинки;

Ну, тут все по аналогии с предыдущими сервисами. Просто подгружаете изображение, редактируете и нажимаете скачать.

А теперь самое интересное – импортировать фавиконку с чужого сайта.

Введите url сайта с понравившейся иконкой и нажмите «Импортировать»:

Отредактируйте изображение по своему вкусу и нажмите скачать. Все, у вас на руках готовая иконка для сайта.

Какой формат использовать?

Желательные форматы Favicon: ico, png, svg

ICO

Устаревающий формат. Зато поддерживается большинством браузеров.
Он включает в себя значки разных размеров. Поэтому браузеры могут подтянуть иконку более низкого разрешения.

SVG

Применяется в Safari MacOS. Файлы мало весят, а отображаются хорошо. Дружно ждем, когда все браузеры начнут поддерживать этот формат.

Допустимые форматы: jpeg и gif

Не все браузеры поддерживают отображение таких значков.

Если ваша фавиконка имеет нестандартные форматы png или ico, то лучше проверить ее через сервис caniuse.com. Так вы поймете, поддерживают ли браузеры нужный вам формат.

Favicon.io

Вероятно, самый простой метод из когда-либо созданных, Favicon.io позволяет вам создавать или преобразовывать любое изображение в favicon. Вы можете совершенно бесплатно использовать этот инструмент, и поместить созданный вами значок в любое место. Для экспорта вы получите форматы PNG и ICO.

Есть несколько способов создать значок с помощью этого инструмента. Первый из простого текста. Если у вас нет изображения или логотипа, чтобы превратить его в значок, вы можете использовать этот параметр для мгновенного создания обычного текстового значка.

Второй из изображения или логотипа. Все, что вам нужно сделать, это загрузить желаемое изображение / логотип, и этот инструмент превратит его в соответствующий размер и формат.

Последний вариант от смайликов. У них есть множество готовых смайликов, которые вы можете выбрать и сделать свой значок. Я бы порекомендовал этот вариант, только если у вас есть маленький веб-сайт или сайт, который не является «слишком серьезным».

Обзор онлайн-генераторов, где найти коллекцию фавиконов

Favicon generator — сервисы, где можно сотворить «мини-логотип» для сайта или преобразовать подходящую картинку в нужный формат.

Удобный сервис, в котором можно сделать эксклюзивную иконку — нарисовать ее с нуля попиксельно. Для этого переходим на сервис и в меню слева нажимаем кнопку «Create New Favicon».

В центральной части окна находится область, в которой каждый квадратик — это пиксель будущего фавикона. Следует закрасить эти квадратики в разные цвета. Чтобы это проделать, нужно обратиться к блоку «Color Picker», который расположен в правой части сервиса. Здесь необходимо выбрать из предоставленной палитры необходимый цвет и щелкнуть по определенной области, где находится пиксельная сетка. Чтобы удалить неправильную закраску, достаточно поставить галочку возле чекбокса «transparent» и щелкнуть по квадрату, после чего он станет прозрачным.

Чтобы переместить рисунок по холсту сервиса, ставится галочка возле чекбокса «move». Для того чтобы посмотреть что получилось предусмотрен блок «Preview», который находится под пиксельной сеткой. Для скачивания готового фавикона на компьютер нужно нажать кнопку «Download Favicon».

Если вы не Пабло Пикассо и нарисовать с нуля для вас равносильно прыжку из парашюта, загрузите на сервер для будущего фавикона картинку любого формата и размера, она будет, как болванка. Чтобы загрузить изображение на генератор, нажимается кнопка «Import Image» в левом меню.

На открывшейся странице нужно кликнуть кнопку «Выбрать файл», найти на компьютере подходящую картинку. При загрузке прямоугольной картинки можно отформатировать ее в квадрат (16х16). Для этих целей предусмотрена вкладка «Shrink to square icon». Учтите, в таком случае изображение будет искажено по одной из осей.

Чтобы соотношение сторон остались прежними, поставьте точку в чекбоксе «Keep dimensions».

После всех манипуляций нажимаем кнопку «Upload». Редактирование загруженной фавиконки будет доступно аналогичным способом, что и создание с нуля. Для скачивания готового шедевра на ПК следует нажать кнопку «Download».

Этот онлайн генератор еще и предоставляет коллекцию фавиконов, которые создавались другими пользователями этого сервиса ранее. Они выложены в общем доступе. Чтобы посмотреть галерею нужно в левом меню нажать кнопку «Latest Favicons» — экспонаты, отсортированные по дате или кнопку «Top Rated Favicons» — по рейтингу.

Чтобы скачать понравившийся экземпляр кликните левой кнопкой мыши по его названию и на открывшейся странице выберите «Download Favicon».

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

Для создания фавикона необходимо ввести название компании или сайта и нажать кнопку «Далее».

Онлайн генератор предоставляет уже готовые к использованию шаблоны фавикона. Для скачивания иконки нажмите кнопку «Посмотреть и скачать» и на открывшейся странице «Скачать».

Имейте в виду, чтобы сохранить фавикон вам придется создать на сервисе аккаунт.

Преобразует в необходимый формат любую загруженную с компьютера картинку.

Последовательность действий следующая: выбираем файл и нажимаем кнопку «Create Favicon».

Сервис, предоставляющий возможность создавать фавикон с надписью. Цветовая гамма настраивается в области «Colors», а текст надписи вводится в полях «Top text» и «Bottom tex».

Для скачивания готового значка следует кликнуть по миниатюрной надписи «save as favicon file».

От остальных отличается тем, что позволяет созданную иконку не скачивать (но можно и скачать), а оставить непосредственно на сервисе и получить ссылку к этому файлу.

Для создания фавикона выбираем файл и нажимаем «Upload Now».

Также в сети можно найти и другие генераторы, которые позволяют создать фавиконы с нуля или же доработать уже имеющееся изображение. В частности FavIcon from Pics, DeGraeve, Generator, Онлайн редактор иконок favicon.ico, Online Favicon, Free Favicon Generator и Фавикон-генератор. Стоит отметить, что все они бесплатные.

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

• Галерея иконок для сайта favicon.ico;
• Iconj;
• Favicon.cc;
• The Favicon Gallery.

В них можно найти десятки тысяч мини-логотипов для своего проекта, как говорится на любой вкус и цвет.

Советы по созданию favicon

1. Простота ― залог успеха. Иконка очень маленькая. Пользователь просто не сможет рассмотреть сложный рисунок. Для фавиконок лучше использовать простые символы, силуэты, которые будут узнаваемы в любом размере. 

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

3. Фавикон должен выделяться среди остальных. Перед тем как сделать иконку, проанализируйте, какие изображения у конкурентов, которые выпадают в поисковой выдаче вместе с вашим сайтом. Представим, ваш сайт посвящён ландшафтному дизайну. Все похожие сайты выбирают зелёный цвет для своих иконок, значит, чтобы выделиться нужно использовать другой цвет, например голубой. Если среди ваших конкурентов замечается буйство красок, можно выбрать чёрно-белый формат.

Создание фавикона

Онлайн-сервисы

Нарисовать фавикон можно в онлайн-сервисах. Достаточно просто ввести в поисковик соответствующий запрос, после чего вашему вниманию будет представлен целый перечень сайтов, которые могут помочь вам реализовать задуманное.

Например, Favicon.by. Он позволяет вам нарисовать логотип при помощи простых инструментов. Сервис создает иконку в формате ICO.

Как видите, здесь все интуитивно понятно. Выбираем карандаш, настраиваем цвет и рисуем. Если вашему логотипу нужна какая-то основа, то вы можете воспользоваться “Импортом из файла” и “Импортом с сайта”.

Как только мы закончим наши художества, прокручиваем страницу вниз и скачиваем нашу картинку.

Обратите внимание на левую часть окна “Ваш результат”. Там вы посмотрите, как будет выглядеть ваша иконка во вкладке браузера

Все остальные генераторы работают по схожему сценарию. Точно так же выбираем цвет, рисуем при помощи простых инструментов, а после – скачиваем к себе на жесткий диск.

Adobe Photoshop

Если у вас есть данный графический редактор, то создание логотипа можно вывести на более качественный уровень. В основном, конечно, все и делают иконки через фотошоп или аналогичные редакторы. Предыдущими вариантами пользуются новички. Крупные порталы и сайты больших компаний вряд ли будут использовать картинку, нарисованную в онлайн-генераторе.

Итак, у нас есть два варианта:

1. Сделать фавикон из картинки (логотипа компании или других).
2. Просто выбрать шрифт и сделать его в виде буквы.

Второй вариант используется наиболее часто. Наверное, больше половины сайтов просто создают квадрат размером 16 на 16 или 32 на 32, выбирают шрифт (как правило, Roboto или Open Sans), цвет, соответствующий гамме проекта. И все – favicon готов.

Открываем Фотошоп, после чего сразу идем в “Меню” – “Создать”.

Тут мы можем выбрать размер – в пикселях или любой другой метрический системе. Здесь же – содержимое фона. Рекомендую выбирать прозрачный фон, который в случае чего может быть залит абсолютно любым цветом.

Размер должен быть 16 x 16 или 32 x 32 (в пикселях). Все остальное – по вашему усмотрению, но я бы советовал выставить так, как показано на скриншоте.

Нажимаем кнопку “Создать”, после чего у нас перед глазами появляется область с заданным размером. Сейчас мы будем творить.

Разберу самый популярный вариант. Как я уже и говорил, это фавикон в виде буквы. Обычно первой из названия проекта. Кликаем на “Т” в панели инструментов, после чего в любой участок внутри квадрата.

Теперь вводим любую букву с клавиатуры. Мы можем уменьшить или увеличить ее, поменять цвет, добавить тени или расположить в любой части созданного нами квадрата. Давайте сделаем лого в виде буквы “А”.

Цвет я регулировал при помощи специального инструмента в правом верхнем углу. Здесь вы можете выбрать абсолютно любой вариант при помощи мыши. В верхней панели также есть инструменты для выбора шрифта и размера. На картинке 32 x 32 оптимальным размером буквы будет 8 – 10 Пт.

Если зажать левую кнопку мыши на букве, то можно передвигать букву относительно границ квадрата. Когда вы разместите ее в центре, программа покажет вам соответствующее уведомление в виду перекрестия внутри квадрата. Как только вы отпустите кнопку, оно пропадет.

Если вы хотите добавить в свой фавикон что-то особенное, то можно воспользоваться инструментом “Стили”. Для этого перейдите в соответствующий раздел, как это показано на скриншоте.

Тут можно придать своей букве интересный вид. Например, настроить тени, сделать обводку или же градиентный цвет.

Кстати говоря, не пугайтесь, если при приближении ваша буква будет выглядеть как квадратное нечто. Если вы уменьшите масштаб до 100 % она примет свой естественный, четкий вид. Во вкладке картинка тоже будет выглядеть хорошо.

Далее нам нужно сохранить наше творение. Идем в “Файл” – “Сохранить как”. Выбираем нужный формат (PNG, GIF или JPEG) и название – favicon, нажимаем “Сохранить”.

Как добавить фавикон на WordPress?

Вы можете использовать несколько вариантов установки favicon на WordPress.

• Через Customizer (нстройки) сайта.
• Путем добавления кода в header.php вашей темы.
• Используя плагины для WordPress.

Давайте рассмотрим каждый из этих пунктов детальнее.

Через Customizer (настройщик) сайта

Для этого переходим в административную панель управления WordPress и далее по меню «Вешний вид» — «Настроить».

Вы увидите панель настроек для текущей темы вашего сайта. В ней вам нужно выбрать пункт – «Свойства сайта».

Там вы увидите блок с названием «Иконка сайта», и селектор для выбора изображения.

Вам будет доступен предварительный просмотр того, как иконка будет выглядеть на вкладке с вашим сайтом.

После выбора иконки нажимаем «Сохранить и опубликовать».

Добавление кода в header.php вашей темы

Для начала вам нужно загрузить готовое изображение в корневую папку вашего сайта.

После чего нужно вставить следующий код между тегами <head></head>.

Обязательно не забудьте поменять yourdomain.com на url своего сайта.

Для этого переходим в раздел «Внешний вид» — «Редактор тем», ищем, справа шаблон (header.php) и нажимаем на него. Предварительно убедитесь, что вы сделали бекап сайта!

Далее перед тегом </head> вставляем код. Нажимаем кнопку «Обновить файл».

Если вы все проделали правильно, то при обновлении вашего браузера вы будете наблюдать свой фавикон. Если фавикон не меняется, попробуйте почистить кэш браузера. Эти же правки можно внести и через ftp клиент, сделав резервную копию header.php.

Плагины для установки фавикона в WordPress

В репозитории WordPress вы можете найти много плагинов для установки иконки на сайт. Для примера давайте рассмотрим несколько из них.

All In One Favicon

Идем в меню «Плагины» — «Добавить новый», ищем по названию, устанавливаем и активируем плагин. После этого переходим в раздел «All in one Favicon» в меню админки.

Загружаете изображения в пунктах: «ICO Frontend (или же PNG Frontend)» и «ICO Backend (или же PNG Backend)». Нажимаем «Сохранить изменения».

Favicon от RealFaviconGenerator

Это более продвинутый плагин, который позволяет генерировать несколько типов иконок для разных платформ: iPhone/iPad, Android устройств, Windows 8 планшетов и другого.

Алгоритм работы с плагином следующий.

• Устанавливаем и активируем плагин.
• Идем в меню «Внешний вид» — «Фавикон».
• Загружаем изображение, желательно размером не менее 260 х 260 пикселей.
• После загрузки изображения нажимаем кнопку «Создать Favicon».
• Далее плагин перенаправит вас на сайт RealFaviconGenerator.
• На сайте находим кнопку «Создать код Favicon и HTML» и нажимаем ее.
• Плагин перенесет вас на ваш сайт. Вы увидите уведомление о том, что ваш favicon настроен.
• Проверьте, как иконка будет отображаться на различных устройствах.

Есть и другие плагины: Fresh Favicon, Genie WP Favicon и пр. Все их можно найти в репозитории WordPress и ознакомиться с их возможностями.

Как изменить фавикон в WordPress?

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

1. Проверяем, установлены ли плагины для фавикона, и если да то идем и меняем картинку.
2. Если нет, то переходим в меню «Внешний вид» — «Настроить», и в свойствах сайта, смотрим, нет ли там установленного изображения для иконки сайта. Если есть меняем.
3. Если нет, то идем в корневую папку или папку с темой на сервере, где размещен сайт и заменяем файл favicon.ico на свой.

Установка на сайт

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

Для начала нам нужно конвертировать файл в ICO. Это можно сделать при помощи любого онлайн-сервиса, достаточно ввести в поисковую строку: “Конвертация в ICO” или “PNG в ICO”. Загружаем туда фотографию, получаем favicon.ico.

Корень сайта, как правило – public_html. Независимо от платформы. Но в некоторых темах могут наблюдаться проблемы с отображением фавиконки. Чтобы пофиксить их, мы должны вручную добавить в header.php следующий код:

Для этого идем во “Внешний вид” – “Редактор”, находим в боковой панели нужный файл и кликаем для редактирования. Код мы должны вставить внутри тега < head>.

Теперь проверьте отображение фавиконки во вкладке браузера, для этого перейдите на любую страницу сайта. При необходимости очистите кэш браузера.

Также вы можете проверить наличие иконки в выдаче Яндекса, но там она появится не сразу, а только после того, как проиндексируется.

Через тему WordPress

Заходим в настройки темы, используя верхнюю панель на сайте (“Внешний вид” – “Темы”). Далее идем в “Свойства сайта”.

Вот тут-то мы и настраиваем фавиконку. Просто нажимаем на “Выбрать/изменить изображение”, далее откроется менеджер, через который мы и загружаем нашу картинку.

Плагины

Также есть возможность сделать это с помощью плагинов, но это не рекомендуется из-за нагрузки на CMS.

Идем в “Плагины”, выбираем “Добавить новый”. Откроется страница каталога, где в окно поиска мы должны ввести ключевое слово – Favicon. Нашему взору будет представлено большое количество всевозможных плагинов. Все они работают примерно одинаково, но я все же позволю себе объяснить, как все это делается, на примере одного из самых популярных – All in One Favicon.

Нажимаем на кнопку “Установить”, а после активируем нужное расширение.

После того как плагин будет установлен и активирован, мы должны перейти в настройки. Они представлены в таком виде.

Для каждого формата здесь есть соответствующая вкладка. Допустим, вы создали иконку в формате GIF и хотите, чтобы именно она отображалась во вкладке. Соответственно идем во вторую по счету строку, нажимаем “Загрузить” и в файловом менеджере выбираем наш файл. То же касается и других форматов.

Отдельного внимания заслуживает вкладка “Apple Touch Icon Frontend”. В ней вы сможете задать иконку для устройств от Apple. В отличие от обычного фавикона, логотип для Айфонов или Макбуков имеет большее разрешение и качество. То есть вам, чтобы загрузить картинку, придется создать еще один вариант. Уже в разрешении 512 x 512 или 1 024 x 1 024. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.

Размеры фавиконов для браузеров и устройств

С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне — где-то требуется больший размер, где-то достаточно небольшого файла.

Если мобильный пользователь захочет добавить ссылку на сайт на главный экран смартфона, в Android и iOS иконкой для ссылки станет фавикон.

Фавиконы сайтов на экране смартфона

Если это возможно, ориентируйтесь на каждую платформу, с которой пользователи могут открыть сайт.

Достаточный пакет фавиконок для популярных браузеров

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

Дополнительно можно добавить файлы для мобильных устройств.

Android

Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

Пример кода:

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

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются
Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах. В rel нужно указать “apple-touch-icon.png”.

Пример кода:

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel=»mask-icon».

Пример кода:

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

У Microsoft есть
«Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

Зачастую для сайта хватит фавикона одного или трех размеров, чтобы они выглядели нормально. Но лучше уделить немного времени и отдельно прописать файлы для разных ОС и браузеров, чтобы фавикон выглядел качественно на любом устройстве в выдаче поисковика, на вкладке, панели закладок и на экране смартфона.

Где отображается фавикон и при чем тут SEO

В первую очередь мы видим его на запущенных вкладках перед названием ресурса. Без загруженного фавикона браузер по умолчанию генерирует стандартное невыразительное изображение. Например, у Chrome — это неконтрастная черно-белая планета.

Пока в браузере открыто мало вкладок, фавикон — просто составляющая брендирования. Но когда пользователь работает с большим количеством загруженных сайтов, мини-логотип превращается в функциональный UX-элемент. Он становится удобным идентификатором, который помогает распознать сайт и при необходимости вернуться на него для продолжения сессии. Таким образом, в этом случае уже можно говорить о прямой связи с поведенческими.

Аналогичные функции фавикон выполняет в других местах в браузере.

На главной панели с сохраненными сайтами. Когда закладок много, фавиконки остаются единственным идентификатором

В папках с закладками

В истории браузера

Фавикон в этих интерфейсах улучшает удобство пользования для самой ценной аудитории с точки зрения SEO — закладчиков (в смысле тех, кто переходит на ваш сайт из сохраненных страниц). Поисковики очень ценят такие сигналы, для них — это свидетельство качества и полезности контента на сайте.

Также фавиконы служат идентификатором для сайтов, сохраненных на главном экране мобильного поиска (слева). А если пользователь сохранит страницу на своем мобильном устройстве, фавикон будет отображаться как иконка приложения (справа).

Все описанное выше касалось SEO опосредованно, но есть веб-интерфейсы, в которых маленькое лого напрямую влияет на поисковое продвижение. Речь идет, конечно же, о сниппетах в поисковой выдаче. Без фавикона они менее заметны. В этом случае сниппеты сливаются с белым фоном и никак не выделяются среди конкурентов. В условиях, когда нужно использовать все имеющиеся средства в борьбе за высокий CTR сниппета, пренебрежение качественным фавиконом — это серьезный просчет.

Яндекс подтягивает фавиконки в сниппеты мобильной и десктопной выдачи. Google делает это пока только в результатах мобильного поиска, но тесты на десктопе уже проводились. Это не оставляет сомнений, что в будущем иконки в сниппетах появятся и там.

Результаты в мобильном поиске Google и Яндекса

Завершая разговор о функциях иконок, нелишним будет напомнить, что фавикон — это в том числе и об элементарном доверии сайту. Да, этот момент замечает далеко не каждый пользователь. Но если знающий человек увидит не загруженный фавикон, для него это многое скажет о техническом уровне сайта.

Favicon: как добавить на сайт

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

Самый универсальный способ ― добавить значок сайта через код. С него и начнём.

Как добавить favicon на сайт через код

1. Загрузите файл с иконкой в корневой каталог сайта.

2. Добавьте в HTML-код главной страницы сайта в элемент head ссылку на размещённый файл.

Атрибуты:

rel: 

• icon — учитывается большинством браузеров,

• shortcut icon — учитывается браузером Internet Explorer.

type: 

• image/svg+xml — для формата SVG,

• image/x-icon или image/vnd.microsoft.icon — для формата ICO,

• image/gif — для формата GIF,

• image/jpeg — для формата JPEG,

• image/png — для формата PNG,

• image/bmp — для формата BMP.

Совет. Если сайт должен быть доступен по нескольким доменам, лучше указывать в коде не полный путь, а относительный. Например, не https://example.com/favicon.ico, а просто /favicon.ico.

Обратите внимание! Если у вас кириллический домен в атрибуте href используйте Punycode. Например, для адреса https://новыйсайт.рф/favicon.ico нужно указать https://xn--80advbqgxk0f.xn--p1ai/favicon.ico или просто использовать относительный путь /favicon.ico

Как добавить favicon на сайт в WordPress

В WordPress есть больше вариантов добавить иконку на сайт. Можно использовать плагин или просто воспользоваться встроенными настройками WordPress. 

Чтобы добавить иконку можно, например, использовать плагин RealFaviconGenerator. 

1. Перейдите в админку WordPress.

2. Перейдите в Плагин ― Добавить новый.

3. Найдите в поиске плагин RealFaviconGenerator установите и активируйте его.

4. Перейдите во Внешний вид ― Фавикон

5. Загрузите иконку. Нажмите Генерировать favicon. Плагин перенесёт вас на сайт RealFaviconGenerator.

6. На веб-сайте найдите и нажмите кнопку Создайте свои значки Favicons и HTML-код.

7. Плагин вернёт вас на ваш сайт. Вы получите уведомление о том, что ваш favicon настроен.

Не сложнее добавить favicon и через обычные настройки WordPress.

1. В админке WordPress перейдите во Внешний вид ― Настроить.

2. Выберите Общие настройки ― Свойства сайта.

3. В разделе Иконка сайта нажмите Выберите иконку сайта 

4. Загрузите фавикон.

5. Чтобы сохранить изменения, нажмите кнопку Опубликовать:

Для проверки иконок вашего сайта воспользуйтесь сервисом RealFaviconGenerator. Просто введите доменное имя сайта и вы увидите, как отображаются ваши иконки на разных платформах. Сайт также подскажет, где и какие могут быть проблемы.

В лучшем случае, поисковые системы начинают индексировать фавиконку через 1-2 недели после её настройки. А может и через несколько месяцев. К сожалению, здесь все зависит от решения системы. 

Создать favicon (иконку) для сайта

Favicon.ico (Фавикон) — (от англ. FAVorites ICON, означающего — иконка для «Избранного»)

Так называются закладки в браузере Internet Explorer (отсюда взялось название), Favicon вы можете видеть в адресной строке браузеров, перед URL адресом открытой страницы и в закладках браузеров, перед названием закладки, а так же в поисковой выдаче сайтов.

При использовании фавикона ваш сайт приобретает индивидуальность и гораздо лучше запоминается (Ведь при виде логотипа Яндекс или Google все сразу понимают чей это фавикон).

Мы с вами рассматривали при размещении блоков от Google Adsense карту кликов сайта, те части страницы на которые больше обращает внимание человек при посещении сайта. Вернемся теперь к карте кликов, но уже в поисковой выдаче:

Как можно видеть — даже маленькое изображение акцентирует внимание на себя, а сайты с  более высокими позициями  поисковый выдачи отходят на второй план

Сервисы для генерации и проверки favicon

Digitalagencyrankings.com

Первый сервис http://digitalagencyrankings.com/iconogen/, очень простой в использовании. Для того чтобы вручную не делать favicon разных размеров, вы загружаете в этот сервис свою иконку в jpg, png или gif. Сервис создает её в разных размерах.
Сразу видно, как они будут выглядеть.
Есть возможность скачать все иконки в одном архиве.
Сервис сразу генерирует код для вставки на сайт:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="/widetile.png" />
<meta name="msapplication-square310x310logo" content="/largetile.png" />

Realfavicongenerator.net

Второй сервис https://realfavicongenerator.net, имеет более расширенные настройки и проверку иконок на валидность.

Загружаем на сайт свое изображение в размере не менее 260*260, чтобы получить более лучшие результаты.
В сервисе мы можем настроить иконку для разных устройств: размер изображения, цвет подложки и т.д. Здесь сразу отображается, как будет выглядеть favicon на устройстве.
При генерации сервис также предоставляет код для вставки на сайт и запакованные иконки в архиве.

Проверка иконок

После установки иконок на сайт, вы можете их проверить валидатором https://realfavicongenerator.net/favicon_checker

Вписываете свой адрес сайта и получаем анализ.
Не пренебрегайте настройкой favicon для мобильных устройств. Помните, что это удобно для ваших посетителей, им легко увидеть ваш сайт в браузере и перейти на него.