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

Фавикон (favicon) — это маленькая иконка сайта (логотип), которую браузеры и платформы показывают: на вкладке и в списке вкладок, в закладках и истории, в результатах поиска (иконка рядом с именем сайта), в ярлыках на домашнем экране (мобильные), в «закреплённых»/pinned вкладках (Safari). По сути, это микро-бренд вашего сайта: помогает узнаваемости и доверию, влияет на кликабельность в местах, где иконка видна.

Время прочтения:

4 минуты

Дата публикации:

26.07.25

56

Главная

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

глоссарий

a

b

c

d

e

f

g

h

i

j

l

m

o

p

r

s

t

u

v

w

y

А

Y

А

Б

В

Г

Д

Е

з

и

к

л

м

н

о

п

р

с

т

у

ф

х

ц

ч

ш

А

Я

метрика месяца

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

ROMI

Форматы файлов и размеры

SVG — современный вариант: «векторный», чёткий на любых DPI;

rel="icon" type="image/svg+xml"

ICO — классический контейнер с несколькими растрами (16×16, 32×32, 48×48). Нужен как фолбэк для старых/особых случаев;
Файл обычно по адресу /favicon.ico;
PNG — для мобильных ярлыков и некоторых сценариев: 180×180 (Apple), 192×192 и 512×512 (PWA/Android).

Ориентир минимального набора:

favicon.svg (основной),
favicon.ico («на всякий случай»),
apple-touch-icon.png 180×180,
иконки 192×192 и 512×512 в manifest.json (для PWA/Android).

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

Векторный фавикон 
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Фолбэк для старых движков 
<link rel="icon" href="/favicon.ico" sizes="any">

Иконка для iOS (ярлык на домашнем экране) 
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Манифест PWA с наборами иконок 
<link rel="manifest" href="/site.webmanifest">

Иконка для закреплённых вкладок Safari (монохромная SVG) 
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0ea5e9">

Цвет интерфейса браузера (адресная строка на мобайле/ПВА)
<meta name="theme-color" content="#0ea5e9">

rel="shortcut icon" — устаревшая форма, сегодня достаточно rel="icon".

Дизайн иконки: что учитывать

Квадрат 1:1, важные элементы — по центру, без тонких деталей;
Контраст: иконка должна быть различима на светлой и тёмной теме;
Прозрачный фон у PNG/SVG — удобнее для разных фонов UI;
Без мелкого текста: на 16×16 буквы не читаемы;
Вариант для pinned-tab (Safari) — одноцветная SVG-маска (заливается цветом из color).

Кеш и обновления

Фавиконы сильно кешируются браузерами и прокси. Чтобы обновить:

меняйте имя файла (/favicon.v2.svg) или добавляйте параметр версии (/favicon.svg?v=2);
не забудьте обновить ссылки в <head> и в manifest.json.

Отдельно: многие браузеры автоматически запрашивают /favicon.ico — держите этот файл в корне, даже если основной — SVG.

Влияние на SEO и сниппеты

Прямо на ранжирование фавикон не влияет, но:

в SERP (мобильный и всё чаще десктоп) рядом с доменным именем показывается ваша иконка → влияет на узнаваемость и CTR;
аккуратный фавикон — элемент доверия (особенно у коммерческих сайтов).

Следите, чтобы:

иконка не была «шумной» или вводящей в заблуждение;
домен, бренд и иконка визуально консистентны.

PWA и платформенные нюансы

В site.webmanifest перечислите наборы иконок:

{
  "name": "Example App",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "display": "standalone"
}

iOS использует apple-touch-icon (лучше 180×180 PNG без прозрачности — iOS сама скруглит);
Safari pinned tab использует монохромную маску (mask-icon).

Проверка и отладка

Откройте сайт в разных браузерах/темных и светлых темах;
В DevTools → Application/Manifest: видимость иконок, размеры, пути;
Закладки/история — обновилась ли иконка? (при необходимости очистите кеш фавиконов у браузера).

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

Только favicon.ico без SVG/PNG → размыто на ретина-экранах;
Иконка с текстом/мелкими деталями — «каша» в 16×16;
Нет файла /favicon.ico в корне — старые клиенты показывают «пустую» иконку;
Прозрачность/контраст не учтены — иконка пропадает в тёмной теме;
Забыли обновить версии файлов — пользователи видят старую иконку;
Нет apple-touch-icon — на iOS ярлык берёт скриншот страницы.

Мини-чек-лист

favicon.svg + favicon.ico в корне;
apple-touch-icon.png (180×180), PWA-иконки 192×192 и 512×512 в manifest.json;
mask-icon.svg для Safari pinned tab (монохром) и theme-color;
Иконка контрастная, без мелких деталей, выглядит ок в 16×16 и на ретина;
Настроено версионирование файлов (имя или ?v=);
Проверено в браузерах/темах/закладках/истории.

вывод

Фавикон — маленькая, но важная часть бренда сайта: он виден в браузере, закладках и поисковой выдаче, влияя на узнаваемость и CTR. Сделайте набор из SVG + ICO + Apple/PWA-PNG, подключите их правильно, учтите кеш и разные темы интерфейса — и у вас будет аккуратная, вездесущая «визитка» сайта.