Как сделать фавикон для сайта

Коротко. Фавикон — маленький значок сайта во вкладке браузера, в закладках и в результатах поиска. Сделайте квадратную картинку, которая читается в 16×16 пикселей, сохраните её как favicon.ico (16, 32 и 48 px) и положите в корень сайта. В <head> страниц добавьте <link rel="icon" href="/favicon.ico">, для телефонов — PNG 192 px и значок 180 px для iPhone. Яндекс и Google подхватят значок за дни или недели.

Что такое фавикон

Фавикон (favicon, от «favorite icon») — значок сайта. Его видно:

• во вкладке браузера и в закладках;
• в результатах поиска Яндекса и Google рядом с адресом;
• на экране телефона, если сайт добавили на главный экран: ярлык сайта.

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

Какой нужен размер и формат

• Квадрат. Google: соотношение сторон 1:1, не меньше 8×8 пикселей, рекомендуется от 48×48.
• Читается в 16×16. Одна-две буквы или простой символ. Логотип со словами в таком размере превращается в пятно.
• Форматы. Яндекс понимает ICO, SVG, PNG, GIF, JPEG и BMP. Удобнее всего favicon.ico: в одном файле можно хранить несколько размеров.

Набор, которого хватает почти всем:

Файл	Размер	Для чего
favicon.ico	16, 32, 48 px в одном файле	браузеры и поисковики
favicon.svg	любой	чёткий значок на любых экранах
icon-192.png	192×192	Android и веб-приложение
apple-touch-icon.png	180×180	значок на экране iPhone

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

1. Нарисуйте квадратный значок в любом редакторе или возьмите букву логотипа. Проверьте, как он выглядит совсем маленьким.
2. Сделайте файлы. Бесплатный онлайн-генератор фавиконов сделает favicon.ico и PNG нужных размеров из одной картинки.
3. Загрузите файлы в корень сайта, туда же, где лежит главная страница: как загрузить сайт на хостинг.
4. Добавьте ссылки в <head> каждой страницы:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

WordPress: значок сайта (иконку) загружают прямо в админке, в настройках сайта или темы, файлы на хостинг класть вручную не нужно. Тильда и другие конструкторы: в настройках сайта есть поле для иконки.

Почему значка нет в поиске

По справкам Яндекса и Google:

• Файл не открывается по прямой ссылке с кодом 200 или перенаправляет на другой адрес.
• Файл или папка закрыты в robots.txt.
• Робот ещё не пришёл. Яндекс пишет, что изменения появляются в течение двух недель после очередного посещения сайта роботом. Google — от нескольких дней до нескольких недель.
• Значок не квадратный или слишком мелкий.
• Сайт был недоступен во время обхода. Тогда Яндекс может показать вместо вашего значка значок хостинга.

Если в коде несколько ссылок на фавикон, Яндекс может взять любую, поэтому все они должны вести на один и тот же значок.

Наш опыт

До 22 октября 2026 года на HostAtlas не было файла favicon.ico: браузеры и Яндекс по привычке запрашивают его из корня сайта и получали ошибку 404. Мы сделали значок из логотипа «HA» и выложили пять файлов: favicon.ico с размерами 16, 32 и 48 пикселей, favicon.svg, PNG на 192 и 512 пикселей и apple-touch-icon.png на 180. Ссылки на них стоят в <head> каждой страницы. Все они показывают один и тот же значок, так что Яндекс может взять любой.

Читайте также

• Как сделать ярлык сайта на рабочем столе и телефоне
• Как из сайта сделать приложение
• robots.txt и Sitemap

Источники

• Справка Яндекс Вебмастера: фавиконка — форматы, проверка доступности, срок обновления; проверено 27.10.2026
• Google: значок сайта в результатах поиска — размер, квадрат, сроки; проверено 27.10.2026
• Файлы значков hostatlas.ru, добавлены 22.10.2026