Фавикон

HTML Standard определяет назначение значка как представление страницы или сайта в интерфейсе пользователя. Документация Google и Яндекса отдельно описывает его использование в поисковых результатах. ^{[1, 2, 5]} Поэтому настройку удобно разделить на две задачи: связать страницу с изображением и проверить условия его показа в нужном сервисе.

Кратко

Фавикон подключают к странице ссылкой на файл изображения.
Значок во вкладке ещё не подтверждает его доступность поисковому роботу.
Размеры и форматы сверяют отдельно с требованиями Google и Яндекса.
Иконки установленного веб-приложения описываются отдельно, в манифесте. ^[3]

Происхождение и история

В материале рабочей группы W3C, созданном 24 октября 2005 года и обновлённом в 2007 году, фавикон уже описан как значок страницы или сайта в адресной строке и вкладках. Документ сопоставлял два способа подключения: искать картинку по заранее условленному адресу или явно указывать её в HTML. Авторы предпочитали второй: владелец страницы мог выбрать место хранения изображения, даже не имея доступа к корневому каталогу сайта. ^[6]

Это был рабочий материал, а не утверждённый стандарт. В нём отмечалась проблема: предложенный способ объяснять значение icon через специальный профиль ещё не обеспечивал общей стандартизации. В современном HTML Living Standard отношение icon уже имеет собственное определение и правила выбора изображения. ^{[2, 6]} Так развивалось техническое оформление знакомого значка: от соглашений о расположении файла к явно описанной связи между страницей и ресурсом. Эта история не устанавливает первого автора термина.

Суть и механизм

HTML — язык разметки веб-страницы. В её служебной части head элемент link связывает документ с внешним ресурсом. Значение rel="icon" объясняет назначение связи, а href содержит адрес изображения. ^[2] Например, для учебного сайта можно записать:

html <link rel="icon" href="/favicon.png" type="image/png" sizes="120x120">

Здесь указан PNG-файл размером 120 на 120 пикселей. Пиксель — отдельная точка растрового изображения. Атрибут sizes сообщает размер, но не увеличивает картинку: объявленные размеры должны действительно присутствовать в файле. ^[2] Если дизайнер сохранил маленькую картинку, изменение цифр в разметке не добавит ей деталей.

Когда вариантов несколько, браузер учитывает тип изображения, размеры и условия media, например характеристики среды отображения. Среди одинаково подходящих вариантов HTML предписывает использовать последний в порядке документа. При неподдерживаемом формате браузер пробует следующий подходящий вариант. ^[2] Поэтому порядок тегов важен, но правило «браузер всегда берёт последний» неверно: сначала оценивается пригодность.

Поисковик получает сведения независимо от открытой пользователем вкладки. У Google ссылка должна находиться на главной странице; обработка обновления требует повторного обхода. ^[1] Практический вывод: проверять страницу глазами и ждать изменения поисковой выдачи — разные этапы работы.

Виды и соседние понятия

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

Что настраивают	Где используется	Основание
Значок страницы	В интерфейсе браузера	HTML, отношение `icon`. ^[2]
Поисковый фавикон	Рядом с результатом органического, то есть нерекламного, поиска	Правила конкретного поисковика. ^{[1, 5]}
Иконки веб-приложения	Среди установленных приложений и в интерфейсе операционной системы	Поле `icons` манифеста. ^[3]

Манифест — отдельный файл с описанием веб-приложения. В рабочем проекте W3C Web Application Manifest его иконки предназначены, например, для списка приложений и переключения между ними. ^[3] Из этого следует, что одного удачного значка во вкладке недостаточно для приёмки установленного приложения.

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

Как применяется на практике

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

Требования поисковиков на дату проверки различаются:

Параметр	Google	Яндекс
Форма и размер	Квадрат не меньше 8 × 8; рекомендует больше 48 × 48 пикселей. ^[1]	В справке указаны 120 × 120, 32 × 32 или 16 × 16 пикселей. ^[5]
Формат	BMP, GIF, ICO, PNG, JPEG, PPM, TIFF; SVG в перечне отсутствует. ^[1]	SVG рекомендуется; также ICO, GIF, JPEG, PNG, BMP. Анимация не поддерживается. ^[5]
Доступ для робота	Googlebot должен получать главную страницу, Googlebot-Image — изображение. ^[1]	Нужны прямой ответ 200 OK и отсутствие запрета обхода файла. ^[5]

Поисковый робот — программа, получающая страницы и файлы сайта. Запрет в robots.txt, файле правил обхода, может помешать ей получить значок. ^{[1, 5]} Даже при подходящем формате сначала следует проверить именно доступ, а не многократно переделывать изображение.

У Google один поисковый фавикон относится к одному имени хоста: например, example.com и news.example.com могут иметь разные значки, а раздел example.com/news не получает отдельный по этому правилу. ^[1]

Как проверить результат

Для проверки запроса подходит панель Network в инструментах разработчика Chrome. Её открывают перед перезагрузкой страницы: запись сетевой активности идёт, пока инструменты открыты. В журнале видны код ответа, тип ресурса, причина запроса, объём передачи и длительность; вкладки Headers и Preview позволяют изучить заголовки ответа и изображение. ^[4]

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

Учебный пример: после смены оформления проверены восемь страниц. На шести ссылка ведёт к новому файлу, на двух сохранился прежний адрес. Доля страниц с новым подключением составляет 6 / 8 × 100 = 75 %. Знаменатель здесь — восемь проверенных страниц, а не весь сайт. Расчёт помогает оценить объём исправлений в этой выборке; он ничего не говорит о доле поисковых показов с новым значком.

Команда исправляет шаблон двух страниц и повторяет проверку всех восьми. Если все ссылки верны, результат становится 8 / 8 × 100 = 100 %. Но в протоколе по-прежнему отдельно отмечают загрузку изображения и его видимый показ: правильный адрес — только один из признаков исправной настройки.

Ошибки и ограничения

При замене значка полезно записать прежний адрес, новый файл и время проверки. Если появляется старая картинка, можно последовательно проверить ссылку в разметке, содержимое ответа и сохранённую браузером копию. Chrome описывает перезагрузку с очисткой кеша — временного хранилища ресурсов — для проверки сетевой загрузки. ^[4]

Для Яндекса несколько объявленных фавиконов могут привести к выбору любого из них. Поэтому нельзя переносить браузерное правило выбора последнего подходящего варианта на поискового робота. ^{[2, 5]} При проверке нужно учитывать того, кто получает изображение.

Технически правильная настройка не даёт основания обещать рост посещаемости. Google прямо предупреждает, что даже соблюдение правил не гарантирует сам показ фавикона. ^[1] В учебном отчёте следует писать конкретно: файл доступен, изображение верно, значок замечен в таком-то интерфейсе. Рост кликов требует отдельного объяснения, а не вывода по совпадению дат.

Частые вопросы

Нужно ли использовать полный логотип?

Для учебного макета разумно сравнить полный логотип и компактный знак при уменьшении. Выбор проверяют визуально; наличие названия компании ещё не делает маленькую картинку читаемой.

Можно ли указать SVG сразу для всех случаев?

У Яндекса SVG рекомендован, а в прочитанном перечне Google его нет. Совместимость следует проверять отдельно. ^{[1, 5]}

Обязательно ли создавать манифест ради вкладки?

Значок страницы описывается через link, а набор иконок приложения — через манифест. Это разные способы описания ресурсов. ^{[2, 3]}

Когда проверка закончена?

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

Связанные термины

Источники

Google. (2026, October 27). Define a favicon to show in search results. Search Central. https://developers.google.com/search/docs/appearance/favicon-in-search (дата обращения: 30.10.2026). ↑ а б в г д е ж з и к
WHATWG. (2026, October 26). HTML Living Standard, § 4.6.8.9, Link type icon. https://html.spec.whatwg.org/multipage/links.html#rel-icon (дата обращения: 30.10.2026). ↑ а б в г д е ж з
W3C. (2026, October 26). Web Application Manifest. Working Draft, Abstract; Status of This Document; § 1.7, icons member. https://www.w3.org/TR/appmanifest/#icons-member (дата обращения: 30.10.2026). ↑ а б в г
Basques, K. (n.d.). Inspect network activity. Chrome for Developers. https://developer.chrome.com/docs/devtools/network/ (дата обращения: 30.10.2026). ↑ а б
Яндекс. Фавиконка // Справка Вебмастера. URL: https://yandex.ru/support/webmaster/ru/search-results/favicon (дата обращения: 30.10.2026). ↑ а б в г д е ж з
Dubost, K. (2005, October 24; updated 2007, October 29). How to Add a Favicon to your Site. W3C QA, draft. https://www.w3.org/2005/10/howto-favicon.html (дата обращения: 30.10.2026). ↑ а б