Создать favicon

Как одна иконка превратилась в девять файлов

Каждый файл в наборе существует потому, что его читает что-то конкретное — и ничего другого не читает. favicon.ico с размерами 16, 32 и 48 — по-прежнему то, что браузер по умолчанию ищет в корне сайта и что многие старые программы проверяют первым. favicon-16x16.png и favicon-32x32.png современные браузеры предпочитают для вкладки, потому что PNG точного размера лучше масштабирования. apple-touch-icon.png размером 180 пикселей iOS помещает на домашний экран — прозрачность там не поддерживается, поэтому иконка накладывается на сплошной фон, а не получает чёрные углы. android-chrome-192x192.png и 512x512.png использует установленное прогрессивное веб-приложение для значка в лаунчере и заставки; они объявлены в site.webmanifest.

Один крупный PNG на все случаи работает плохо везде — и это самый распространённый короткий путь. Браузер скачивает полмегабайта, чтобы нарисовать шестнадцать пикселей, iOS игнорирует правила прозрачности и кладёт ваш логотип на чёрный квадрат, а значок в лаунчере обрезается той маской, которую применяет платформа. Набор утомителен именно потому, что у каждого потребителя свои требования.

Фрагмент HTML важен не меньше, чем изображения. Большинство этих файлов браузеры сами не находят — по соглашению обнаруживается только favicon.ico в корне, — поэтому связывают их именно теги link, а манифесту нужен свой. Фрагмент использует пути от корня, которые работают без изменений, пока файлы лежат в корне сайта; если положить их в подпапку, пути придётся поправить и во фрагменте, и в манифесте.

Проектируйте сначала под 16 пикселей. В таком размере есть место для одной формы и, может быть, двух цветов — никакого текста, градиента, мелких деталей и уж точно никакого полного логотипа-надписи. Квадратный, выразительный, контрастный исходник от 512 пикселей или SVG даёт самый чистый набор; предпросмотр показывает вариант 16 px честно, а не лестно, потому что именно он потом вас разочарует. Неквадратные исходники дополняются до квадрата прозрачными полями, а не обрезаются и не растягиваются.

Если нужно другое

Набор, который создаётся здесь, — практичное современное ядро. Если нужен весь длинный хвост — плитки Windows, маска закреплённой вкладки Safari, browserconfig для Microsoft, старые размеры Apple, — RealFaviconGenerator покрывает их и затем проверяет ваш работающий сайт, а это действительно полезная вещь, которую этот инструмент сделать не может.

Для сборочного конвейера создавать иконки вручную — принципиально неправильный подход. favicons, pwa-asset-generator и плагины для фреймворков на основе sharp создают весь набор из одного исходного файла при каждом деплое, так что иконки не могут устареть, когда меняется логотип, — а на практике это происходит всегда.