Добавление favicon на сайт через PHP: подробное руководство

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для установки фавикона вставьте следующий тег <link> в секцию <head> вашего HTML-документа:

HTML

Скопировать код

<link rel="icon" href="/favicon.ico">

Это простое действие укажет браузерам использовать файл "/favicon.ico" в качестве иконки вашего сайта. Формат .ico приемлем, так как он может содержать несколько иконок разных размеров (например, 16x16, 32x32 и 48x48 пикселов) в одном файле.

Создание фавиконов различных размеров

Фавикон должен быть адаптирован под различные экраны устройств. Принципы адаптивного дизайна также применимы к иконкам сайта:

HTML

Скопировать код

<!-- Основной фавикон включает изображения размерами 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">

Правильное размещение фавиконов

Фавиконы обычно размещают в корневой директории сайта, однако их также можно разместить в поддиректориях:

HTML

Скопировать код

<!-- Если фавикон хранится в поддиректории images -->
<link rel="icon" href="/images/favicon.ico">

Не забывайте поддерживать актуальность атрибута href и корректировать его в соответствии с расположением файлов!

Совместимость форматов файлов иконок

Формат .ico проверен временем и прекрасно работает, но современные браузеры поддерживают и другие форматы файлов, такие как .png и .svg.

HTML

Скопировать код

<!-- Для старых браузеров используем 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">

Визуализация

Фавикон на сайте — это визитная карточка, которая дополняет общий стиль:

Markdown

Скопировать код

🌐 + 🎩 = 🌐🎩

Графический образ этого сравнения хорошо иллюстрируют пара строчек в секции <head> вашего документа:

HTML

Скопировать код

<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';
}

Избегание распространенных ошибок

Браузеры могут кэшировать фавиконы, что может создать сложности при их обновлении. К тому же, не все генераторы фавиконов обеспечивают высокое качество изображений. Неоптимизированные файлы могут привести к проблемам с производительностью:

HTML

Скопировать код

<!-- Иногда для обновления кэша используются параметры в URL -->
<link rel="icon" href="/favicon.ico?v=2">
<!-- Неоптимизированные иконки могут негативно повлиять на производительность -->
<link rel="icon" href="/heavy-unoptimized-favicon.png">

Добавление favicon на сайт через PHP: подробное руководство

Быстрый ответ

Создание фавиконов различных размеров

Правильное размещение фавиконов

Совместимость форматов файлов иконок

Визуализация

Анимация сайта с помощью динамического фавикона

Избегание распространенных ошибок

Полезные материалы