Как работают форматы значков

Знание того, как работает каждый формат, поможет вам устранить неизбежную проблему «мой значок не отображается».

6 мин чтения

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

Контейнер .ico

Файл .ico представляет собой заголовок, за которым следует одна или несколько записей изображений. Каждая запись может иметь формат BMP или PNG, и каждая имеет ширину, высоту и разрядность.

Браузеры анализируют каталог, выбирают запись, соответствующую запрошенному размеру, и декодируют только ее.

PNG внутри .ico

Для размеров 64×64 и выше сжатие PNG сокращает размер файла в 5–10 раз без визуальной потери. Современные генераторы (в том числе и наш) делают это автоматически.

SVG значки

Значок SVG — это обычный файл SVG. Браузеры отображают его как любой другой SVG, а блок <style> может адаптировать цвета на основе предпочтительной цветовой схемы.

Как браузеры выбирают

Если вы отправляете несколько тегов <link rel="icon">, браузеры выбирают тот, который лучше всего соответствует поверхности (вкладка, закладка или установка). SVG является предпочтительным, если поддерживается; .ico — это запасной вариант.

Частые вопросы

What is inside a .ico file?

A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.

How do browsers choose which favicon to display?

Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.

Why use PNG inside an .ico instead of BMP?

PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.

Can I use only SVG for favicons?

Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.

Связанные руководства

Попробуйте инструменты

Продолжить чтение