Автор: Алексей Соколов
Фавикон (favicon) — это небольшое изображение, которое связано с сайтом и появляется во вкладке браузера, в закладках, в истории просмотров и на экране «Домой» мобильного устройства. Название происходит от словосочетания «favorite icon»: изначально иконку задумывали как значок избранного. Сегодня это, пожалуй, самый недооценённый элемент узнаваемости сайта. Среди десятков открытых вкладок именно маленький квадрат с логотипом помогает быстро найти нужный ресурс, и если его нет, пользователь видит безликий значок-глобус, который не вызывает доверия.
Стоит понимать и то, что фавикон живёт не только в браузере. Google использует его в результатах поиска рядом с названием сайта, а Яндекс тоже выводит иконку в выдаче. Поэтому отсутствующая или неверно настроенная иконка снижает заметность сниппета в ленте, где пользователь принимает решение, куда кликнуть. Представьте два одинаковых результата: у одного рядом виден узнаваемый логотип, у другого — серый глобус. Второй почти наверняка проиграет по кликабельности. Перед тем как сравнивать иконки, полезно сделать проверку фавикона и увидеть, как она выглядит в адресной строке и в выдаче, поскольку именно там пользователь впервые замечает сайт.
Важно разделять два понятия. Favicon — это файл (или набор файлов), на который ссылается HTML-страница. Веб-манифест — отдельный JSON-документ, который описывает приложение: название, цвета, режим отображения и набор иконок для установки на телефон или компьютер. Манифест не заменяет favicon, а дополняет его. Один сайт может одновременно отдавать классический favicon.ico, PNG для вкладок и иконки из манифеста для Android.
Классический файл favicon.ico — самый старый формат. Он может содержать несколько размеров внутри одного контейнера, поэтому его до сих пор запрашивают некоторые браузеры и программы напрямую по адресу /favicon.ico. Формат ICO старше современных стандартов и не умеет работать с прозрачностью так же гибко, как PNG, но для обратной совместимости его стоит оставить.
PNG-иконки разных размеров — основной рабочий инструмент. Они дают точную передачу цвета и прозрачность, и для большинства задач вполне достаточно набора из 32×32 для вкладок, 96×96 для поиска и 192×192 для Android. SVG-иконка выглядит чётко при любом масштабе, а внутри неё можно задать стиль для тёмной темы через медиазапрос prefers-color-scheme. Однако у SVG есть риск: сложная графика с градиентами и фильтрами может отображаться по-разному, поэтому его лучше использовать для простых знаков.
Apple Touch Icon нужен для iOS: когда пользователь добавляет сайт на домашний экран iPhone, система берёт именно эту иконку, размером 180×180 пикселей. Прозрачный фон здесь нежелателен, потому что система сама скруглит углы и может закрасить прозрачные области чёрным. Для Android и PWA набор иконок задаётся в манифесте, и там обычно указывают 192×192 и 512×512.
Самое распространённое заблуждение — что достаточно одного файла favicon.ico, и всё будет работать везде. На практике этого хватает лишь для вкладки в старых браузерах. Для выдачи Google иконка должна быть квадратной и кратной 48 пикселям, а для установки приложения нужны крупные изображения. Один файл на все случаи редко оказывается оптимальным.
Второе заблуждение касается скорости обновления. Новая иконка не появляется мгновенно ни в браузере, ни в поиске. Браузеры кешируют фавикон отдельно от страниц, поэтому обычное обновление страницы часто ничего не меняет. Поисковые системы переобходят сайт с разной периодичностью, и новая иконка может появиться в выдаче только через несколько дней или недель. Относитесь к смене иконки как к процессу, а не как к одноразовому действию.
Браузер не угадывает, где лежит иконка. Он читает HTML-код страницы и ищет теги link с атрибутом rel, содержащим слово icon. Таких вариантов несколько: rel="icon", rel="shortcut icon", rel="apple-touch-icon" и apple-touch-icon-precomposed. Теги размещаются в разделе head, и при наличии нескольких объявлений браузер выбирает наиболее подходящее по размеру и типу. Если тегов нет вовсе, большинство браузеров делают запасной запрос к /favicon.ico в корне домена. Именно поэтому при отсутствии тегов иконка иногда всё же появляется, а иногда нет: всё зависит от того, отдаёт ли сервер файл по этому адресу.
Веб-манифест подключается тегом link rel="manifest" и содержит массив icons. Каждая запись описывает файл через поля src, sizes и type, а поле purpose указывает назначение, например any или maskable. Для установки приложения системы обычно ожидают иконки 192×192 и 512×512. Если манифест составлен с ошибкой (лишняя запятая в JSON, неверный адрес файла, неправильный MIME-тип на сервере), система молча отбрасывает набор, и пользователь получает иконку по умолчанию.
Онлайн-проверка автоматизирует эту работу. Инструмент загружает страницу, находит все объявленные иконки, читает манифест и показывает результат списком: источник каждой иконки, формат, заявленный размер и превью. Так можно за несколько секунд увидеть то, на что вручную ушло бы полчаса: какие иконки действительно объявлены, какие из них недоступны и где расходятся заявленные и реальные размеры. Если вам нужна быстрая проверка фавикона, достаточно ввести адрес главной страницы, а не внутреннего раздела, потому что поисковые системы берут иконку именно с главной.
Выбор формата сводится к трём критериям: совместимость, качество и вес. ICO универсален для старых систем, но неудобен для современной верстки. PNG компромиссен почти во всём: прозрачность, точная цветопередача, поддержка всеми браузерами. Его вес растёт с размером и сложностью изображения, поэтому для малых размеров PNG обычно компактен, а для крупных стоит проверить оптимизацию. SVG весит мало и масштабируется без потерь, но требует аккуратной работы с текстом и эффектами.