Как добавить фавикон на ваш сайт

Статья показывает, как настроить набор фавиконов с использованием SVG, PNG, Apple Touch Icon и web manifest для корректного отображения сайта во всех браузерах.

OpenReplay Team

Nov 23, 2025 · 4 min read

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

В этой статье рассматривается современная минималистичная настройка фавикона, которая работает везде: favicon SVG для современных браузеров, favicon PNG для запасных вариантов, Apple Touch Icon для устройств iOS и иконки веб-манифеста для Progressive Web Apps.

Ключевые выводы

Современная настройка фавикона требует лишь небольшого набора необходимых файлов: ICO для совместимости, SVG-фавикон, PNG 32×32, Apple Touch Icon и пару иконок для веб-манифеста.
SVG-фавиконы идеально масштабируются и поддерживают тёмный режим через CSS media queries
Safari и iOS теперь полностью поддерживают SVG-фавиконы, поэтому они могут служить основной иконкой для современных браузеров
Агрессивное кэширование браузерами требует стратегий версионирования при обновлении фавиконов

Современный набор фавиконов

Забудьте о десятках размеров иконок из 2015 года. Вот что вам действительно нужно:

Необходимые иконки

favicon.ico (мультиразмерный, обычно 16×16 и 32×32) — запасной вариант для старых браузеров
favicon.svg — масштабируемый для всех современных браузеров
icon-32.png — для интерфейса браузера и результатов поиска Google
apple-touch-icon.png (180×180) — для главного экрана iOS
icon-192.png и icon-512.png — для веб-манифеста PWA

Safari и iOS теперь полностью поддерживают SVG-фавиконы. Утверждения об отсутствии поддержки SVG устарели — все основные браузеры теперь надёжно поддерживают SVG-фавиконы.

HTML-реализация

Добавьте эти четыре строки в ваш <head>:

<!-- Fallback for legacy browsers -->
<link rel="icon" href="/favicon.ico">

<!-- PNG for browser UI and Google SERPs -->
<link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">

<!-- Modern browsers (scales cleanly) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icon for iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web manifest for PWAs -->
<link rel="manifest" href="/manifest.json">

Примечание: пропустите rel="shortcut icon" — этот атрибут устарел с 2003 года. Просто используйте rel="icon".

Создание иконок

SVG-фавикон

SVG-фавиконы бесконечно масштабируются и поддерживают такие функции, как тёмный режим:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M64 16L16 112h96z"/>
</svg>

Делайте SVG-фавиконы простыми. Сложные градиенты и эффекты не будут хорошо отображаться при размере 16×16 пикселей.

PNG-фавикон

PNG 32×32 служит двум критически важным целям:

Запасной вариант для браузеров, не поддерживающих SVG
Отображение в результатах поиска Google

Используйте инструмент вроде RealFaviconGenerator или Favicon.io для генерации PNG-версий из вашего SVG.

Apple Touch Icon

iOS требует PNG 180×180 со следующими характеристиками:

Без прозрачности (используйте сплошной фон)
Без закруглённых углов (iOS добавляет их сама)
Высокая контрастность для видимости на различных обоях

Назовите файл точно apple-touch-icon.png и поместите его в корневую директорию. iOS найдёт его автоматически даже без тега <link>, но явное указание обеспечивает надёжность.

Иконки веб-манифеста

Для Progressive Web Apps создайте manifest.json:

{
  "name": "Your App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Эти иконки веб-манифеста обеспечивают функциональность «Добавить на главный экран» на Android и установку PWA на десктопе.

Поддержка тёмного режима

Помимо подхода с media query в SVG, вы можете менять фавиконы с помощью JavaScript:

const favicon = document.querySelector('link[rel="icon"]');
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function updateFavicon(e) {
  favicon.href = e.matches ? '/favicon-dark.svg' : '/favicon-light.svg';
}

darkModeMediaQuery.addEventListener('change', updateFavicon);
updateFavicon(darkModeMediaQuery);

Работа с кэшем

Браузеры агрессивно кэшируют фавиконы. При обновлении иконки:

Версионируйте имя файла: измените favicon.svg на favicon-v2.svg
Добавьте строку запроса: favicon.svg?v=2
Обновите все ссылки в вашем HTML

Для немедленного тестирования откройте сайт в режиме инкогнито/приватном окне.

Распространённые проблемы

Фавикон не отображается?

Проверьте путь — используйте абсолютные пути (/favicon.svg), а не относительные
Проверьте MIME-типы: SVG требует image/svg+xml
Тестируйте в режиме инкогнито, чтобы обойти кэш

Размытость на Retina-дисплеях?

Используйте SVG как основную иконку
Убедитесь, что PNG-экспорты имеют точно 32×32 и 180×180 пикселей

Неправильная иконка на iOS?

iOS приоритизирует apple-touch-icon.png в корневой директории
Очистите кэш Safari: Настройки → Safari → Очистить историю и данные сайтов

Заключение

Современная реализация фавикона проще, чем предполагают устаревшие руководства. Пять файлов — ICO, SVG, PNG, Apple Touch Icon и иконки веб-манифеста — покрывают все браузеры, устройства и сценарии использования. Откажитесь от устаревших наборов из десятков иконок и метаданных Windows-плиток, если они вам специально не нужны.

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

Часто задаваемые вопросы

Могу ли я использовать только SVG-фавикон без запасных вариантов?

Хотя SVG-фавиконы работают во всех современных браузерах, запасные варианты всё равно нужны. Старым браузерам требуются ICO-файлы, iOS нужен apple-touch-icon.png для ярлыков на главном экране, а результаты поиска Google специально ищут PNG-фавиконы.

Почему мой фавикон выглядит по-другому в тёмном режиме, хотя я его не настраивал?

Некоторые браузеры автоматически корректируют цвета фавикона для видимости в тёмном режиме. Чтобы контролировать это поведение, используйте CSS media queries в вашем SVG-фавиконе или реализуйте переключение фавиконов на JavaScript для стабильного отображения.

Сколько времени требуется для отображения изменённого фавикона везде?

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

Open-source session replay

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Star on GitHub12k