Favicon (фавикон)

Определение: Favicon (фавикон) — это маленькая иконка сайта, которая показывается во вкладке браузера, в закладках и иногда в результатах поиска. Она помогает быстро узнать ваш сайт среди других и делает бренд визуально заметнее.

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

• Узнаваемость: пользователь быстрее находит нужную вкладку и возвращается на сайт.
• Профессиональный вид: сайт без фавикона выглядит незавершённым.
• Удобство в закладках: иконка помогает отличать сохранённые сайты.
• Поддержка разных устройств: на телефонах иконка может использоваться на “ярлыке” сайта.
• Единый стиль бренда: фавикон дополняет логотип и фирменные цвета.
• Меньше путаницы в браузере, когда открыто много вкладок.

Пример

Пример кода:

<link rel="icon" href="/favicon.ico">

Скриншот

Подпись к скриншоту: покажите вкладку браузера, где рядом с названием страницы отображается фавикон вашего сайта

Частые ошибки

• Загружать фавикон слишком мелким или с тонкими деталями — в 16×16 он становится нечитаемым.
• Делать иконку без контраста: на тёмной/светлой теме браузера её не видно.
• Хранить фавикон только в одном формате и не проверять отображение в разных браузерах.
• Забывать про кеширование: обновили фавикон, а в браузере “старый” ещё долго показывается.
• Ссылаться на файл, которого нет на сервере — в Network будет 404 и иконка не появится.

Связанные термины

• Логотип
• UI (интерфейс)
• Брендинг
• Кеш браузера
• HTML-тег link
• SVG
• PWA-иконки

Наши услуги

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