Один знак, несколько назначений

Как настроить favicon

Подготовьте простой квадратный знак, экспортируйте только нужные варианты и явно свяжите их с head/manifest, сохранив стабильные URL.

Схема подготовки favicon из исходного знака для разных поверхностей
Каждый export имеет собственные размер, формат и purpose.

Пошаговая настройка

  1. Сохраните текущие files/head/manifest и скриншоты вкладки, закладки и mobile shortcut.
  2. Упростите знак: крупный силуэт, контраст, минимум деталей и текста; проверьте в 16, 32 и 48 px.
  3. Подготовьте квадратные PNG/ICO и при необходимости SVG, apple-touch и manifest icons; не растягивайте non-square logo.
  4. Добавьте ранние link в server head с точными rel, type, sizes и URL.
  5. Если есть installable web app, проверьте manifest JSON, purpose и safe zone maskable icon; не добавляйте manifest только ради вкладки.
  6. Убедитесь, что homepage и icon crawlable, URL стабилен, response 200, MIME совпадает и cache version меняется осознанно.
  7. Очистите relevant cache, проверьте браузеры/устройства и запросите recrawl homepage.

Пример head

<link rel="icon" href="assets/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="assets/favicon-32.png" type="image/png" sizes="32x32">
<link rel="icon" href="assets/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="assets/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="site.webmanifest">

Набор зависит от поддержки и продукта; не копируйте строки без соответствующих файлов. Для Google Search квадрат должен быть минимум 8×8, рекомендуется больше 48×48 и stable URL.

Не путайте favicon с logo

Favicon должен выживать в малом размере. Полный wordmark, тонкие линии и текст часто становятся нечитаемыми — нужен адаптированный знак.

Откат и контроль

При пропавшей иконке верните прежние links/files, проверьте exact URL/MIME и очистите browser/CDN cache. Не переименовывайте URL повторно без причины. Завершите независимым аудитом.