Фавикон (.ico) против PNG
ICO и PNG — не конкуренты, а партнеры. Современная настройка значков использует .ico в качестве универсального резервного варианта и PNG в качестве переопределения с высоким разрешением. Именно здесь каждый из них выигрывает.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
ICO уникален тем, что в одном файле реализовано несколько разрешений. Браузер или ОС выбирает наиболее близкое совпадение во время прорисовки — без масштабирования и нечетких краев.
PNG обеспечивает более четкое изображение при любом индивидуальном разрешении и поддерживает лучшее сжатие однотонных логотипов. Он не может вставлять несколько размеров в один файл.
Оптимальная настройка — один файл .ico разного размера плюс отдельные PNG размером 32×32 и 180×180 для браузеров с высоким разрешением и iOS.
Как это работает
- 1
Начните с источника 512×512.
PNG или SVG.
- 2
Сгенерировать оба формата
FetchFavicon выводит .ico разных размеров плюс отдельные 16/32/48/180/192/512 PNG.
- 3
Свяжите оба в <head>
<link rel="icon" href="/favicon.ico">, за которым следует <link rel="icon" type="image/png" size="32x32" href="/favicon-32x32.png">.
Попробовать сейчас
Создайте файлы .ico и PNG.
Конвертер PNG в ICOЧастые вопросы
Какой размер файла меньше?+
Одиночный PNG меньше, чем .ico с тем же разрешением, но .ico с несколькими размерами заменяет 4-6 PNG и обычно выигрывает по общему количеству байтов.
Показывает ли Google значки PNG в результатах поиска?+
Да. Google поддерживает как .ico, так и PNG. Он предпочитает квадратное соотношение сторон не менее 48×48.
Может ли PNG поддерживать темный режим?+
Не напрямую. Используйте вариант SVG вместе с PNG для поддержки темного режима.