Что такое 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 пикселей, то нет.
Как автоматически сгенерировать?
Просто воспользоваться вот этим сервисом. Один экран, одна кнопка — удобная визуальная демонстрация. Из преимуществ:
Генерирует полный набор фавиконов из 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 и прочих менеджеров пакетов. Правда делается это через установку и интеграцию их специального пакета.
Тонкие технические настройки, вроде выбора алгоритма компрессии и алгоритма масштабирования изображения. Но лучше выбирать тот, который сгенерирует самые легковесные картинки.
Во всём остальном уступает предыдущему сервису.
Комментарии (17)
delicious
17.10.2025 20:34Нужно 3 файла (2025 год на дворе!) https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
https://medium.com/web-dev-survey-from-kyoto/favicon-nightmare-how-to-maintain-sanity-7628bfc39918
Axenic Автор
17.10.2025 20:34В посте написано, почему желательно делать все виды иконок - чтобы программа, их использующая, не масштабировала их самостоятельно. В первой вашей ссылке автор указывает 2 картинки 192 и 512 пикселей. Какой-нибудь android телефон возьмёт ближайшее разрешение в 192 пикселя и сделает из него 180. И картинка будет мутной.
Также есть ещё легаси фавиконы для Windows Metro и Mackbook панели. Плюс базовый /favicon.ico нужно определённым образом создать (размер 32 пикселя и сжатие PNG).
К тому же есть сервис который в 1 клик все размеры подготовит. В нём что 3, что 30 иконок - одни и те же трудозатраты по интеграции.
dyadyaSerezha
17.10.2025 20:34Блин, сколько этих иконок я нарисовал ещё в 90-е... Именно ещё тогда я удивлялся, почему в Windows нет станадтного API по генерации иконок из заданной/заданных. И как я понял, его нет и по сей день ни в одной ОС. А так, можно было бы создать руками 3-4 иконки на самые ходовые размеры и использовать API по генерации нужной. Или даже сделать это встроенной функцией, когда приложение просто объявляет ОС свой набор иконок, а дальше ОС сама по умолчанию под капотом генерит нужные размеры из набора готовых.
Axenic Автор
17.10.2025 20:34В идеале, приложение должно использовать векторную SVG иконку, чтобы сгенерировать из неё любой размер. Но ещё часто для приложений нужно указывать цвет фона. Так же бывает, что в некоторых приложениях иконка нужна с отступами от краёв. Поэтому сложности с тем, чтобы унифицировать все иконки есть.
API, о котором вы говорите, можно назвать файл webmanifest. Сейчас более менее всё устаканилось и все используют его, но ещё 5 лет назад каждый производитель свой формат придумывал. Например apple свой touch bar, microsoft для интерфейса metro, яндекс браузер для табло.
dyadyaSerezha
17.10.2025 20:34Поэтому сложности с тем, чтобы унифицировать все иконки есть.
Сложности могут быть ну год, ну два, ну три. Но тут уже 30 лет борются с несчастными иконками. Доколе?)
ArtyomOchkin
17.10.2025 20:34И даже в Visual Studio максимально криво реализована функция редактирования иконки/Live tile. Когда недавно делал проект OneBrowser (пока на него времени нет), то просто в Paint'e приходилось открывать демо-заготовки и через них добавлять иконку, ибо в VS вставить картинку в поле не получается, и разве что рисовать вручную каждую (что криво и бессмысленно).
achekalin
17.10.2025 20:34Всегда бесило, что любой boilerplate шаблон для минимальной страницы - это файла 3 (страница, js, CSS), и еще файлов 10(!!) для иконок. Казалось бы, тема известная и отработанная, казалось бы, договоритесь брать сверхидиотский по запасу информации вариант 512х512, и масштабируете на здоровье, но нет, все живут с "а вдруг!?", уделяя иконкам на кривом телефоне (хозяин которого вообще не парится об этом) внимания больше, чем самому сайту.
Почему-то сейчас на любом сайте стандартом стало приделать уведомление о куках, и чатик-помошник типа "наши, чтобы позвать на помощь", который секунд через 29 сам выскакивает и перекрывает сайт - и это типа никого не смущает, но вот потенциальная мутность иконок при этом не дает спокойно жить?!
Axenic Автор
17.10.2025 20:34Лучше всего использовать не 512х512, а векторную SVG иконку. Она прям вообще идеальная.
И помимо телефонов есть приветственные экраны браузеров (и десктоп, и мобильная), где иконки используются. Это когда браузер открывается и на стартовой странице отображаются недавно посещёные сайты. Это довольно частое применение иконок из webmanifest.
Касательно того, что тема изезженая. Тут согласен. Мусолят её часто, при этом мало кто дополняет материал какими-то новшествами.
Meliborn
Целый пост про два сервиса генерации фавиконов?
Axenic Автор
Сама по себе тема небольшая и нюансов в ней не более десятка. Просто собрал всё в 1 кратком посте, чтобы не приходилось изучать несколько источников.
К тому же в посте описаны пара новых нюансов про сокращение файла favicon.ico и то, что он размером 32 пикселя должен быть, которых я нигде не встречал.