Конвертировать PNG в ICO (favicon)

Что должен уметь favicon

Favicon показывается в очень маленьком размере, часто 16 на 16 пикселей. При таком размере мелкие детали исчезают, а тонкие линии пропадают совсем. Хороший favicon это смелая простая форма с сильным контрастом: одна буква, упрощённый знак логотипа или сплошная фигура в фирменном цвете. Если в логотипе есть надпись, используйте только символ или первую букву.

Файлы .ico содержат несколько размеров, потому что масштабирование одного изображения при показе выглядит размыто. Имея версии 16, 32, 48 и 64 пикселя, система или браузер показывает точное до пикселя изображение в каждом случае: 16 пикс. на вкладке, 32 пикс. в списке закладок на экране высокой плотности, 48 пикс. в ярлыке на панели задач Windows и так далее.

Подготовка исходного PNG

• Сделайте его квадратным. Если логотип широкий, сначала поместите его на квадратный прозрачный холст или обрежьте до символа инструментом обрезки.
• Начинайте с 256 пикселей или больше. Уменьшение из большого чистого исходника даёт более гладкий результат, чем увеличение маленького.
• Оставьте прозрачный фон, если фигура сплошная, чтобы она хорошо смотрелась и в светлой, и в тёмной теме браузера. Если фигура тонкая или светлая, поместите её на сплошной скруглённый квадрат.
• Избегайте текста длиннее одного-двух символов: на 16 пикселях его не прочитать.

Установка favicon

Сохраните скачанный файл как favicon.ico и положите его в корневую папку сайта. Затем добавьте это внутрь <head> каждой страницы:

<link rel="icon" href="/favicon.ico" sizes="any">

На большинстве платформ для этого есть отдельная настройка: в WordPress это Site Icon в разделе Appearance, в Shopify и Squarespace поле Favicon в настройках темы, в Webflow оно в Project Settings. Загрузите .ico туда. Подробнее в руководстве как сделать favicon.

Что дальше

Для полного набора иконок, которые запрашивают современные устройства, понадобятся также PNG на 180 пикселей для ярлыков на главном экране iOS (apple-touch-icon) и PNG на 192 и 512 пикселей для Android и манифеста веб-приложения. Это обычные файлы PNG, поэтому сделайте их из того же исходника инструментом изменения размера. Файл .ico с этой страницы закрывает вкладки браузера, закладки и Windows, то есть те места, где отсутствие favicon замечают чаще всего.