Размеры Favicon и файлы ICO: что находится внутри favicon.ico

Самый совет фавикона - это список из дюжины размеров PNG, скопированных с генератора, который был написан в 2014 г. Большинство из этих размеров больше ничего не делают То, что нужно сайту сегодня, - это короткое: один favicon.ico для браузеров и инструментов, которые все еще ищут его, один масштабируемый или высокого разрешения значок для всего современного, и один сенсорный значок для телефонов. часть, которая сбивает людей вверх, это сам .ico, потому что это не изображение с нечетным расширением. Это небольшой контейнер, содержащий несколько изображений.

В этом руководстве рассказывается о том, как создается файл ICO, какие размеры принадлежат favicon.ico и почему, какие другие файлы значков нужны сайту рядом с ним, а также об ошибках, из-за которых значок выглядит мягким или нечитаемым на вкладке браузера. Он находится под хаб инструментов изображений, и каждый размер, указанный для преобразователя Toolz, взят из его исходного кода.

TL;DR: Файл ICO - это контейнер: короткий каталог, за которым следует несколько квадратных изображений, по одному на размер, из которых браузер или операционная система выбирают наиболее близкое совпадение. для favicon.ico включите 16, 32 и 48 px, и добавьте 256 px, если один и тот же файл удваивается как значок Windows. Каждая запись может содержать не более 256 x 256 пикселей. Наряду с ним объявите значок SVG или большой PNG и 180 x 180 apple-touch-icon, йо- выше Преобразователь PNG в ICO записывает записи размером 16, 32, 48 и 256 px как PNG с прозрачностью, на стороне клиента, ничего не загружается, бесплатно, без регистрации.

Что такое файл ICO?

Файл ICO - это формат значков Windows: заголовок, каталог, в котором перечислено каждое изображение внутри, и данные изображения для каждой записи. Microsoft задокументировала макет в своей Техническая статья значков, и это был формат для Windows программы, ярлык и значки папок с первых версий Windows. браузеры приняли его для фавиконов в конце 1990-х, поэтому файл на большинстве веб-сайтов до сих пор называется favicon.ico, йо-

Каталог - это то, что отличает его от PNG или JPG. Программное обеспечение, которому нужен значок в 16 пикселей, читает каталог, находит запись, ближайшую к 16, и рисует ее. вкладка, список закладок, кнопка панели задач и ярлык на рабочем столе могут каждый взять различное изображение из одного файла. Это позволяет дизайнеру поставить упрощенную отметку для крошечных размеров и подробную для больших размеров, вместо того, чтобы позволить масштабировать одно изображение повсюду.

Формат имеет два типа носителей. списки IANA image/vnd.microsoft.icon, в то время как большинство серверов и браузеров используют более старые image/x-icon. Оба работают на благосклонность.

Как структурирован файл ICO?

Файл ICO начинается с 6-байтового заголовка, за которым следует одна 16-байтовая запись каталога на изображение, за которой следуют данные изображения. все числа имеют малый эндиан.

ICONDIR (6 bytes)
  reserved      2 bytes   always 0
  type          2 bytes   1 = icon (2 = cursor)
  count         2 bytes   number of images

ICONDIRENTRY (16 bytes, repeated count times)
  width         1 byte    pixels; 0 means 256
  height        1 byte    pixels; 0 means 256
  colorCount    1 byte    palette size; 0 when there is no palette
  reserved      1 byte    0
  planes        2 bytes   1
  bitCount      2 bytes   bits per pixel, e.g. 32
  bytesInRes    4 bytes   size of this image's data
  imageOffset   4 bytes   where this image's data starts in the file

Image data (one block per entry)
  either a BMP-style DIB (without the file header)
  or a complete PNG file

Две детали этого макета объясняют большую часть запутанных вещей в значках.

Потолок в 256 пикселей состоит из одного байта. Ширина и высота хранятся каждый в одном байте, который может держать от 0 до 255. формат повторно использует 0, чтобы означать 256, и нет возможности выразить что-либо большее. запись 512 x 512 не может существовать в действительном ICO, что бы ни утверждал генератор.

Записи могут быть PNG. Ранние значки хранили каждое изображение как несжатое растровое изображение с отдельной 1-битной маской прозрачности. Поскольку Windows Vista, вместо этого запись может содержать полный файл PNG, который намного меньше при больших размерах и несет правильный альфа-канал. Значок 256 x 256, хранящийся в виде несжатой 32-битной растровой карты, составляет примерно 256 КБ; то же изображение, что и PNG, обычно составляет лишь часть этого.

Конвертер Toolz пишет современный вариант Его конструктор ICO устанавливает тип 1, одна запись каталога на размер с плоскостями 1 и 32 бита на пиксель, записывает 256 как 0, и сохраняет каждую запись как PNG с его альфа-каналом Запрашивать его на размер вне 1 до 256 отказывается до того, как что-либо будет написано, потому что каталог не имеет возможности записать его.

Какого размера должен быть фавикон?

Favicon.ico должен содержать изображения 16 x 16, 32 x 32 и 48 x 48, а также изображение 256 x 256, если вы также хотите, чтобы файл работал как значок Windows. Помимо .ico, современные браузеры предпочитают SVG или большой PNG, объявленный с тегом ссылки, а телефоны используют отдельный сенсорный значок.

Эта таблица отображает каждый размер в то место, где он используется Точное поведение варьируется в зависимости от браузера, операционной системы и масштабирования дисплея, поэтому рассматривайте это как обычный случай:

Размер	Где это проявляется	Нужен в favicon.ico?
16 х 16	Вкладки браузера, адресная строка, закладки на стандартных дисплеях	да
32 х 32	Вкладки на дисплеях высокой плотности, панели задач Windows и ярлыках	да
48 х 48	Ярлыки рабочего стола Windows, средние представления значков; Поиск Google рекомендует увеличивать размер	да
256 х 256	Просмотры больших и очень больших значков Windows	Только если используется как значок Windows
180 х 180	Домашний экран iPhone и iPad (apple-touch-icon))	Нет, отдельный PNG
192 х 192	Домашний экран Android, манифест веб-приложения	Нет, отдельный PNG
512 х 512	Веб-приложение манифест, установка и заставка экранов	Нет, не умещается в ICO
Любой (СВГ)	Современные браузеры, поддерживающие значки SVG, включая варианты темного режима	Нет, отдельная СВГ

По результатам поиска, Рекомендации Google и #39;s favicon попросите квадратный значок и порекомендуйте один больше 48 x 48 пикселей, и Google получает его из значка, объявленного на вашей домашней странице. .ico, который завершает 16 пикселей, является распространенной причиной того, что значок сайта и #39;s выглядит размытым рядом с результатом поиска.

Какие файлы favicon нужны сайту?

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

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

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Каждая строка имеет задание:

• favicon.ico является запасным. The Стандарт WHATWG HTML позволяет браузерам запрашивать /favicon.ico из корня сайта, когда страница вообще не объявляет значок, а RSS-читалки, сканеры и старые инструменты по-прежнему делают. Храните файл в корне, даже если вы объявляете другие значки.
• icon.svg является острым значком для браузеров, которые поддерживают SVG фавиконы, Он масштабируется до любой плотности и может включать a prefers-color-scheme медиа-запрос, поэтому значок адаптируется к темным вкладкам. Не каждый браузер уважает это, поэтому .ico остается.
• apple-touch-icon.png в 180 x 180 то, что iOS использует, когда кто-то добавляет ваш сайт на главный экран. Дайте ему непрозрачный фон, так как iOS не сохраняет прозрачность на значках домашнего экрана.
• Значки манифеста на 192 и 512 - это то, что браузеры на базе Android и Chromium используют, когда сайт установлен как приложение, как описано в разделе Манифест веб-приложений W3C, йо-

выше sizes атрибут на ссылке .ico имеет значение в одном. когда браузер видит SVG и размер .ico, он может сказать, что SVG - это масштабируемый выбор. Некоторые настройки используют sizes="any" вместо этого на .ico, а некоторые версии Chrome ответили выбором .ico вместо SVG. Определенный размер позволяет избежать этого.

Почему мой фавикон выглядит размытым или неправильным?

Большинство проблем с фавиконом исходят из исходного изображения, а не из формата. ICO хранит все, что ему дано, в каждом размере, и масштабирование может идти только в одном направлении.

Симптом	Причина	Исправить
Мягкий, пятнистый вход 256 шт	Источник меньше 256 px, поэтому его растянули	Начните с экспорта 512 x 512 или выше
Логотип раздавлен или растянут	Неквадратный источник растянулся до квадрата	Посеять или поставить на квадрат перед преобразованием
Словесный знак нечитаем на вкладке	Текст, нарисованный при 16 px, имеет высоту два пикселя	Используйте только символ для 16 и 32 пикселей
Тонкий контур исчезает	Штрихи менее 1 шт. при небольших размерах	Утолщенные штрихи в варианте небольшого размера
Белый ящик вокруг значка	Источник JPG не имеет прозрачности	Используйте PNG с альфа-каналом
Старая икона продолжает отображаться	Браузеры агрессивно кэшируют фавиконы	Переименовать файл или добавить строку запроса, затем жестко обновить
Нет значка в результатах Google	Значок ниже 48 px, заблокированный robots.txt, или не на главной странице	Подавайте значок большего размера на главной странице и разрешите сканирование

Первый ряд стоит прописать, потому что он ловит опытных дизайнеров тоже. 64 px источник преобразованный с 256 тикэд производит 256 px запись, которая является 64 px изображение увеличено четыре раза, Это как раз вход высокой плотности представления Windows и большие ярлыки показывают. Даунскейлинг от большого источника направление, которое выглядит хорошо.

Третий ряд - вопрос арифметики. 16 x 16 иконка имеет 256 пикселей в общей сложности. пятибуквенный словесный знак, втиснутый в эту ширину, получает около трех пикселей на букву, и сглаживание превращает их в серые пятна. почти каждый известный сайт использует одну букву или символ для своего фавикона по этой причине.

Как сделать favicon.ico из PNG?

Экспортируйте квадратный PNG размером не менее 512 x 512 пикселей с прозрачным фоном, преобразуйте его в ICO с необходимыми размерами и проверьте запись 16 px в реальном размере перед публикацией.

Использование Преобразователь PNG в ICO на Toolz:

1. Бросьте PNG. Несколько могут войти сразу; каждый становится своим собственным.ico.
2. Выберите размеры значков Все четыре поля, 16, 32, 48 и 256 px, отмечены галочкой для начала. для чистого фавикона, untick 256, чтобы сделать файл намного легче, так как запись 256 является большей частью его веса. если вы отметите все четыре, конвертер падает обратно к записи все четыре, а не к созданию пустой значок.
3. Нажмите "Перевести в ICO". Квадрат 512 x 512 logo.png возвращается как logo.ico с примечанием & quot;Содержит 16, 32, 48, 256 пикселей icons.& quot;
4. Загрузите файл или возьмите пакет как converted-ico.zip, йо-

Преобразователь рисует ваше изображение на холсте каждого размера, кодирует каждый квадрат как PNG, и упаковывает их наименьшие сначала в один.ico, все клиент-сторона, так что художественное произведение никогда не покидает устройство Прозрачность сохраняется на каждом размере. неквадратный источник растянут, чтобы заполнить каждый квадрат, а не обрезать, и в примечании так и написано: опустите словесный знак 1024 x 256 и он сообщает, что изображение было 1024x256 и было растянуто до квадратов выбранных вами размеров. эта нота - ваш сигнал обрезать или заполнить первым.

Для лучшего результата при небольших размерах сделайте два PNG: подробный для 48 и 256 px и упрощенный символ для 16 и 32 px. Преобразуйте каждый, указав только его размеры. конвертер записывает один источник в файл, поэтому подход с двумя изображениями дает вам два файла.ico; используйте упрощенный как favicon.ico, поскольку браузеры в основном выбирают небольшие записи и подробные записи для приложений Windows или значков ярлыков.

Могу ли я сделать ICO из JPG или SVG?

Да обоим, с оговоркой к каждому.

JPG работает, но каждая запись значка выходит в виде заполненного квадрата без прозрачности, поскольку в JPEG нет альфа-канала, и ни один конвертер не может его восстановить. Конвертер JPG в ICO перепробовывает фотографию в те же квадраты размером 16, 32, 48 и 256 пикселей. фотографии также теряют почти все детали при 16 пикселей, поэтому плотно обрезайте вокруг одного высококонтрастного объекта и сделайте обрезку квадратной перед преобразованием. Фотография телефона 4032 x 3024, преобразованная как есть, сжимается горизонтально, и записка говорит вам об этом.

SVG - лучший возможный источник, поскольку он не имеет фиксированного разрешения и делает его резким при каждом размере входа. Маршрут зависит от того, сколько контроля вы хотите. Преобразователь SVG в PNG визуализирует SVG в PNG, который вы можете проверить и отредактировать первым; любой SVG, самая длинная сторона которого ниже 512 px, рисуется на 512, поэтому значок SVG 24 x 24 по-прежнему дает чистый источник для записи 256. Или опустите SVG прямо в общий Преобразователь изображений, который принимает SVG, PNG, JPG и дюжину других форматов, и выбирает ICO в качестве цели для рендеринга и упаковки его за один шаг.

Источник	Прозрачность в ICO	Острота при 256 пкс	Лучшее использование
стара	сохраненный	Острый, визуализированный из векторов	Логотипы у вас в векторной форме
PNG 512 px или больше	сохраненный	Острый	Самые фавориконы
PNG менее 256 пх	сохраненный	Мягкий в 256	Отмените 256 или реэкспортируйте крупнее
JPG	Нет, заполненный квадрат	Зависит от размера источника	Только фотоиконки
Существующие ICO	сохраненный	Перестроено из записи, которую декодирует браузер	Изменение размера файла

Существующий .ico также можно вернуть обратно. конвертер никогда не рассматривает ICO в ICO как переименование; он всегда восстанавливает файл в размерах, которые вы отмечаете. Это быстрый способ удалить раздутый значок до 16, 32 и 48, хотя он восстанавливается с одной записи, которую декодирует браузер, поэтому начните с исходного изображения, если оно у вас есть. SVG против PNG рассказывает, почему мастер векторов стоит оставить именно для такого рода реэкспорта.

Имеет ли значение favicon.ico в 2026 году?

Да, как запасной вариант Текущие браузеры используют значки SVG или PNG, которые вы объявляете, но корень /favicon.ico это все еще то, что некоторые браузеры, считыватели каналов, инструменты закладок и сканеры получают, когда они не находят объявления или не поддерживают объявленный тип. Отсутствующий также заполняет журналы сервера с 404, поскольку эти запросы поступают независимо от того, существует файл или нет.

Что уже не имеет значения, так это длинный хвост устаревших размеров. Отдельные 57, 60, 72, 76, 114, 120, 144 и 152 пиксельных сенсорных значков датируются более старыми версиями iOS и покрываются одним файлом 180 px. Образы плиток Windows, объявленные через browserconfig.xml принадлежал к Windows 8 и 10 Start screen плитки, Ни для нового сайта не нужен.

Вот практический минимальный набор с ожидаемыми размерами файлов:

Файл	Размер пикселя	Типичный вес	Требуется?
favicon.ico с 16, 32, 48	16, 32, 48	Несколько КБ	Да, как запасной вариант
icon.svg	Масштабируемый	Меньше 2 КБ для простой отметки	рекомендуемый
apple-touch-icon.png	180 х 180	от 5 до 20 КБ	Да, для iOS
icon-192.png, icon-512.png	192, 512	от 10 до 60 КБ	Если на сайте есть манифест

Является ли преобразование значков в браузере частным?

Да. на Toolz, декодирование, изменение размера, кодирование PNG и упаковка .ico все происходят клиент-сторона, внутри браузера вкладка, поэтому никакое изображение не загружается, и страница продолжает работать в автономном режиме после загрузки Метаданные и цветовые профили, прикрепленные к источнику, отбрасываются холстом шаг, который для значка безвреден.

Изображения выше 100 мегапикселей и пустые файлы отказываются с сообщением, а источники SVG более 50 МБ. Инструменты бесплатны, без регистрации, с ежедневным лимитом на конверсии.

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