Иконки приложений против фавиконов: ICO против PNG и что ожидает каждая платформа
Четкое руководство по выбору правильного формата иконки для каждой платформы
Создать многоразмерный ICOИконки повсюду в современном программном обеспечении, от крошечного изображения во вкладке браузера до большого квадрата на главном экране телефона. Несмотря на похожий внешний вид, эти иконки служат разным целям, следуют разным правилам форматов и отображаются в очень разных контекстах. Смешивание их или использование неправильного формата приводит к размытым вкладкам, отсутствующим иконкам закладок или отклонениям магазина приложений.
Две наиболее распространенные категории — фавиконы и иконки приложений. Фавикон (сокращение от "favorite icon") — это маленькое изображение, которое появляется во вкладках браузера, списках закладок и истории браузера. Иконка приложения — это изображение, которое представляет нативное приложение на рабочем столе или мобильной операционной системе. Обе начинаются как файлы изображений, но они различаются в требованиях к формату, ожиданиях размера и в том, как платформа обнаруживает и использует их.
Эта статья объясняет, что такое каждый тип иконки, когда вы должны использовать формат ICO вместо PNG, и что фактически ожидают основные платформы. Создаете ли вы веб-сайт, упаковываете настольное приложение или отправляете мобильное приложение, вы будете точно знать, какой формат и размеры предоставить.
Что такое фавикон?
Фавикон — это иконка, которую веб-браузер отображает рядом с вашим веб-сайтом. Вы видите её во вкладке браузера рядом с заголовком страницы, в вашем списке закладок, в истории браузера и в некоторых случаях в адресной строке или результатах поиска. Термин происходит от оригинальной реализации Internet Explorer, которая искала файл с именем favicon.ico в корневом каталоге каждого веб-сайта.
Исторически фавиконы должны были быть в формате ICO. Internet Explorer требовал этого, и альтернативы не было. Способность формата ICO встраивать несколько размеров в один файл делала его практичным выбором: один файл мог обслуживать изображение 16x16 для вкладки и изображение 32x32 для панели закладок. Современные браузеры (Chrome, Firefox, Safari, Edge) теперь также принимают фавиконы PNG, указанные через тег <link> в HTML страницы, но они все еще возвращаются к /favicon.ico, если нет явного тега link.
Для максимальной совместимости во всех браузерах, включая старые версии и краулеры, предоставление файла favicon.ico в корне вашего веб-сайта по-прежнему является самым безопасным подходом. Этот файл ICO должен содержать как минимум размеры 16x16 и 32x32. Многие разработчики также включают 48x48 для вкладок браузера высокого DPI. Вы можете дополнить это тегами link PNG для платформ, которые их предпочитают, но файл ICO действует как ваша страховочная сетка.
Что такое иконка приложения?
Иконка приложения представляет нативное приложение в интерфейсе операционной системы. На Windows она появляется на рабочем столе, на панели задач, в меню Пуск и в переключателе ALT+TAB. На macOS она показывается в Dock, Launchpad и Finder. На iOS и Android она занимает место на главном экране и в панели приложений. Каждая платформа имеет свои собственные требования к формату и спецификации размеров.
Windows использует формат ICO для иконок приложений. Исполняемый файл Windows (.exe) встраивает ресурс ICO, который операционная система читает и отображает. Этот ICO должен содержать слои при 16, 32, 48, 64, 128 и 256 пикселей, чтобы охватить каждый контекст отображения и уровень масштабирования DPI. Ярлыки (файлы .lnk) также могут ссылаться на внешние файлы ICO.
macOS использует формат ICNS, который является проприетарным контейнером многоразмерных иконок Apple. Файлы ICNS могут содержать размеры до 1024x1024 пикселей. Исходные изображения обычно являются PNG, которые компилируются в пакет ICNS во время процесса сборки.
iOS требует изображения PNG определенных размеров (60x60 при 2x и 3x, плюс вариации для iPad, Spotlight и Настроек). Apple не использует ICO или ICNS для иконок приложений iOS. Изображения включены в пакет приложения в каталоге ресурсов как обычные PNG.
Android также использует PNG, обычно предоставляемый как слои адаптивной иконки (передний план и фон) при нескольких плотностях (от mdpi до xxxhdpi). Иконка Play Store — PNG 512x512.
Веб-приложения (PWA) используют иконки PNG, на которые ссылаются в файле manifest.json. Общие размеры — 192x192 и 512x512. Эти иконки появляются на главном экране, когда пользователь устанавливает PWA.
ICO против PNG: когда использовать какой формат
Поскольку и ICO, и PNG используются для иконок, естественный вопрос: какой выбрать? Ответ полностью зависит от того, где иконка будет использоваться. Вот таблица решений, которая охватывает наиболее распространенные сценарии.
| Случай использования | Рекомендуемый формат | Почему |
|---|---|---|
| Фавикон веб-сайта (корневой файл) | ICO | Универсальный резервный браузер; многоразмерный в одном файле |
| Фавикон веб-сайта (тег link) | PNG (с резервным ICO) | Современные браузеры предпочитают PNG; ICO охватывает устаревшие браузеры |
| Иконка приложения Windows | ICO | Требуется Windows для исполняемых файлов и ярлыков |
| Иконка приложения macOS | ICNS (из источников PNG) | Требуется macOS; построен из исходных изображений PNG |
| Иконка приложения iOS | PNG | Требуется Apple; специфические размеры для каждого контекста |
| Иконка приложения Android | PNG | Требуется Android; слои адаптивной иконки |
| Иконка главного экрана PWA | PNG | Ссылка в manifest.json; размеры 192 и 512 |
| Приложение Electron/desktop | ICO (Windows) + ICNS (macOS) + PNG (Linux) | Каждая ОС требует свой собственный формат |
На практике большинству проектов нужны как файл ICO (для фавикона веб-сайта и любых целей Windows), так и набор файлов PNG (для мобильных платформ, PWA и исходных изображений macOS). Файл ICO обрабатывает контексты, где ICO требуется или предпочтителен, в то время как PNG охватывают всё остальное. Вы можете сгенерировать часть ICO с помощью Any2ICO из того же исходного PNG, который вы используете для других платформ, сохраняя визуальную согласованность вашей иконки везде.
Практические советы и распространенные ошибки
Правильная настройка иконок на всех платформах требует внимания к нескольким деталям, которые легко упустить. Вот ошибки, которые разработчики делают чаще всего, вместе с простыми исправлениями.
Полагаться на один PNG для всего: Один PNG 512x512 будет работать для некоторых контекстов, но потерпит неудачу для других. Браузеры, которые ищут /favicon.ico, не найдут его. Исполняемые файлы Windows не могут встроить PNG как их ресурс иконки. Всегда генерируйте специальный файл ICO для фавикона и случаев использования Windows, даже если PNG ваш основной исходный формат.
Использование только одного размера в файле ICO: Файл ICO только 32x32 выглядит нормально во вкладке браузера, но становится размытым пятном в виде больших иконок Windows Explorer. Всегда включайте несколько размеров. Полный набор (от 16 до 256) гарантирует, что каждый контекст отображения имеет пиксельно точный слой для отрисовки.
Забывание о высоком DPI и дисплеях Retina: Современные экраны упаковывают в два-три раза больше пикселей стандартных дисплеев. Фавикон 16x16, который хорошо выглядит на мониторе 1080p, появляется крошечным и мягким на дисплее Retina. Включите слой 32x32 (который браузеры используют при масштабировании 2x для слота вкладки 16px) и слой 48x48 для масштабирования 3x или вкладок высокого DPI.
Не тестирование на разных платформах: Иконка, которая выглядит идеально на вашей машине разработки, может выглядеть совершенно по-другому на другой ОС или браузере. Протестируйте ваш фавикон как минимум в Chrome, Firefox, Safari и Edge. Если вы создаете настольное приложение, протестируйте ICO на Windows при масштабировании DPI 100%, 150% и 200%. Несколько минут тестирования экономят часы жалоб пользователей.
Для более глубокого взгляда на формат ICO и его структуру, или для помощи в создании фавиконов конкретно, см. наше руководство по созданию фавиконов.