Объяснение размеров фавиконов (16–256): что включить в favicon.ico
Точно знайте, какие размеры иконок принадлежат вашему favicon.ico и почему каждый важен
Конвертировать сейчасГде фавиконы действительно появляются
Большинство людей думают о фавиконах как о крошечных иконках во вкладках браузера, но они появляются гораздо в большем количестве мест. Понимание каждого контекста помогает вам выбрать, какие размеры включить, чтобы ваша иконка всегда выглядела четко.
Вкладки браузера — наиболее видимое место. Каждая открытая вкладка отображает ваш фавикон примерно в 16 пикселей, делая его основным способом, которым пользователи идентифицируют ваш сайт, когда открыто много вкладок. Панели закладок и меню также отрисовывают вашу иконку при 16 пикселей в большинстве браузеров, поэтому четкая версия этого размера не подлежит обсуждению.
Адресные строки и предложения поиска в некоторых браузерах показывают фавикон рядом с URL, обычно при 16 или 32 пикселях в зависимости от плотности дисплея. Панели истории ведут себя аналогично, извлекая фавикон, чтобы помочь пользователям просматривать ранее посещенные сайты.
За пределами браузера фавиконы также появляются в контекстах операционной системы. Когда пользователь закрепляет ваш сайт на панели задач Windows или создает ярлык рабочего стола, ОС извлекает из файла ICO и может отрисовать иконку при 48, 64 или даже 256 пикселей. На дисплеях высокого DPI (класса Retina) иконка 32 пикселя может быть растянута, чтобы заполнить пространство, требующее больше деталей, производя размытый результат, если больший вариант не существует внутри ICO.
Прогрессивные веб-приложения (PWA) используют свои собственные иконки манифеста, а не favicon.ico, но фавикон все еще имеет значение как резервный для стандартного хрома браузера и для пользователей, которые добавляют сайт в закладки без установки PWA.
Для чего нужен каждый размер фавикона
Каждый размер в пикселях служит отдельной цели. Таблица ниже сопоставляет каждый стандартный размер фавикона с его общим использованием и указывает, следует ли вам включать его.
| Размер (пиксели) | Общее использование | Включать? |
|---|---|---|
| 16 × 16 | Вкладки браузера, панели закладок, адресная строка, история | Да — требуется |
| 32 × 32 | Вкладки браузера высокого DPI, панель задач Windows, macOS Safari | Да — требуется |
| 48 × 48 | Закрепленные ярлыки сайтов Windows, Windows Explorer | Да — рекомендуется |
| 64 × 64 | Некоторые поверхности UI Windows, RSS-ридеры | Опционально |
| 128 × 128 | Вид больших иконок Windows, Chrome Web Store | Опционально |
| 256 × 256 | Очень большой вид Windows, ярлыки рабочего стола высокого DPI | Рекомендуется для полноты |
16 и 32 пикселя — абсолютные основы. Без них браузеры возвращаются к общей иконке глобуса или пустой иконке, что вредит узнаваемости бренда. Эти два размера охватывают практически каждый стандартный и высокий DPI сценарий вкладки браузера.
48 пикселей входит в картину, когда пользователи создают ярлыки Windows на ваш сайт. Операционная система отрисовывает ярлыки рабочего стола при 48 пикселях в виде иконок по умолчанию, поэтому включение этого размера предотвращает неловкое масштабирование вверх варианта 32 пикселя ОС.
64 и 128 пикселей появляются в нишевых контекстах. Некоторые поверхности UI Windows и сторонние приложения запрашивают иконку 64 пикселя, в то время как 128 пикселей используется Chrome Web Store и определенными видами больших иконок. Включение их добавляет всего несколько килобайт к файлу ICO, поэтому компромисс минимален.
256 пикселей имеет наибольшее значение на мониторах высокого DPI. Когда Windows отрисовывает вид очень большой иконки или пользователь закрепляет ваш сайт на панели задач на дисплее 4K, ОС может извлечь вариант 256 пикселей для наиболее четкой возможной отрисовки.
Рекомендуемый безопасный набор
Если вы хотите один favicon.ico, который охватывает самый широкий диапазон контекстов без ненужного раздувания, используйте этот безопасный набор:
- 16 пикселей — вкладки браузера и закладки
- 32 пикселя — вкладки высокого DPI и панель задач Windows
- 48 пикселей — ярлыки рабочего стола Windows
- 256 пикселей — высокий DPI и очень большие виды иконок
Этот набор из четырех размеров сохраняет файл ICO компактным (обычно менее 30 КБ), обеспечивая четкую отрисовку в каждом основном контексте. Вы можете добавить 64 и 128 пикселей, если ваш случай использования требует этого, но большинство веб-сайтов никогда не заметят разницы.
Если вы создаете фавикон исключительно для веба и не ожидаете, что пользователи создадут ярлыки рабочего стола, вы можете сократить набор до только 16 и 32 пикселей. Это создает файл ICO значительно менее 10 КБ. Однако стоимость включения 48 и 256 настолько мала, что мы рекомендуем полный безопасный набор в качестве настройки по умолчанию почти для каждого проекта.
Для более широкого взгляда на то, как работает формат ICO и когда это правильный выбор над PNG, см. наше объяснение что такое файл ICO.
Как генерировать правильные размеры фавиконов
Создание многоразмерного favicon.ico занимает всего несколько шагов с Any2ICO. Инструмент принимает исходные изображения PNG, JPG, WebP, GIF, BMP, AVIF и SVG размером до 10 МБ и создает правильно структурированный файл ICO, содержащий каждый выбранный вами размер.
- Начните с исходного изображения высокого разрешения. Загрузите ваш логотип или иконку при 512 пикселей или больше. Большой источник дает конвертеру достаточно деталей для создания чистых уменьшенных версий при каждом целевом размере. Источники SVG работают особенно хорошо, потому что они масштабируются без какой-либо потери деталей.
- Выберите ваши размеры. Отметьте поля для 16, 32, 48 и 256 (безопасный набор), или добавьте 64 и 128, если они вам нужны.
- Выберите поведение масштабирования. Contain вписывает изображение внутри каждого квадрата, сохраняя соотношение сторон, заполняя любое дополнительное пространство. Cover заполняет весь квадрат, обрезая края при необходимости. Для большинства логотипов contain с прозрачным фоном — лучший выбор.
- Загрузите ваш favicon.ico. Поместите полученный файл в корень вашего веб-сайта (
https://yoursite.com/favicon.ico). Браузеры автоматически ищут этот путь, поэтому во многих случаях вам даже не нужен тег<link>.
Any2ICO выполняет конвертацию напрямую в вашем браузере, используя Canvas API. Файлы, импортированные с вашего устройства, передаются через сервер для обработки, но не хранятся. Вставки из буфера обмена остаются полностью на вашей машине. Если вы конвертируете несколько иконок одновременно, пакетный режим позволяет вам загрузить всё в одном файле ZIP.
Для полного пошагового руководства со скриншотами и фрагментами кода HTML см. наше руководство о том, как создать favicon.ico. И если вам нужно конвертировать PNG конкретно, наше руководство по PNG в ICO подробно рассматривает этот рабочий процесс.
Подведение итогов
Выбор правильных размеров фавиконов не должен быть сложным. Основное правило просто: всегда включайте 16 и 32 пикселя, добавляйте 48 и 256 для Windows и покрытия высокого DPI, и используйте исходное изображение высокого разрешения, чтобы сохранить каждый размер четким. Этот набор из четырех размеров обрабатывает подавляющее большинство реальных сценариев.
Когда вы готовы создать ваш фавикон, Any2ICO делает это легко. Загрузите ваше изображение, выберите ваши размеры и загрузите один файл ICO, который работает везде. Это бесплатно, быстро и уважает вашу конфиденциальность.