Что такое 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 пикселей. Поэтому исходная картинка должна быть крупной для каждого размера
Вот так искажаются ваши фавиконы, когда они сжимаются с 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 согласно документации.

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

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

  • Тонкие технические настройки, вроде выбора алгоритма компрессии и алгоритма масштабирования изображения. Но лучше выбирать тот, который сгенерирует самые легковесные картинки.

  • Во всём остальном уступает предыдущему сервису.