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

Обновлено 2026/05/19

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

Главная цель favicon — не просто обозначить сайт, а усилить узнаваемость бренда и повысить кликабельность (CTR) в поисковой выдаче за счёт визуального выделения среди конкурентов.

Современный набор favicon (Favicon Kit)

Корректная реализация включает несколько форматов, каждый из которых закрывает свою задачу:

• favicon.svg — основной современный формат (вектор, идеальная четкость на любых экранах);
• favicon.ico — совместимость со старыми браузерами и системами;
• apple-touch-icon.png — иконка для iOS (iPhone / iPad);
• site.webmanifest — манифест для Android и PWA;
• разные PNG-размеры (32×32, 180×180, 192×192, 512×512) для универсальной поддержки.

Как прописать фавикон в HTML: актуальный код и стандарты

<!-- Основной современный favicon (SVG) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Fallback для старых браузеров -->
<link rel="alternate icon" href="/favicon.ico" type="image/x-icon">

<!-- Apple устройства -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- PWA / Android / Windows плитки -->
<link rel="manifest" href="/site.webmanifest">

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

SVG favicon и адаптация под тёмную тему

SVG стал основным форматом favicon благодаря своей гибкости: он масштабируется без потери качества и может адаптироваться под тёмную и светлую темы интерфейса.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <style>
 path { fill: black; }
 @media (prefers-color-scheme: dark) {
 path { fill: white; }
 }
 </style>

 <path d="M10 10 H 90 V 90 H 10 Z"/>
</svg>

Это решает ключевую проблему старых favicon — потерю читаемости на тёмном фоне вкладок браузера.

Почему SVG заменил классические favicon.ico

• не требует множества размеров (один файл заменяет десятки PNG);
• идеально масштабируется на Retina и 4K экранах;
• может динамически менять цвет и стиль;
• лучше подходит для бренд-дизайна и минималистичных интерфейсов;
• уменьшает вес проекта и упрощает поддержку.

Manifest.json и PWA

Favicon тесно связан с PWA (Progressive Web Apps). Файл site.webmanifest задаёт поведение иконок на Android, Windows и при установке сайта как приложения.

{
 "name": "My Website",
 "short_name": "Site",
 "icons": [
 {
 "src": "/icon-192.png",
 "sizes": "192x192",
 "type": "image/png",
 "purpose": "any maskable"
 },
 {
 "src": "/icon-512.png",
 "sizes": "512x512",
 "type": "image/png",
 "purpose": "any maskable"
 }
 ],
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "display": "standalone"
}

Добавление purpose: "any maskable" позволяет системе корректно обрабатывать адаптивные иконки без обрезки и артефактов на Android и в PWA-режиме.

Создание favicon в современных инструментах

Вместо ручной сборки используются готовые инструменты:

• Figma — создание исходного SVG и экспорт в нужные форматы;
• Adobe Illustrator — работа с векторной графикой;
• RealFaviconGenerator — автоматическая генерация полного пакета иконок под все платформы.

На практике чаще всего используется связка: Figma → экспорт SVG → RealFaviconGenerator для упаковки всех необходимых размеров.

Favicon и влияние на SEO

Хотя favicon не является прямым фактором ранжирования, он влияет на поведенческие метрики:

• повышает CTR в поисковой выдаче за счёт визуального выделения;
• усиливает узнаваемость бренда;
• улучшает восприятие сайта в закладках и истории браузера;
• повышает доверие пользователя к ресурсу.

В поисковой выдаче favicon стал частью визуального блока сайта, особенно на мобильных устройствах, где он усиливает заметность результата.

Актуальные требования к favicon

1. Использовать SVG как основной формат, а ICO — только как fallback.
2. Обеспечить корректное отображение в светлой и тёмной теме.
3. Использовать минимум 180×180 для Apple устройств и 192×192 / 512×512 для Android.
4. Размещать favicon в корне сайта для стабильного доступа.
5. Не менять путь к favicon без необходимости (влияет на кеширование и обновление в выдаче).