Заметки о фавиконах

Руководство · 3 мин чтения

Почему ваш фавикон не обновляется и как это исправить

Вы поменяли фавикон, развернули, перезагрузили... а старый всё ещё на месте. Это самая частая жалоба на фавиконы, и почти никогда это не проблема кода. Браузеры кэшируют фавиконы гораздо агрессивнее, чем страницы или изображения, и кэш фавиконов обычно переживает обычную перезагрузку.

Решайте в таком порядке:

• Принудительная перезагрузка. Ctrl+Shift+R (Windows) или Cmd+Shift+R (Mac) перезагружает страницу в обход кэша.
• Снова откройте вкладку. Кэш фавиконов обычно привязан к открытой вкладке. Закройте её полностью и откройте новую.
• Сломайте его параметром. Направьте link на «новый» URL во время тестирования: <link rel="icon" href="/favicon.ico?v=2">. Повышайте число при каждом изменении.
• Убедитесь, что файл действительно там. Загрузите yourdomain.com/favicon.ico напрямую; если возвращается 404, браузер показывает закэшированную иконку файла, которого больше нет.

Google Search — особый случай. Он кэширует ваш фавикон независимо от ваших страниц и обновляется по графику Google, поэтому новая иконка в результатах поиска может задержаться на дни или недели, даже если ваш сайт уже правильный. Кнопки, чтобы ускорить это, нет: убедитесь, что /favicon.ico возвращает 200 для Googlebot, и ждите.

Мнение · 4 мин чтения

Перестаньте создавать 20 файлов фавикона: минимальный набор 2026 года

Многие инструменты для фавиконов до сих пор выдают вам ZIP с шестнадцатью PNG, browserconfig.xml и плиточными изображениями Microsoft. Почти всё это мёртвый груз. Плитки Windows ушли вместе с интерфейсом Live Tiles; куча промежуточных размеров PNG решала проблему браузеров, которой больше не существует.

Вот набор, который покрывает всё, что используется сегодня:

• favicon.ico: многоразмерный (16/32/48), для старых браузеров и Google Search.
• icon.svg: масштабируемый файл, который предпочитают современные браузеры, способный к тёмному режиму.
• apple-touch-icon.png: 180×180 для главных экранов iOS.
• PNG android-chrome-192 и -512: на которые ссылается ваш веб-манифест приложения для Android и PWA.

Пять файлов, четыре ссылки <link>/манифеста, готово. Меньше файлов означает меньше того, что нужно держать синхронизированным, более лёгкое развёртывание и никакого устаревшего browserconfig.xml, указывающего на изображения, которые вы удалили. Если инструмент настаивает, что вам нужно двадцать, он оптимизируется под видимость тщательности, а не под то, что запрашивают браузеры.

Техника · 3 мин чтения

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

Тёмный логотип выглядит чётко на светлой панели вкладок и почти исчезает на тёмной. Публиковать два файла и менять их местами хлопотно. С SVG-фавиконом вы можете позволить одному файлу реагировать на тему браузера, потому что браузер применяет CSS внутри SVG при отрисовке иконки.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .glyph { fill: #111; }
    @media (prefers-color-scheme: dark) { .glyph { fill: #fff; } }
  </style>
  <path class="glyph" d="…"/>
</svg>

Ссылайтесь на него через <link rel="icon" href="/icon.svg" type="image/svg+xml"> и сохраняйте простой favicon.ico как запасной вариант: старые браузеры и Google Search не станут вычислять медиазапрос, поэтому им тоже нужна статическая иконка. Результат: в светлой системе глиф тёмный, в тёмной он меняется на светлый — всё из одного маленького файла.