Зачем фавиконов нужно аж 24 штуки?

Что такое favicon.ico?

Открывая страницу сайта, вы видите его иконку в левой части вкладки.

Вот это - фавиконы.

Где используются?

Изначально файл favicon.ico был единственным на сайте и отображался во вкладке браузера рядом с названием страницы. Сейчас с ростом количества устройств, программ и повышением разрешающей способности экранов их количество доходит до 24 штук.

Какие бывают?

Для каждого устройства, каждый размер экрана используют свой размер фавикона.

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

• SVG иконка. Универсальный формат. Из него можно сделать иконку в любом качестве. Старайтесь использовать именно её.
• 16x16 пикселей. Базовый размер фавикона. Используется для HD и Full-HD экранов.
• 24x24 пикселя. Размер фавикона для 2K экранов. Владельцы таких экранов ставят в настройках операционной системы увеличение интерфейса 150%. Поэтому нужен размер не 16, а 24 пикселя.
• 32x32 пикселя. Размер фавикона для Ultra HD экранов. Владельцы таких экранов ставят в настройках операционной системы увеличение интерфейса 200%. Поэтому нужен размер не 16, а 32 пикселя.
• 48x48 пикселя. Размер фавикон для телефонов, когда индекс DPR от 3 и более.
• 76x76, 152x152, 167x167 пикселя. Иконка для iPad в зависимости от модели.
• 96x96, 144x144, 256x256, 384x384 пикселя. Иконки для браузеров в зависимости от разрешения монитора.
• 120x120, 180x180 пикселя. Иконка для iPhone в зависимости от модели.
• 128x128 пикселя. Chrome веб стор.
• 192x192 пикселя. Рекомендованный Google Developers размер для webmanifest.
• 196x196 пикселя. Для Android.
• 228x228 пикселя (устарел). Иконка для браузера Opera Coast.
• 100x300 пикселей (устарел). Иконка для табло яндекс браузера.
• 300x300 пикселя. Размер для Squarespace.
• 512x512 пикселя. Favicon рекомендованный для PWA приложений, WordPress и app store.
• 70x70, 150x150, 310x310, 310x150. Файл browserconfg.xml для Windows 8, 10 и ie11. Поддержка этого файла прекратилась в 2017 году, но эти операционные системы всё ещё популярны.
• Однотонная одноцветная SVG картинка для для макбуков с 2016 по 2023 год выпуска.

Зачем столько размеров?

Столько размеров нужно, чтобы приложения самостоятельно не масштабировали изображения, так как это может привести к потери качества из-за несовершенства алгоритмов масштабирования. Например, изображение 144х144 пикселя сделанное из 180х180 пикселей будет мутноватым, а если исходник будет 512х512 пикселей, то нет.

Вот так искажаются ваши фавиконы, когда они сжимаются с 180 до 144 пикселей. Поэтому исходная картинка должна быть крупной для каждого размера

Как автоматически сгенерировать?

Просто воспользоваться вот этим сервисом. Один экран, одна кнопка — удобная визуальная демонстрация. Из преимуществ:

• Генерирует полный набор фавиконов их 23 картинок + SVG и оптимизирует их вес с помощью optipng и svgo.
• Сохраняет файл favicon.ico в PNG формате, а не ICO. Само название файла остаётся оригинальным «favicon.ico», но его формат — PNG. Благодаря тому, что PNG файл сжимается, мы экономим до 10 КБ по сравнению с форматом ICO.
• Файл favicon.ico делается размером 32х32 пикселя вместо стандартный 16х16, чтобы подходить для 4k экранов.
• Поддерживает легаси форматы Windows Metro и Safari. Для последнего ресайзит иконку до корректного размера viewBox согласно документации.

Альтернативный сервис https://realfavicongenerator.net. Его преимущества:

• Генерирует фавиконы для специфичных систем вроде grunt, gulp, npm и прочих менеджеров пакетов. Правда делается это через установку и интеграцию их специального пакета.
• Тонкие технические настройки, вроде выбора алгоритма компрессии и алгоритма масштабирования изображения. Но лучше выбирать тот, который сгенерирует самые легковесные картинки.
• Во всём остальном уступает предыдущему сервису.