Favicon: зачем сайту значок и как его сделать
Откройте десяток вкладок в браузере. Как вы находите нужную? По маленькому значку. Это и есть favicon — иконка сайта, которая видна во вкладке, в закладках, в истории, а у Яндекса ещё и рядом со ссылкой в выдаче. Деталь крошечная. Но без неё сайт выглядит безымянным и недоделанным, а с ней — узнаваемым.
Зачем он нужен
Причин несколько, и все про узнаваемость. Во вкладках с фавиконом сайт находишь мгновенно, а без него — щуришься и читаешь заголовки. В закладках и истории то же самое. В выдаче Яндекса значок стоит прямо у вашей ссылки — сайт с иконкой смотрится солиднее соседних и притягивает взгляд. Прямого влияния на позиции у фавикона нет, но узнаваемость и доверие он повышает, а это в плюс по поведенческим. Кстати, Яндекс.Вебмастер прямо рекомендует его установить.
Каким он должен быть
Требования простые. Картинка квадратная и очень маленькая, поэтому никаких мелких деталей и длинного текста — в размере 16 на 16 пикселей их всё равно не разглядеть. Лучше всего работает простой узнаваемый символ: первая буква названия, лаконичный логотип, фирменный знак. Используйте контрастные цвета бренда. Формат сегодня берут современный — PNG или SVG; старый ICO тоже понимают все браузеры. Яндекс советует размер от 120 на 120 пикселей, чтобы значок хорошо смотрелся и в выдаче.
Как сделать и подключить
Рисовать с нуля не обязательно. Возьмите логотип или просто красивую букву на фоне фирменного цвета — этого достаточно. Дальше иконку нужно подключить: положить файл на сайт и добавить в код страниц строчку <link rel="icon">, которая на него указывает. Звучит технически, но делается один раз и навсегда.
Частые проблемы
Иногда фавикон сделали, а его не видно. Причин обычно две. Первая — браузер показывает старую версию из кэша; помогает обновление страницы с очисткой кэша. Вторая — иконку забыли подключить в коде или указали неверный путь к файлу. И ещё момент с выдачей: Яндекс показывает значок не сразу, ему нужно переобойти сайт — иногда это занимает пару недель, так что наберитесь терпения.
Какие размеры и форматы готовить
Когда-то хватало одного файла favicon.ico. Сегодня иконку показывают в разных местах — вкладка браузера, выдача, экран телефона, плитка установленного приложения, — и под каждое нужен свой размер. Джентльменский набор выглядит так:
- 16×16 и 32×32 — классический значок вкладки, закладок и истории (PNG или ICO).
- 180×180 — apple-touch-icon: иконка, когда сайт добавляют на главный экран iPhone.
- 192×192 и 512×512 — для Android и установки сайта как приложения (PWA), их прописывают в manifest.
- SVG — векторный значок, который остаётся чётким на любом экране; современные браузеры его понимают.
Для Яндекса отдельно важен размер от 120×120 пикселей — именно такой система берёт, чтобы показать значок рядом со ссылкой в выдаче. Сделаете только крошечный 16×16 — в выдаче иконка может вообще не появиться.
Как подключить: нужный код
Сами файлы ничего не покажут, пока на них не указали в коде страниц — в секции <head>. Набор строк примерно такой:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Генератор обычно выдаёт сразу и готовые файлы всех размеров, и этот блок кода. Останется скопировать его в шаблон — и больше к фавикону не возвращаться.
Каким должен быть значок: хорошо и плохо
Правило короткое: фавикон видят размером со спичечную головку. Поэтому никакого многословного текста и сложного логотипа целиком. Берите один крупный элемент — первую букву названия или фирменный знак — на контрастном фоне в цветах бренда. Такой значок читается и во вкладке, и в выдаче.
Фавикон в выдаче Яндекса
В Яндексе значок стоит слева от вашей ссылки в результатах поиска, и это заметное преимущество: сайт с иконкой выглядит солиднее безликих соседей, на него охотнее кликают. Но появляется он не по щелчку. Нужно, чтобы сайт был в индексе, файл иконки был доступен и не закрыт в robots.txt, а размер — от 120×120 пикселей. Дальше Яндексу нужно переобойти сайт и подхватить значок. Если всё сделано правильно, а в выдаче иконки долго нет — проверьте, открывается ли файл по прямой ссылке, и отправьте главную на переобход в Вебмастере.
Сделайте фавикон для сайта
Загрузите картинку — получите готовый значок. Бесплатно.
Создать фавикон →Итог: favicon — мелочь, которая делает сайт узнаваемым во вкладках, закладках и выдаче. Возьмите простой символ в цветах бренда, сделайте иконку от 120 пикселей, подключите в код — и сайт перестанет быть безликим. Это часть базовой технической готовности, про которую — в статье про технический аудит сайта.