Как добавить значок на HTML
Добавление значка на простую страницу HTML — это изменение в одну строку, но современная полная настройка состоит из шести строк и охватывает iOS, Android, темный режим и установку PWA.
Единственный тег, который учитывает каждый браузер, — это <link rel="icon" href="/favicon.ico">. Перетащите favicon.ico в корень вашего сайта, и все готово на 80 %.
Остальные 20% — варианты apple-touch-icon, PNG, SVG с поддержкой темного режима и веб-манифест — это то, что отличает значок по умолчанию от безупречного бренда.
Как это работает
- 1
Создайте свой пакет значков
Используйте генератор пакетов FetchFavicon — он создает все необходимые файлы, а также разметку, готовую к вставке.
- 2
Скинуть файлы в корень сайта
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Вставьте фрагмент в <head>.
Шесть тегов <link> + один <meta name="theme-color">.
Попробовать сейчас
Получите фрагмент HTML
Генератор фавиконовЧастые вопросы
Куда идут теги <link>?+
Внутри <head>, где угодно — порядок не имеет значения, если они идут до </head>.
Нужны ли мне как .ico, так и PNG?+
Да. .ico — универсальный запасной вариант; PNG обеспечивает максимальную четкость изображения на экранах с высоким разрешением.
А как насчет темного режима?+
Выпустите вариант SVG, который встраивает медиа-запрос предпочтительной цветовой схемы в блок <style>.