Содержание
- Что используется для формирования фавикона
- Фавикон сайта влияет на узнаваемость бренда
- Требования поисковых систем для favicon
- Форматы фавиконки
- Как добавить favicon на сайт
- Как сделать фавикон для сайта
- Популярные онлайн генераторы для создания favicon
- Как проверить фавикон
- Почему favicon не отображается в поиске
Фавикон (favorite icon) — это значок страницы/сайта, который используется:
- браузерами для отображения во вкладке или закладках слева от названия страницы
- Поисковыми системами для формирования сниппетов
- Веб приложениями для создания закладок на рабочем столе телефона
![фавикон веб приложений](https://blog.webit.ru/wp-content/uploads/2022/11/1.png)
Что используется для формирования фавикона
Обычно для формирования фавикона используется логотип бренда
![фавикон – логотип бренда](https://blog.webit.ru/wp-content/uploads/2022/11/2.png)
Первая буква названия компании
![фавикон из первой буквы названия компании](https://blog.webit.ru/wp-content/uploads/2022/11/3.png)
Несмотря на свою “маленькость” фавикон может сыграть большую роль в узнавании вашего бренда. Давайте пройдемся по местам, где пользователь может увидеть фавикон вашего сайта
Вкладки браузера
Среди множества открытых вкладок фавикон позволяет быстро найти нужный пользователю сайт. Посмотрите на скриншот — Википедию можно найти за доли секунд.
![фавикон на вкладках браузера](https://blog.webit.ru/wp-content/uploads/2022/11/4-1024x46.png)
Обратите внимание, на 2 вкладки с иконками планет — у этих сайтов фавикон отсутствует и Google Chrome автоматически отображает свою заглушку.
Закладки и избранное в браузере
Также рассмотрим еще пару мест, где можно встретить фавиконки сайтов:
Закладки:
![фавикон в закладках браузера Яндекс](https://blog.webit.ru/wp-content/uploads/2022/11/5-1024x50.png)
История браузера:
![фавикон в историях браузера Google Chrome](https://blog.webit.ru/wp-content/uploads/2022/11/6-1024x287.png)
Стартовый экран браузера:
![фавикон на стартовом экране Chrome](https://blog.webit.ru/wp-content/uploads/2022/11/7-1.png)
![фавикон на стартовом экране Safari](https://blog.webit.ru/wp-content/uploads/2022/11/8-1.png)
Мобильная выдача Google:
![фавикон в мобильной выдаче](https://blog.webit.ru/wp-content/uploads/2022/11/9-796x1024.jpeg)
Органическая и коммерческая выдача Яндекса:
![фавикон в органической выдаче Яндекс](https://blog.webit.ru/wp-content/uploads/2022/11/10-1024x438.png)
Реклама в поисковой строке:
![фавикон в рекламе поисковой строки Яндекс](https://blog.webit.ru/wp-content/uploads/2022/11/11-1024x163.png)
В итоге мы убедились в том, что фавикон встречается пользователям гораздо чаще, чем можно подумать поэтому к его формированию следует подходить серьезно
Требования поисковых систем для favicon
Яндекс
Форматы: Яндекс предпочитает SVG, но также поддерживает ICO, BMP, JPEG, PNG, GIF — все без поддержки анимации.
Размеры: если это не SVG, то Яндекс предпочитает 120×120, но может выбрать доступную фавиконку любого размера. Скриншот из Яндекс.Вебмастера, где ПС говорит загрузить svg-файл
![Требования Яндекс для фавикон](https://blog.webit.ru/wp-content/uploads/2022/11/12.png)
Также Яндекс рекомендует следующие размеры: 32 × 32, 16 × 16 пикселей.
У Google более обширная информация по требованиям к фавиконке
Форматы: ICO, PNG, GIF, Animated GIFs, JPEG, APNG, SVG
Размеры: соотношение 1:1; размеры, кратные 48 — 48 × 48, 96 × 96, 144 × 144 пикселей и т.д. Не забудьте проверить как выглядит изображение в разрешении 16 × 16 пикселей, так как в результатах поиска Google показывает фавикон в разрешении 18 × 18 px, но из источника берет размеры 16 x 16 пикселей
![Требования и размеры Google для фавиконки](https://blog.webit.ru/wp-content/uploads/2022/11/13-1024x356.png)
либо 32 × 32 пикселя
![Размеры фавиконки](https://blog.webit.ru/wp-content/uploads/2022/11/14-1024x292.png)
Особые замечания:
- Файл должен быть доступен для Google-бота, в частности для пользовательского агента Google Favicon — специального агента, который периодически обходит ваш сайт и скачивает фавиконки.
Форматы фавиконки
Поддерживаемые форматы иконок в браузерах
![Формат фавиконки](https://blog.webit.ru/wp-content/uploads/2022/11/15.png)
Где отображаютется favicon в браузерах:
Браузер | Адресная строка | Подсказка в адресной строке | Панель закладок | Закладки | Вкладки | Ссылка на сайт, перенесенная на рабочий стол |
Edge | Нет | Да | Да | Да | Да | Да |
Firefox | 1.0–12.0: Да > v13: Нет | Да | Да | Да | Да | Да |
Google Chrome | Нет | Нет | Да | Да | 1.0 | Нет |
Internet Explorer | 7.0 | Нет | 5.0 | 5.0 | 7.0 | 5.0 |
Opera | 7.0–12.17: Да v14: Нет | Нет | 7.0 | 7.0 | 7.0 | 7.0 |
Safari | Да | Да | Нет | Да | 1.0–8.0: Да 9.0–11.0: Нет 12.0: Опционально | Нет |
Как добавить favicon на сайт
Есть 2 варианта добавления фавиконки на сайт:
1. Добавление ссылок на фавиконки в теге <head>
Пример:
<link rel=”shortcut icon” href=”/ifav_logo_2x.ico” />
Общие требования/условия добавления фавикона в тег head
- Ссылка должна
содержать описательный атрибут rel=”описательный атрибут”. Они бывают следующими:
- icon – указывается для большинства браузеров
- shortcut icon — указывается для IE. Устарел.
- mask-icon – указывается для пользователей с MacOS. Сам файл должен быть черного цвета, в формате SVG. Цвет задается прямо в ссылке через атрибут color. Поддерживается только браузером Safari. Устарел.
- apple-touch-icon и apple-touch-icon-precomposed – для устройств на IOS и IpadOS. К этому атрибуту добавляется еще один — size. Рекомендуемые размеры:
Модель устройства | Размер apple-touch-icon |
iPhone | 120×120 или 180×180 |
iPad Pro | 167×167 |
iPad, iPad mini | 152×152 |
Отличия apple-touch-icon и apple-touch-icon-precomposed заключаются в том, что apple-touch-icon-precomposed уже включает в себя оформление в стиле яблочных ОС, тогда как на apple-touch-icon устройство сможет само наложить нужные эффекты и скругления.
для данного атрибута используют файлы в формате PNG
- В ссылку рекомендуется добавить формат фавиконки type=”тип файла”. Внутри него объявляется изображение и его формат. Пример:
<link type=”image/png” sizes=”16×16″ rel=”icon” href=”/favicons/favicon-16×16.png”>
Возможные форматы:
- image/svg+xml — SVG (не поддерживается браузером Safari);
- image/x-icon или image/vnd.microsoft.icon — ICO;
- image/gif — GIF;
- image/jpeg — JPEG;
- image/png — PNG;
- image/bmp — BMP.
Для устаревших браузеров типа Internet Explorer рекомендуем указывать favicon формата ICO и размером 32 x 32 px.
Обязательное условие — файл формата ICO должен лежать в корне сайта, чтобы его смогли найти все браузеры
Пример:
<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” >
2. Добавление ссылок в файл манифеста (для устройств на android)
Манифест — файл в формате .json, который содержит в себе ссылки на значки. Данный способ используется браузером Chrome на устройствах с системой Android в случае, когда иконка сайта/веб-приложения добавляется на рабочий стол.
Объявляется в head сайта. Пример:
<link rel=”manifest” href=”/manifest.json”>
Общие требования:
Размер: 72х72, 96х96, 144х144, 192х192, 512х512
Формат: PNG
Пример содержимого файла
{
“name”: “Company Name”,
“short_name”: “Company”,
“icons”: [{
“src”: “images/touch/icon-128×128.png”,
“sizes”: “128×128”,
“type”: “image/png”
}, {
“src”: “images/touch/apple-touch-icon.png”,
“sizes”: “152×152”,
“type”: “image/png”
}],
“start_url”: “/index.html?homescreen=1”,
“display”: “standalone”,
“background_color”: “#3E4EB8”
}
Где
- name – имя компании, приложения;
- short_name — сокращенное имя компании, приложения;
- icons – список иконок и их расположения. Внутри icons есть 3 значения: scr указывает путь к иконке, sizes — размер иконки и type — тип файла.
- start_url – страница, которая будет открываться при нажатии на иконку;
- display – формат, в котором будет отображаться сайт (во весь экран, во вкладке, как отдельное приложение);
- background_color позволяет указать цвет страницы, который будет отображаться до момента загрузки стилей сайта;
- theme_color определяет цвет темы по умолчанию для приложения. Иногда влияет на то, как приложение отображается ОС (например, в переключателе задач Android цвет темы окружает приложение).
Полный список свойств сайта есть здесь https://developer.mozilla.org/ru/docs/Web/Manifest, мы же обозначили необходимый минимум.
Как сделать фавикон для сайта
При создании фавикона учитывайте, что он должен хорошо выглядеть как в разрешении 16×16, так и в 512×512.
Также проверьте отображение иконки на темном и светлом фоне. Для примера, синий логотип сайта теряется на вкладке Google Chrome с примененной синей темой.
![отображение фавиконки](https://blog.webit.ru/wp-content/uploads/2022/11/16-.png)
Рекомендуем для создания фавиконки воспользоваться услугами дизайнера, который создаст вам значок в айдентике бренда, так как не всегда уменьшенный логотип будет узнаваем в разрешении 32х32. Но если вам нужно быстро запустить сайт, то на помощь придут генераторы значков, в которых можно и создать фавиконку и скачать ее в нужном формате.
Популярные онлайн генераторы для создания favicon
https://realfavicongenerator.net/
На входе ожидает квадратное изображение. Если изображение не квадратное, то сервис предложит расширить изображение до квадрата прозрачным фоном.
Далее вы можете указать различные опции генерации: начиная от размеров файла, заканчивая цветом плитки в Windows Metro
![Создать фавикон онлайн - генераторы favicon](https://blog.webit.ru/wp-content/uploads/2022/11/17.png)
На выходе получаем код, который нужно вставить в head и архив с файлами, загружаемыми в корень сайта:
![Код фавикон для добавления на сайт](https://blog.webit.ru/wp-content/uploads/2022/11/18.png)
![Код фавикон для добавления](https://blog.webit.ru/wp-content/uploads/2022/11/19.png)
https://favicon.io/
Помимо генерации из готового файла, данный сервис позволяет создать фавикон из текста:
![Генератор для создание фавикон из текста](https://blog.webit.ru/wp-content/uploads/2022/11/20.png)
После создания текста вы скачиваете архив файлов, которые нужно разместить в директории сайта:
![Файлы фавикон для размещения на сайте](https://blog.webit.ru/wp-content/uploads/2022/11/21.png)
Единственный минус — не генерирует код для head в отличие от предыдущего сервиса.
https://www.favicon-generator.org/
Сервис работает аналогично https://realfavicongenerator.net/, только генерирует бОльшее количество файлов в разных разрешениях.
Как проверить фавикон
Проверить отображение фавикона в поисковых системах:
В Яндексе: https://favicon.yandex.net/favicon/webit.ru, где вместо webit.ru нужно подставить адрес вашего сайта.
В Google: https://t1.gstatic.com/faviconV2?client=SOCIAL&type= FAVICON& fallback_opts =TYPE,SIZE,URL&url=https://webit.ru, где вместо https://webit.ru нужно подставить адрес вашего сайта.
Проверить как отображается значок на всех устройствах можно в уже знакомом сервисе
https://realfavicongenerator.net/favicon_checker#. Y16-1exBxUM.
Результат проверки:
![Проверка фавикон](https://blog.webit.ru/wp-content/uploads/2022/11/22-517x1024.png)
Почему favicon не отображается в поиске
- Проверьте общую доступность фавикона через сервис https://realfavicongenerator.net/ favicon_checker#.Y16-1exBxUM
- Проверьте доступен ли фавикон для индексации роботами. Скопируйте адрес значка и вставьте сюда https://pagespeed.web.dev/ для проверки доступности в Google или https://webmaster.yandex.ru/tools/server-response/ для проверки в Яндекс.
- В поисковой выдаче не будут показываться фавиконки порнографического характера, с запрещенной символикой или пропагандой насилия. При наличии такого фавикона он будет заменен схематичной иконкой планеты.
- Если при обращении к вашему сайту будет некоторое время показываться заглушка хостинга — Яндекс может взять фавикон заглушки. Но не стоит беспокоиться — если ваш сайт будет корректно работать, то Яндекс через несколько дней заменит фавиконку на корректную.
- Значок может не отображаться если изображение будет очень низкого качества или скопировано с другого ресурса.
- Проверьте сайт на наличие фильтров со стороны поисковых систем.
Что следует запомнить
Фавикон — это маленький значок сайта, появляющийся возле его названия во вкладках и истории браузера, а также во всех онлайн-интерфейсах. Пользователь, ориентируясь на фавиконку, сумеет быстро найти нужный сайт или приложение. Это поможет повысить узнаваемость и кликабельность ресурса.
Чаще всего для создания фавиконки используются форматы: .ico, .png, .svg.
Для разных локаций необходимы добавлять свои размеры. При этом фавиконка должна хорошо выглядеть в разных разрешениях.
Цветовая гамма иконки должна соответствовать визуальному стилю, которого придерживается компания.
Чтобы быстро создать качественную фавиконку, воспользуйтесь сервисом-генератором.
Сделать иконку при помощи специальных систем несложно — этот процесс будет практически полностью автоматизированным и не потребует лишних усилий.
Готовый фавикон необходимо размещать в теге <head> в корне сайта.
Ошибки отображения помогут найти сервисы-чекеры.