Как добавить favicon

Favicon — это не просто украшение. Когда вы открываете в браузере несколько вкладок одновременно, глаз автоматически ищет знакомую иконку, чтобы быстро вернуться на нужный сайт. Без неё все вкладки выглядят одинаково: пустой серый значок и текст названия. С иконкой вашего сайта всё меняется за счёт зрительного узнавания.

Посмотрите, как это работает на практике. Откройте GitHub, Slack или Twitter в браузере, потом откройте несколько других проектов в дополнительных вкладках. Вы сразу видите, где какой сайт: у GitHub — белая кошка на чёрном, у Slack — разноцветное облако, у Twitter — синяя птица. Один взгляд — и вы нашли нужную вкладку без чтения названия. Это практично. Экономит время.

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

Что вызывает больше доверия: сайт с иконкой в браузерной вкладке или без неё? Большинство подсознательно связывают отсутствие favicon с незавершённостью. Как будто вы построили дом, но забыли покрасить дверь. Всё остальное идеально, но маленький значок говорит: здесь в деталях разобрались. Результаты таких мелочей накапливаются.

Форматы файлов для добавления иконки

Чтобы добавить иконку на страницу сайта, нужно выбрать правильный формат файла. Их три основных.

Формат ICO — это исторически первый и классический формат для favicon. Иконку в формате ICO отображает буквально любой браузер. Файл ICO вы видите везде: в адресной строке, в результатах поиска, в закладках. Минус: создавать файл сложновато, нужна программа или конвертер. Плюс: это формат, который точно поддержат даже старые браузеры, и старые версии Яндекса тоже понимают.

Формат PNG — это современный, удобный выбор. Почти все современные браузеры поддерживают PNG для favicon. Файл PNG легко создать: нарисовали иконку в графическом редакторе, экспортировали как PNG — готово. Качество чистое, цвета яркие, потери качества минимальные. Единственный момент: очень старые браузеры могут его не понять, но это редкость в 2026 году.

Формат SVG — это векторный формат, будущее иконок. Если ваша иконка состоит из геометрических форм или текста, SVG идеален. Масштабируется без потери качества на любом размере, занимает минимум места на сервере, загружается быстро. Но поддержка может быть непредсказуемой: некоторые старые версии браузеров его не полностью понимают, хотя современные браузеры справляются хорошо.

В коде сайта вы используете тег link с атрибутом rel icon и указываете href на файл иконки. Браузер смотрит этот элемент и загружает нужный файл. Если вы пишете type image png в теге link rel, браузер ищет PNG-файл. Если type image x-icon, браузер будет загружать ICO-файл. Для Apple устройств используется отдельный rel apple-touch-icon с type image png.

Размеры иконок для разных устройств

Иконка должна хорошо отображаться везде — в браузерной вкладке на компьютере, в результатах поиска, на домашнем экране мобильного.

В адресной строке браузера иконке хватает 16x16 пикселей — это совсем мало. Но можно сделать и размеры 32x32, браузер сам масштабирует правильно. Если вы создаёте сайт сервиса или приложения, подумайте о мобильных пользователях: на Android рекомендуют размеры иконок 192x192 и 512x512 пикселей. На Apple устройствах используется формат apple-touch-icon размером 180x180 — это иконка, которая появляется, когда пользователь добавляет сайт на главный экран смартфона.

Не нужно создавать совершенно разные иконки для каждого размера. Одна хорошо спроектированная иконка масштабируется на любом размере без потери узнаваемости. Главное при создании — сохранить простоту. Если в размере 512x512 пикселей она выглядит как здание, то в размере 16x16 превратится в тёмное пятно.

На странице вы указываете размеры иконок через атрибут sizes и тип файла type. Современные браузеры выбирают нужный вариант сами, в зависимости от того, где их отображать нужно. Для мобильных устройств возьмут большой размер, для браузерной вкладки — маленький.

Почему сайт без иконки выглядит незаконченным

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

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

Когда человек видит результаты поиска сайта на Яндексе или другой поисковой системе, иконка помогает с навигацией. Вместо просто синей ссылки пользователь видит маленькое изображение — визуальный знак вашего бренда. Это помогает ему быстрее узнать, что перед ним именно то, что нужно, и отличить от конкурентов в выдаче поиска.

В следующей части статьи мы покажем, как добавить иконку на практике — пошагово для каждого типа сайта и каждого уровня подготовки.