Руководства по фавиконам
Понятные ответы на вопросы при создании фавикона: какие размеры и форматы выбрать и какой код вставить.
Размеры фавиконов: форматы и назначение
Поиск по запросу «размер фавикона» до сих пор выдаёт списки из пятнадцати файлов, пришедшие из 2014 года. На практике шесть размеров покрывают вкладки браузера, результаты поиска, iOS, Android и PWA. Разберём каждый и объясним его назначение.
Читать руководствоБесплатная конвертация PNG в ICO
.ico по-прежнему ожидают увидеть в корне сайта, а большинство онлайн-конвертеров требуют загрузить изображение на свой сервер. Расскажем, как получить правильный favicon.ico с несколькими размерами из PNG, никуда не отправляя файл.
Читать руководствоapple-touch-icon: размер, формат и код
Значок Apple Touch явно задаёт изображение, которое используется при добавлении сайта на главный экран iPhone. Это отдельный ресурс: он отличается от фавикона вкладки и значков, объявленных в манифесте веб-приложения.
Читать руководствоФавикон для тёмной темы с помощью SVG
Чёрный логотип на прозрачном фоне отлично выглядит в светлой вкладке и исчезает в тёмной. ICO не умеет адаптироваться, а SVG-фавикон умеет: внутри него есть CSS-правило, меняющее цвета в зависимости от темы браузера.
Читать руководствоДобавление фавикона в HTML
Надёжный фавикон в HTML не сводится к одному волшебному тегу. Для него нужен небольшой набор доступных файлов и ссылок в head. Эта инструкция охватывает современные вкладки, старые клиенты и мобильные ярлыки без множества исторических вариантов.
Читать руководствоФавикон не отображается или не обновляется
Если фавикон не появился, причина не всегда в файле. Браузер, CDN, service worker и поисковая система могут хранить разные версии. Последовательная диагностика помогает не менять несколько параметров одновременно.
Читать руководствоФавиконы в Next.js App Router
App Router может создавать элементы значков на основе файлов со специальными именами или объекта metadata. Оба подхода допустимы, но их смешение без понятного правила легко приводит к конкурирующим объявлениям.
Читать руководствоРуководство по SVG-фавиконам
SVG сохраняет чёткость краёв при любой плотности пикселей и умеет адаптировать цвета к теме. У этой гибкости есть условие: файл должен быть автономным, простым и читаемым в очень маленькой области.
Читать руководство