Получить профессию в Skypro
Добавление favicon на сайт через PHP: подробное руководство
Быстрый ответ
Для установки фавикона вставьте следующий тег <link> в секцию <head> вашего HTML-документа:
<link rel="icon" href="/favicon.ico">Это простое действие укажет браузерам использовать файл "/favicon.ico" в качестве иконки вашего сайта. Формат .ico приемлем, так как он может содержать несколько иконок разных размеров (например, 16x16, 32x32 и 48x48 пикселов) в одном файле.
Создание фавиконов различных размеров
Фавикон должен быть адаптирован под различные экраны устройств. Принципы адаптивного дизайна также применимы к иконкам сайта:
<!-- Основной фавикон включает изображения размерами 16x16, 32x32, 48x48 -->
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" type="image/x-icon">
<!-- Для устройств Apple предусмотрена специальная иконка -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Нельзя забывать и о иконках для платформы Microsoft -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">Правильное размещение фавиконов
Фавиконы обычно размещают в корневой директории сайта, однако их также можно разместить в поддиректориях:
<!-- Если фавикон хранится в поддиректории images -->
<link rel="icon" href="/images/favicon.ico">Не забывайте поддерживать актуальность атрибута href и корректировать его в соответствии с расположением файлов!
Совместимость форматов файлов иконок
Формат .ico проверен временем и прекрасно работает, но современные браузеры поддерживают и другие форматы файлов, такие как .png и .svg.
<!-- Для старых браузеров используем favicon.ico -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Для современных браузеров подойдут форматы png и svg -->
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Визуализация
Фавикон на сайте — это визитная карточка, которая дополняет общий стиль:
🌐 + 🎩 = 🌐🎩Графический образ этого сравнения хорошо иллюстрируют пара строчек в секции <head> вашего документа:
<link rel="shortcut icon" href="/path/to/favicon.ico" type="image/x-icon">
<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon">Таким образом, ваш бренд становится легко узнаваемым среди многочисленных открытых вкладок, в закладках и истории браузера.
Анимация сайта с помощью динамического фавикона
Фавикон допускает динамическое изменение в зависимости от действий пользователей или времени суток, что может сделать ваш сайт более привлекательным:
let icon = document.querySelector('link[rel="icon"]');
// Утром показываем иконку с чашкой кофе
if (new Date().getHours() < 12) {
icon.href = '/morning-favicon.ico';
} else {
// Вечером вместо этого – иконку с изображением бокала пива
icon.href = '/evening-favicon.ico';
}Избегание распространенных ошибок
Браузеры могут кэшировать фавиконы, что может создать сложности при их обновлении. К тому же, не все генераторы фавиконов обеспечивают высокое качество изображений. Неоптимизированные файлы могут привести к проблемам с производительностью:
<!-- Иногда для обновления кэша используются параметры в URL -->
<link rel="icon" href="/favicon.ico?v=2">
<!-- Неоптимизированные иконки могут негативно повлиять на производительность -->
<link rel="icon" href="/heavy-unoptimized-favicon.png">Полезные материалы
- Метаданные в HTML: Добавление пользовательских иконок на ваш сайт – Основы веб-разработки | MDN
- Атрибут rel в ссылках HTML
- Генератор фавиконов для создания идеальных иконок во всех браузерах
- Фавиконы, иконки для сенсорных экранов, плиточные иконки и т.д. — что вам нужно? | CSS-Tricks
- SVG фавиконы | Can I use... Таблицы поддержки для HTML5, CSS3 и др.