Фавикон для сайта: размеры, форматы и как добавить

Редакция SEOap · 15 сентября 2026 г. · 8 мин чтения

Чтобы добавить фавикон для сайта, подготовьте квадратную иконку в нескольких размерах, положите файлы в корень сайта и укажите их в блоке <head> тегами <link>. Браузер покажет иконку во вкладке, а поисковые системы со временем выведут ее рядом с адресом сайта в выдаче. Ниже — какой размер фавикона нужен, какой формат выбрать, готовый HTML-код и причины, по которым иконка может не появиться в поиске.

Если коротко отвечать на вопрос «favicon что это»: фавикон (favicon) — это маленькая квадратная иконка сайта, которая отображается во вкладке браузера, в закладках, в истории, в результатах поиска и на экране смартфона, если сайт добавлен туда как ярлык. Название происходит от английского favorites icon — «иконка для избранного».

Обновлено: сентябрь 2026 года.

Где показывается фавикон и зачем он нужен

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

Вкладки браузера. Когда открыто двадцать вкладок, текст заголовка обрезается, и сайт узнают только по иконке.
Закладки и история. Список без иконок читается хуже, и пользователь быстрее находит сайт, у которого своя узнаваемая картинка.
Поисковая выдача. Яндекс и Google показывают фавикон рядом с адресом сайта. Своя иконка помогает сниппету выделиться среди соседей со стандартным серым значком.
Экран смартфона. Если посетитель добавит сайт на домашний экран, система возьмет для ярлыка иконку крупного размера.

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

Какой размер фавикона нужен?

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

Где используется	Размер в пикселях	Формат
Вкладка и закладки браузера	16×16 и 32×32	ICO или PNG
Выдача Яндекса	120×120 или векторная иконка	PNG или SVG
Выдача Google	квадрат, кратный 48: 48×48, 96×96, 144×144	PNG, SVG или ICO
Ярлык на iPhone и iPad	180×180	PNG (apple-touch-icon)
Android и веб-приложение	192×192 и 512×512	PNG в файле манифеста

Требования поисковиков время от времени уточняются, поэтому надежная стратегия — не угадывать один размер, а подготовить набор. Сделайте исходник 512×512 пикселей или сразу в векторе и уже из него экспортируйте все размеры из таблицы. Главное правило для любого размера — иконка должна быть квадратной: прямоугольную картинку браузеры и поисковики сожмут или обрежут.

Какой формат выбрать: ICO, PNG или SVG

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

ICO. Старый формат, который понимают абсолютно все браузеры. Его особенность — в один файл можно упаковать несколько размеров, например 16×16 и 32×32. Файл favicon.ico в корне сайта работает как страховка: браузеры и роботы ищут его по этому адресу, даже если в коде страницы ничего не указано.
PNG. Удобный растровый формат с прозрачностью. Из PNG делают крупные иконки: 180×180 для устройств Apple, 192×192 и 512×512 для манифеста, 120×120 для выдачи.
SVG. Векторный формат: одна иконка остается четкой на любом экране и в любом размере, а файл простой иконки весит совсем немного. Внутрь SVG можно встроить стили и перекрашивать иконку в темной теме. Минус — поддержка SVG-фавиконов появилась не во всех браузерах одновременно, поэтому SVG используют вместе с ICO или PNG, а не вместо них.

Форматы JPEG и GIF для фавикона лучше не использовать: у JPEG нет прозрачности и видны артефакты сжатия, а GIF дает грубые края.

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

Если вы ищете, как сделать favicon без дизайнера, хорошая новость: разобраться, как создать фавикон для сайта самостоятельно, проще, чем кажется. Сделать фавикон для сайта можно в любом графическом редакторе — Figma, Inkscape, Photoshop — или в онлайн-генераторе, который нарежет готовые размеры из одной картинки. Важнее не инструмент, а то, как иконка читается в размере 16 пикселей.

Возьмите простой исходный образ. Первая буква названия, символ из логотипа или простая фигура работают лучше, чем логотип целиком с надписью.
Нарисуйте иконку в квадрате 512×512 пикселей или в векторе. Оставьте небольшие поля по краям, чтобы знак не упирался в границы.
Уменьшите до 16×16 и посмотрите. Если детали слились в пятно — упрощайте: убирайте тонкие линии, мелкий текст, лишние цвета.
Проверьте контраст на светлом и темном фоне. Вкладки браузера бывают и белыми, и почти черными, а темный знак на прозрачном фоне в темной теме пропадает.
Экспортируйте набор файлов: favicon.ico с размерами 16 и 32, SVG-версию, apple-touch-icon.png 180×180 и PNG 192×192 и 512×512 для манифеста.

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

Фавикон, который подстраивается под темную тему

SVG-иконка может менять цвет в зависимости от темы оформления, которую выбрал пользователь. Для этого внутри файла задают стили с медиазапросом prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    .mark { fill: #1d1f1e; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #faf8f3; }
    }
  </style>
  <rect class="mark" x="8" y="8" width="48" height="48" rx="12"/>
</svg>

В светлой теме знак будет темным, в темной — светлым, и иконка не потеряется на фоне вкладки. Браузеры без поддержки SVG-фавиконов просто возьмут запасной ICO или PNG.

Как добавить фавикон на сайт: готовый HTML-код

Если сайт сверстан вручную и нужно понять, как сделать фавикон для сайта html-кодом, все сводится к двум действиям. Положите файлы в корень сайта — туда же, где лежит главная страница, — и подключите их в блоке <head> общего шаблона:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Что делает каждая строка:

первая подключает классический favicon.ico для всех браузеров;
вторая — векторную иконку для браузеров, которые поддерживают SVG;
третья — иконку 180×180 для ярлыка на устройствах Apple;
четвертая — файл манифеста, из которого Android и веб-приложения берут крупные иконки.

Сам файл манифеста — это небольшой JSON:

{
  "name": "Название сайта",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Указывайте пути от корня сайта со слешем в начале (/favicon.ico), а не относительные: иначе на внутренних страницах браузер будет искать иконку не в той папке. Код ставят в общий шаблон, чтобы на всех страницах была одна и та же иконка.

Если сайт на CMS или конструкторе

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

Как проверить, что фавикон подключен

Откройте адрес иконки напрямую, например https://ваш-сайт/favicon.ico: файл должен открыться, а не вернуть ошибку 404.
Посмотрите исходный код главной и одной из внутренних страниц и найдите теги <link rel="icon"> — пути в них должны вести на существующие файлы.
Во вкладке «Сеть» инструментов разработчика убедитесь, что запросы к иконкам возвращают код 200, а не перенаправление или ошибку.
Откройте сайт в приватном окне, чтобы исключить старую иконку из кеша, и посмотрите на вкладку в светлой и темной теме браузера.

Если все четыре пункта в порядке, браузеры иконку уже видят. Дальше остается дождаться, пока ее заберут роботы поисковых систем, — и здесь есть свои условия.

Как фавикон попадает в выдачу Яндекса и Google

Поисковики не берут иконку из браузера — их роботы отдельно скачивают файл, указанный в коде сайта. Чтобы иконка появилась в выдаче, проверьте несколько условий:

тег <link rel="icon"> есть в <head> главной страницы, а файл открывается по указанному адресу;
иконка и папка, где она лежит, не закрыты в robots.txt — у Яндекса за фавиконы отвечает отдельный робот, и запрет по пути к файлу ему помешает;
иконка квадратная и достаточно крупная: для Яндекса — 120×120 или SVG, для Google — размер, кратный 48 пикселям;
адрес файла стабилен и не меняется при каждой сборке сайта;
картинка уместна для любой аудитории — поисковики не показывают иконки с непристойным содержанием.

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

Частые ошибки

Иконка не квадратная. Прямоугольный логотип сжимается или обрезается, и знак становится нечитаемым.
Слишком мелкие детали. Надпись и тонкие линии, заметные в 512 пикселях, превращаются в пятно в 16.
Есть только favicon.ico 16×16. Во вкладке нормально, а в выдаче и на смартфоне иконка размыта.
Файл закрыт в robots.txt. Например, запрещена вся папка с изображениями, где лежит иконка.
Относительный путь. На главной иконка видна, а на внутренних страницах нет.
Кеш браузера. Иконку заменили, но видите старую. Проверяйте в приватном окне или добавьте к адресу файла версию: /favicon.ico?v=2.
Темный знак на прозрачном фоне. В темной теме браузера иконка пропадает.

Другие технические мелочи сайта разобраны в рубрике «Сайтостроение».

Вопросы и ответы

Обязательно ли нужен файл favicon.ico? Желательно. Современным браузерам хватает PNG или SVG, но favicon.ico в корне сайта остается запасным вариантом, который находят все браузеры и роботы, даже без тега в коде.

Почему фавикон не меняется после замены файла? Чаще всего виноват кеш: браузер долго хранит старую иконку. Откройте сайт в приватном окне или поменяйте адрес файла, например добавьте ?v=2. В выдаче новая иконка появится после того, как робот поисковика заново скачает файл.

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

Можно ли использовать в качестве фавикона логотип целиком? Можно, если логотип простой и квадратный. Логотип с надписью в 16 пикселях не читается, поэтому для иконки обычно берут символ или первую букву названия.

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

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