Favicon: зачем сайту значок и как его сделать

Откройте десяток вкладок в браузере. Как вы находите нужную? По маленькому значку. Это и есть favicon — иконка сайта, которая видна во вкладке, в закладках, в истории, а у Яндекса ещё и рядом со ссылкой в выдаче. Деталь крошечная. Но без неё сайт выглядит безымянным и недоделанным, а с ней — узнаваемым.

Зачем он нужен

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

Каким он должен быть

Требования простые. Картинка квадратная и очень маленькая, поэтому никаких мелких деталей и длинного текста — в размере 16 на 16 пикселей их всё равно не разглядеть. Лучше всего работает простой узнаваемый символ: первая буква названия, лаконичный логотип, фирменный знак. Используйте контрастные цвета бренда. Формат сегодня берут современный — PNG или SVG; старый ICO тоже понимают все браузеры. Яндекс советует размер от 120 на 120 пикселей, чтобы значок хорошо смотрелся и в выдаче.

Как сделать и подключить

Рисовать с нуля не обязательно. Возьмите логотип или просто красивую букву на фоне фирменного цвета — этого достаточно. Дальше иконку нужно подключить: положить файл на сайт и добавить в код страниц строчку <link rel="icon">, которая на него указывает. Звучит технически, но делается один раз и навсегда.

Частые проблемы

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

Итог: favicon — мелочь, которая делает сайт узнаваемым во вкладках, закладках и выдаче. Возьмите простой символ в цветах бренда, сделайте иконку от 120 пикселей, подключите в код — и сайт перестанет быть безликим. Это часть базовой технической готовности, про которую — в статье про технический аудит сайта.