Перед началом
Подготовьте квадратный мастер с одной простой формой. Проверьте светлую и тёмную вкладку. Не переносите фотографию и мелкую подпись в значок только потому, что они есть в основном логотипе.
Текстовое объяснение схемы
Мастер → 16 / 32 px → Проверка вкладки. Буква W в квадрате остаётся различимой на 16 px. Полное название Web Article на том же холсте не читается. Сделайте два варианта и сравните их именно в маленьком размере.
Как сделать
- Нарисуйте знак в векторе или большом растровом файле. Оставьте безопасный отступ: край круга или буквы не должен случайно срезаться.
- Подготовьте favicon.ico для совместимости и SVG или PNG для современных браузеров. Для иконки домашнего экрана отдельно подготовьте подходящий квадратный PNG.
- Добавьте link в head. Проверьте реальные файлы по прямым адресам: ответ 200, правильный тип и изображение. Браузеры сильно кешируют favicon, поэтому при замене используйте новое имя файла.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">Разберём пример
Буква W в квадрате остаётся различимой на 16 px. Полное название Web Article на том же холсте не читается. Сделайте два варианта и сравните их именно в маленьком размере.
Проверьте результат
Проверьте вкладку, закладку и тёмную тему. Иконка не должна быть пустой, обрезанной или похожей на значок другого проекта.
Где легко ошибиться
Файл с расширением .ico не становится ICO после простого переименования PNG. Используйте реальный экспорт или проверенный конвертер.
Источники и продолжение
- MDN — link rel=icon
- Как сделать иконку favicon.ico для своего сайта — 2008-12-25 (RU)
Схема и примеры: редакция Web Article. Схема объясняет принцип и не является снимком интерфейса или результатом испытания программы.