Фавикон для сайта: что это, размеры, как создать и установить favicon

Краткое саммари

Фавикон — маленькая иконка сайта, которая видна во вкладках браузера, закладках, на главном экране смартфона и в поисковой выдаче. Для сайта лучше готовить не один файл favicon.ico, а небольшой набор: SVG или ICO для браузеров, PNG 180×180 для Apple, PNG 192×192 и 512×512 для Android и PWA, плюс корректные строки в HTML и manifest.json. Для Яндекса и Google фавикон должен быть квадратным, понятным в маленьком размере и доступным для сканирования.

Кому стоит прочитать эту статью:

• владельцам сайтов, которые хотят поставить favicon и убрать ошибку 404 по favicon.ico;
• SEO-специалистам и веб-мастерам, которым нужно проверить отображение фавикона в Яндексе, Google и браузерах;
• дизайнерам и разработчикам, которые подбирают размеры favicon для сайта, мобильных устройств и PWA.

Что такое фавикон

Favicon (от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы.

Значок отображается:

• браузером на открытой вкладке и в закладках рядом с URL сайта;
• в качестве ярлыка на смартфоне, если пользователь вынесет сайт на рабочий стол;
• в поисковой выдаче Яндекса около заголовка на сниппете сайта.

В Google фавиконки отображаются в результатах поиска, если сайт проходит требования поисковика: иконка квадратная, доступна для сканирования, не содержит запрещенного или вводящего в заблуждение изображения. Google рекомендует размер не меньше 48×48 пикселей или кратный ему. Файл 8×8 тоже может быть принят как минимальный, но для нормального вида в выдаче лучше использовать изображение крупнее.

Если favicon не появился в поиске сразу, код не обязательно установлен с ошибкой. Яндекс и Google обновляют иконку после обхода страницы и файла роботом; иногда нужно дождаться переиндексации.

FAQ по разделу

Где отображается фавикон?

Во вкладках браузера, закладках, истории, ярлыках на смартфоне и в сниппетах Яндекса и Google.

Можно ли обойтись без favicon.ico?

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

Зачем нужен фавикон

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

• Выделяет сайт в выдаче

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

• С фавиконом сайт запоминается лучше

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

• Упрощает поиск нужного сайта

В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке — знакомому фавикону.

• Избавляет от ошибки в лог-файлах

Браузеры запрашивают файл favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.

К примеру, такую:

Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network) at <a href="http://localhost:8383/favicon.ico" class="redactor-autoparser-object">http://localhost:8383/favicon.ico</a>

FAQ по разделу

Влияет ли фавикон на SEO?

Прямого фактора ранжирования нет, но иконка помогает сниппету выделяться и может поддержать CTR.

Нужен ли фавикон небольшому сайту?

Да, его стоит добавить даже лендингу: браузеры все равно запрашивают favicon.ico.

Почему в логах появляется ошибка favicon.ico 404?

Браузер ищет файл по стандартному адресу, а сервер не находит его в корне сайта.

Какую картинку выбрать для фавикона

• Тематическую

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

• Контрастную

Сейчас почти у всех сайтов в поисковой выдаче есть иконки, поэтому выделиться сложнее. Помогает простая контрастная форма, которая читается в размере 16×16 или 32×32 пикселя. Стрелки, мелкий текст и сложные эмблемы лучше проверять в реальном размере: часто они превращаются в пятно.

• Упрощенную

Фавикон в выдаче, на вкладках браузера и в закладках очень маленького размера. Детализированное изображение никто не разглядит. Подберите картинку, где будет минимум деталей, два-три цвета, однозначное прочтение смысла.

• Оригинальную

Фавикон не выделит сайт в выдаче, если у конкурентов похожие картинки. Не берите первые попавшиеся иконки из бесплатных наборов: их часто используют десятки сайтов в той же нише.

FAQ по разделу

Что лучше поставить в favicon: логотип или символ?

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

Можно ли использовать текст?

Лучше избегать слов и длинных буквенных сочетаний: в 16×16 пикселей они обычно не читаются.

Как проверить картинку для favicon?

Уменьшите ее до 16×16 и 32×32 пикселя и посмотрите, остается ли силуэт понятным.

Как создать favicon для сайта онлайн

Создать favicon для сайта можно несколькими способами:

1. Плагин или встроенный экспорт в графическом редакторе. Подходит, если нужно вручную подготовить SVG, PNG и ICO.
2. Программы для иконок. Удобны, когда нужно собрать ICO-контейнер с несколькими размерами.
3. Онлайн-генератор favicon. Самый быстрый вариант: загрузите квадратную картинку, а сервис подготовит файлы и HTML-код. Перед загрузкой кадрируйте изображение до квадрата.

Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.

FAQ по разделу

Можно ли сделать favicon из PNG?

Да, PNG подходит для браузеров и мобильных иконок. Для старой совместимости часто оставляют favicon.ico.

Нужен ли SVG-фавикон?

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

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

1. Создайте картинку для фавикона с именем favicon.ico.
   
2. Положите favicon.ico в корневой каталог сайта, чтобы он открывался по адресу https://sitename.ru/favicon.ico. 
3. Если вы захотите использовать разные фавиконы для разделов сайта, скопируйте путь к изображению https://sitename.ru/favicon.ico. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
4. Добавьте ссылку на размещенный файл в HTML-код главной:

...
<link rel="icon" href="https://sitename.ru/favicon.ico" type="image/x-icon">
...

Атрибут rel указывает тип ресурса. Современные браузеры распознают rel="icon". rel="shortcut icon" оставляют только для старой совместимости; если поддержка старых Internet Explorer не нужна, отдельная строка не обязательна.

...
<link rel="shortcut icon" href="https://sitename.ru/favicon.ico" type="image/x-icon">
...

От формата файла зависит тип передаваемых данных. Для ICO это "image/x-icon" или "image/vnd.microsoft.icon", для PNG — "image/png" и аналогично для других форматов.

Для мобильных устройств и PWA указывают отдельные иконки: например, rel="apple-touch-icon" для iOS и блок icons в manifest.json для Android и Chrome.

Фавиконка не появится в поиске сразу после установки кода. Нужно дождаться, пока поисковик обойдет страницу, скачает файл и обновит сохраненную версию сниппета.

Как установить разные favicon для отдельных страниц

Разным страницам сайта можно указать разные фавиконки, чтобы они различались на вкладках. К примеру, веб-мастер может установить разные цвета одной иконки для блога, каталога и форума или для главной и разных сервисов, как у PR-CY:

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

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

<link rel="icon" href="https://ваш-сайт.ru/путь_к_иконке/favicon_blog.ico" type="image/x-icon">

После установки проверьте страницу в браузере, откройте файл favicon по прямой ссылке и посмотрите ответ сервера: для рабочей иконки нужен код 200, корректный Content-Type и доступ без редиректов на страницу авторизации.

FAQ по разделу

Куда загружать favicon.ico?

Самый надежный вариант — в корень сайта, чтобы файл открывался по адресу /favicon.ico.

Где прописывать код favicon?

Внутри тега на страницах, для которых нужна эта иконка.

Почему favicon не обновился?

Браузер и поисковики кэшируют иконки. Проверьте путь, очистите кэш или смените имя файла с версией, например /favicon-v2.ico.

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

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

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

Если сайт получает заметную долю мобильного трафика, ориентируйтесь на платформы, с которых его открывают пользователи: Chrome на Android, Safari на iOS, Яндекс Браузер, Edge и Firefox.

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

Стандартный файл favicon.ico — контейнер для нескольких изображений. Для браузеров обычно хватает ICO с размерами 16×16, 32×32 и 48×48. Для Google стоит иметь иконку не меньше 48×48 или размер, кратный 48. Для SVG можно добавить отдельную строку rel="icon".

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

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">

Для мобильных устройств добавьте PNG-иконки большего размера и manifest.json.

Android

Для Android и PWA используют PNG 192×192 и 512×512. Указать фавикон и его расположение можно через Web App Manifest: JSON-файл с названием сайта, цветами, иконками, размерами и форматами.

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

<link rel="manifest" href="/manifest.json">

Пример кода:

{
  "name": "Название сайта",
  "short_name": "Сайт",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

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

Цвет темы для мобильных браузеров можно указать в HTML:

<meta name="theme-color" content="#ffffff">

Apple

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

Пример кода:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

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

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

Пример кода:

<link rel="mask-icon" href="mask.svg" color="red">
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">

Чаще всего сайту хватает favicon.ico и пары PNG-иконок. Но если вам важны выдача поисковиков, мобильные ярлыки и PWA, лучше прописать отдельные файлы для браузеров, iOS и Android. Так фавикон будет аккуратно выглядеть в поиске, на вкладке, панели закладок и экране смартфона.

FAQ по разделу

Какой размер favicon нужен для Google?

Минимум 8×8, но рекомендуемый размер — 48×48 или кратный 48.

Какой размер favicon нужен для iPhone?

Для apple-touch-icon используют PNG 180×180 без прозрачности.

Нужен ли файл 512×512?

Да, если сайт использует manifest.json или PWA: такая иконка нужна для Android и установки на главный экран.