Back

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

OpenReplay Team 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 служит двум критически важным целям:

  1. Запасной вариант для браузеров, не поддерживающих SVG
  2. Отображение в результатах поиска 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);

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

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

  1. Версионируйте имя файла: измените favicon.svg на favicon-v2.svg
  2. Добавьте строку запроса: favicon.svg?v=2
  3. Обновите все ссылки в вашем 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-фавиконы работают во всех современных браузерах, запасные варианты всё равно нужны. Старым браузерам требуются ICO-файлы, iOS нужен apple-touch-icon.png для ярлыков на главном экране, а результаты поиска Google специально ищут PNG-фавиконы.

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

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

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. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog