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

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

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

Ошибка 1. Фавикона нет, и в выдаче серый кружок#

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

Чем это плохо, кроме эстетики. В поиске человек сканирует список результатов глазами за две-три секунды, и иконка работает как метка узнавания: он видел ваш знак в рекламе, на визитке, во вкладке в прошлый раз. Без иконки сайт сливается с остальными. Точных цифр по кликабельности сниппета с иконкой и без я приводить не буду, их у Яндекса нет в открытом виде, но сама справка Вебмастера пишет прямо: фавиконка помогает пользователям быстрее находить сайт и повышает его узнаваемость в выдаче.

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

Ошибка 2. Логотип целиком ужат до 16 пикселей#

Владелец открывает файл логотипа, название компании и знак рядом, и отдаёт его дизайнеру или генератору со словами "сделай иконку". Результат в 16 пикселей: серо-синее пятно, в котором не читается ничего.

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

Есть простой тест. Уменьшите кандидата до 16 на 16 и посмотрите на него с расстояния вытянутой руки. Если можно отличить от соседних вкладок, годится. Если нет, упрощайте дальше: убирайте обводки тоньше двух пикселей, мелкие детали, градиенты.

Один и тот же знак в пяти размерах: в самом мелком детали превращаются в пятно

Мы у себя пришли к тому, что знак для фавикона имеет более толстые обводки, чем знак на сайте: на сайте канон толщины линий 8, 2 и 1,5 единицы, и в 16 пикселей тонкие линии просто исчезают. Иконка это отдельная версия знака, а не его копия. Если знака у вас пока нет, это повод начать с логотипа и базового брендбука, а не рисовать иконку в отрыве от всего остального.

Цена: иконка есть, а узнавания нет. Деньги на дизайн потрачены впустую.

Ошибка 3. Один файл favicon.ico на все случаи#

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

Размер и форматы для Яндекса взяты из справки Вебмастера на август 2026 года. Там же важная оговорка: если на сайте есть иконки разных размеров, сервисы Яндекса могут использовать любую из них, а робот умеет забирать и apple-touch-icon. Поэтому все версии должны быть одинаковыми по рисунку, иначе в выдаче окажется не та.

Рабочий набор, который мы кладём на каждый сайт: favicon.svg, favicon.ico с вложенными 16, 32 и 48, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png на 180, android-chrome-192x192.png и android-chrome-512x512.png плюс файл манифеста, который на два последних ссылается. Семь файлов, один скрипт, тридцать секунд.

Цена одного ICO вместо набора: на iPhone при добавлении на экран получается скриншот страницы вместо иконки, на Android то же, а Яндекс, если возьмёт 16 пикселей и растянет до 120 в сервисах, покажет мыло.

Ошибка 4. Обновили логотип, а иконка осталась старой#

Эту ошибку мы сделали сами и заметили через три месяца. В мае 2026 года сменили фирменный синий с одного оттенка на другой. Обновили SVG-логотип, компоненты сайта, векторный фавикон. Всё выглядело правильно в макетах. А во вкладке браузера иконка оставалась прежнего цвета до конца июля.

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

Набор файлов фавикона, где один растр остался в старом цвете бренда

Цена: три месяца несовпадения бренда во вкладке у всех, кто заходил на сайт. Никто не написал, потому что никто не пишет про фавикон. Но и узнавание в это время не работало.

Ошибка 5. Файл заменили, а Яндекс показывает старый#

Обратная ситуация: всё перегенерировали, залили, во вкладке новая иконка, а в выдаче Яндекса неделю висит прежняя. Владелец пишет подрядчику, подрядчик пожимает плечами.

Здесь ничего не сломано. Робот Яндекса забирает фавиконки отдельно от обычного обхода страниц, и по справке Вебмастера изменения появляются в выдаче в течение двух недель после очередного посещения сайта. Ускорить можно одним действием: отправить главную страницу, где прописана ссылка на иконку, на переобход в Вебмастере. Лимит переобхода в сутки ограничен, так что тратить его стоит осознанно, но одна главная страница в него точно помещается. Если Вебмастер у вас ещё не подключён, вот с чего начать.

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

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

Цена: нервы и ложный вызов подрядчика. Из всех семи ошибок эта самая дешёвая, но самая частая в переписке.

Ошибка 6. Файл есть, но робот его не забирает#

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

Первая: файл отдаёт не 200. Например, редирект с http на https или с www на без www, и робот получает 301 вместо файла. Проверить можно инструментом проверки ответа сервера в Вебмастере: адрес иконки должен отвечать ровно 200 OK, без перенаправлений.

Вторая: файл или папка закрыты в robots.txt. Классика: иконки лежат в папке /assets/, а /assets/ закрыт директивой Disallow ещё с прошлого подрядчика. Как не закрыть лишнее в robots.txt, отдельная тема, но иконку проверить стоит первой.

Третья: в ссылке в head указан не тот тип. Для SVG нужен image/svg+xml, для ICO image/x-icon, для PNG image/png. Несовпадение робот считает ошибкой.

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

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

Ошибка 7. Иконка на прозрачном фоне, невидимая в тёмной теме#

Половина пользователей сидит в тёмной теме браузера и Яндекса. Тёмно-синий знак на прозрачном фоне в светлой теме выглядит отлично, а в тёмной сливается с вкладкой и со сниппетом.

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

Проверка занимает минуту: включите тёмную тему в браузере и откройте свой сайт рядом с двумя чужими вкладками.

Цена: в тёмной теме сайт без иконки, то есть ошибка номер один для половины аудитории.

Как сделать за час и не возвращаться#

Порядок, который мы используем на каждом сайте. Он не зависит от платформы: на Тильде, WordPress и самописном сайте разница только в том, куда положить файлы и где прописать ссылки.

1. Взять знак, не логотип. Проверить в 16 пикселей. Если не читается, упростить или взять букву на плашке фирменного цвета.
2. Сделать плашку заполненной, не прозрачной, если знак не читается на тёмном.
3. Сохранить знак в SVG. Это исходник, из него делается всё остальное.
4. Сгенерировать растры из SVG: ICO с 16, 32 и 48 внутри, PNG на 16, 32, 180, 192 и 512. Онлайн-генераторы это умеют, у нас это делает скрипт на десять строк с рендером из вектора в высоком разрешении и уменьшением с качественным фильтром, чтобы мелкие размеры не мылились.
5. Положить файлы в корень сайта. Робот Яндекса ищет файл с именем favicon именно там, даже если ссылки в head ведут в другое место.
6. Прописать ссылки в head: сначала SVG, потом PNG 32 и 16, потом ICO, отдельно apple-touch-icon и манифест для Android. Проверить атрибут type у каждой.
7. Проверить с боевого сайта: каждый файл отдаёт 200 без редиректов, не закрыт в robots.txt, цвет растра совпадает с брендом.
8. Отправить главную страницу на переобход в Вебмастере и через несколько дней посмотреть диагностику: должен быть статус, что всё в порядке.

На Тильде пункты 4 и 6 сводятся к загрузке одного файла в настройках сайта, и это удобно, но контроля над набором размеров там нет. Если сайт на Тильде и иконка в выдаче мутная, это одна из причин. На WordPress иконку ставят через настройки темы, и большинство тем сами нарезают размеры из одного PNG на 512, что даёт приемлемый результат, хотя и хуже, чем рендер из вектора.

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