Мне все еще нужен favicon.ico или достаточно PNG?
ICO — это формат каталога, который объединяет 16, 32 и 48 в один файл размером 4,6 КБ. Что внутри него, почему PNG не заменяет его и семь файлов для доставки.
Каждые несколько лет кто-то объявляет favicon.ico мертвым. Затем RSS-ридер или старая ярлык Windows запрашивает /favicon.ico, получает 404 и показывает пустую страницу. Доставка ICO стоит 4,6 КБ. Это и есть вся аргументация, и именно поэтому наш генератор иконок все еще создает его.
Подайте alpha.png, изображение 900x606 с прозрачностью, и на выходе получите семь файлов: favicon.ico размером 4,6 КБ, favicon-16x16.png размером 521 Б, favicon-32x32.png размером 1,4 КБ, apple-touch-icon.png размером 28,4 КБ и два PNG для android-chrome размером 31,9 КБ и 196 КБ, плюс 371 Б site.webmanifest. Ваш собственный браузер создает все семь. Мы сделали это так, потому что это приложение не имеет API-маршрутов вообще, что является тем предложением, которое ни один серверный сайт favicon не может сказать о себе.
Что на самом деле внутри файла .ico?
ICO — это формат каталога. Файл открывается шестью байтами: зарезервированное слово, установленное в 0, слово типа, установленное в 1 для иконок, и счетчик изображений, которые следуют. После этого идет одна 16-байтовая запись на каждое изображение, содержащая ширину, высоту, количество цветов, зарезервированный байт, цветовые плоскости, биты на пиксель, длину байта данных изображения и его смещение от начала файла. Затем идут полезные данные, конкатенированные. Архивная статья Microsoft о значках 1995 года документирует эти две структуры как ICONDIR и ICONDIRENTRY, и они не изменились.
Ширина и высота получают по одному байту, поэтому 256x256 должно храниться как 0, и ничего больше 256 не помещается в каталог. Наш кодировщик записывает 1 цветовую плоскость и 32 бита на пиксель для каждой записи, и каждый полезный груз — это обычный PNG. Спецификация 1995 года описывает DIB, за которым следует 1-битная маска AND для прозрачности, что объясняет, почему древние значки имели такие резкие края. Три изображения означают 6 байт заголовка плюс 48 байт каталога. Это 54 байта учета, и все остальное в 4,6 КБ — это данные PNG.
Почему один favicon.ico содержит 16, 32 и 48?
Это три размера, которые мы упаковываем, и они не произвольные. Тот же документ Microsoft говорит разработчикам включать 16x16, 32x32 и 48x48 в каждый ресурс значка, затем разъясняет правило выбора: изображение, ближайшее по размеру к запрашиваемому размеру, выигрывает. Панель вкладок запрашивает 16. На дисплее 2x тот же 16 CSS-пиксельный слот требует 32 реальных пикселя, а ярлык рабочего стола Windows запрашивает 48. Если ваш ICO содержит только 16, ярлык получит изображение 16 пикселей, растянутое до 48, и оно будет выглядеть именно так.
Если браузеры читают PNG, зачем вообще отправлять ICO?
Потому что их обнаруживают разными способами. Четырехстрочный фрагмент, который наш инструмент предоставляет вам, называет файлы PNG с явными типами и подсказками размеров, и любой клиент, который анализирует `<head>`, примет их. `Справочник <link>` MDN показывает ту же структуру, несколько ссылок на иконки, атрибуты которых позволяют браузеру выбирать. HTML Standard также позволяет пользовательскому агенту искать /favicon.ico по пути, когда ни одна ссылка на иконку не объявлена, и множество вещей, которые запрашивают ваш URL, никогда не читают ваш разметку. SVG favicon здесь заманчивы, и caniuse ставит их на 90,49% глобальной поддержки, при этом Safari начинает их поддерживать только с версии 26.0. Это оставляет реальный хвост.
Какие семь файлов и какова их масса?
| Файл | Пиксели | Размер | Что это читает |
|---|---|---|---|
| favicon.ico | 16, 32 и 48 упакованы | 4,6 КБ | резервный путь /favicon.ico, ярлыки Windows |
| favicon-16x16.png | 16x16 | 521 Б | панель вкладок на 1x, через тег ссылки |
| favicon-32x32.png | 32x32 | 1,4 КБ | панель вкладок на 2x, через тег ссылки |
| apple-touch-icon.png | 180x180 | 28,4 КБ | главный экран iOS, через тег ссылки |
| android-chrome-192x192.png | 192x192 | 31,9 КБ | массив значков манифеста |
| android-chrome-512x512.png | 512x512 | 196 КБ | массив значков манифеста |
| site.webmanifest | н/д | 371 Б | подсказка об установке |
512 доминирует. Добавьте ICO, оба маленьких PNG, apple-touch-icon и 192 вместе, и вы получите менее 67 КБ в сумме, против 196 КБ для этого одного файла. Стоит знать, что из этого на самом деле стоит вам что-то при просмотре страницы, потому что только ICO и два маленьких PNG участвуют в этом.
Почему мой прозрачный логотип сидит на белом квадрате?
Потому что генератор рисует холст перед тем, как нарисовать ваше произведение, и цвет заливки по умолчанию — #ffffff. Этот контроль — это цветовой ввод, поэтому всегда есть какой-то цвет под ним. Установите его на ваш брендовый хекс, и весь набор будет соответствовать вашему сайту. alpha.png был загружен с альфа-каналом, и каждое из семи изображений вышло непрозрачным, что удивляет людей, которые ожидают прозрачный favicon.
Ползунок отступа работает от 0 до 30 процентов и встраивает ваше произведение в эту долю каждого края значка, так что при 10 процентах значок 32 пикселя сохраняет 3 пикселя границы с каждой стороны. Это заметное количество на этом масштабе. Неп квадратные источники получают черные полосы: логотип 900x606 сохраняет свое соотношение сторон и получает фоновые полосы сверху и снизу. Сначала сделайте его квадратным, если это вас беспокоит. Обрезчик имеет предустановку 1:1, принимает один файл за раз до 10 МБ и перекодирует сжатые форматы с жестко заданным качеством 92. Если вы предпочитаете изменить размер, чем обрезать, изменитель размера имеет предустановки процентов на 25, 50 и 75 с режимами обрезки, содержимого и растяжения.
Как мне конвертировать ICO обратно в PNG?
Используйте ICO в PNG. Он анализирует контейнер, проходит по записям каталога и сохраняет ту, у которой самая большая ширина, затем записывает это как PNG. Укажите ему файл размером 4,6 КБ выше, и вы получите изображение 48x48, потому что 48 — это самое большое, что упаковано там. Он не может восстановить детали, которых никогда не было в файле. Если вам нужно что-то большее, увеличиватель запускает Real-ESRGAN в вашем браузере и всегда выводит PNG; наш тест small.png размером 400x269 вернулся как 800x538 на настройке 2x. Является ли реконструкция или простая интерполяция правильным инструментом зависит от того, для чего предназначен значок. Стоит знать: модель производит только 4x внутренне, поэтому 2x — это уменьшение, применяемое позже. Наш конвертер охватывает 24 пары по 11 форматам и не создает ICO для ни одного из них. Значки поступают от генератора значков.
Является ли значок размером 196 КБ слишком большим?
Это android-chrome-512x512.png, и это самый тяжелый элемент в наборе. Он загружается, когда кто-то устанавливает ваш сайт как приложение, что регулируется спецификацией W3C Web App Manifest, поэтому он не находится на критическом пути обычной загрузки страницы. Вы все равно можете его уменьшить. Наш компрессор предлагает два режима PNG, которые ведут себя совершенно по-разному: "PNG без сжатия" запускает oxipng на уровне 3 и остается без потерь, в то время как "PNG меньшего размера файла" квантует до палитры из 256 цветов с помощью imagequant. На alpha.png, 942,4 КБ на исходе, без потерь прошло 383,9 КБ, а палитра дала 98,3 КБ. Плоский логотип обычно выживает с 256 цветами, не вызывая никаких замечаний. Сжатие также удаляет все остатки метаданных, включая EXIF и ICC, что для значка именно то, что вам нужно.
Вот конкретный следующий шаг. Откройте генератор иконок, загрузите самый большой квадратный источник, который у вас есть (он принимает JPEG, PNG, WebP, AVIF, GIF и SVG до 10 МБ, один файл), установите цвет фона на ваш брендовый хекс, оставьте отступ на 0 и создайте. Скопируйте четыре тега ссылки в `<head>`, загрузите favicon.ico в корень вашего веб-сайта, и вы закончите. Если вы хотите подтвердить, что ничего не покинуло вашу машину, посмотрите на вкладку сети во время работы, или прочитайте нашу страницу конфиденциальности. Где каждый из семи файлов должен находиться на вашем сервере написано отдельно в полном объеме.