Что такое фавикон и зачем он нужен сайту

Фавикон (favicon) — это маленькая иконка, которая обозначает сайт. Её видно во вкладке браузера, в закладках и истории, на главном экране телефона и рядом с названием сайта в результатах поиска Google и Яндекса.

Откуда взялось слово «фавикон»

Favicon — сокращение от английского favorite icon, «иконка избранного». В 1999 году Internet Explorer начал показывать такие иконки рядом с сайтами в меню «Избранное». Сейчас фавикон отображается почти везде, где появляется сайт, но название осталось прежним.

Где отображается фавикон

Вкладки браузера — по фавикону вашу вкладку находят среди десятка других
Закладки и история
Результаты поиска — Google и Яндекс показывают фавикон рядом с адресом сайта
Главный экран телефона, если сайт добавили на него (Apple Touch Icon и иконки Android)
Превью ссылок в некоторых мессенджерах и RSS-ридерах

Зачем сайту фавикон

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

Каким должен быть хороший фавикон

Фавикон показывается размером всего 16×16 пикселей, поэтому лучшие фавиконы простые:

одна крупная фигура или 1–3 буквы
сильный контраст между иконкой и фоном
цвета вашего бренда

Мелкие детали, тонкие линии и длинные слова на таком размере просто исчезают.

Какие файлы нужны для фавикона

Сегодня обычно достаточно такого набора:

Файл	Где используется
favicon.ico (16, 32, 48 внутри)	Почти все браузеры
favicon-16x16.png, favicon-32x32.png	Вкладки браузера
apple-touch-icon.png (180×180)	Экран «Домой» на iPhone и iPad
android-chrome-192x192.png, 512x512.png	Android и PWA

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

Проще всего — в бесплатном генераторе фавикона: выберите логотип, и вы получите весь набор файлов и HTML-код одним архивом. Если логотипа нет, можно сделать фавикон из буквы или эмодзи.

Как подключить готовые файлы, читайте в статье «Как установить фавикон на сайт».