Получить профессию в Skypro
Как добавить иконку вкладки браузера (favicon) на сайт
Быстрый ответ
Чтобы добавить иконку вкладки на вашем сайте, поставьте следующий HTML-код в секцию <head>:
<link rel="icon" href="/favicon.ico" type="image/x-icon">Для увеличения совместимости можно использовать иконку в формате PNG:
<link rel="icon" href="/favicon.png" type="image/png">Не забудьте правильно указать путь к иконке. Если она расположена на вашем сервере, здесь нет необходимости в цельном URL.
Подробное руководство по favicon
Работа с favicon требует бережного обращения с деталями. Займёмся гарантированием совместимости на разных платформах и оптимизацией нашего сайта для достижения наивысшей степени корректности.
Овладение форматами и размерами
Favicon должен быть представлен в разных форматах, чтобы удовлетворять требования различных устройств и браузеров:
<link rel="icon" sizes="32x32" href="/favicon-32x32.png">Формат ICO — это старый проверенный временем стандарт, в то время как PNG хорош для современных браузеров и поддерживает прозрачность.
Генераторы favicon помогут вам автоматически создать необходимые размеры и форматы.
Особенности Apple и Microsoft
Не забыть о пользователях Apple и Microsoft, добавив соответствующие настройки:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">Android и Chrome
Также стоит учесть пользовательские настройки для Android и Chrome:
<link rel="manifest" href="/manifest.json">В файле manifest.json укажите иконки и цвета приложений для обеспечения единообразия интерфейса.
Преимущества SVG
Иконки SVG — это эффективный и гибкий инструмент:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Они предоставляют великолепные возможности для масштабирования и стилизации, однако требуют тщательной проверки на перформанс.
Выжимаем максимум из favicon
Добавьте browserconfig.xml для Windows и оптимизируйте файл .htaccess для кеширования и сжатия favicon.
Визуализация
Favicon — это ваш виртуальный знак, обозначающий присутствие вашего сайта в интернете.
- Создайте иконку: favicon.ico.
- Разместите её в корневой директории сайта.
- Вставьте ссылку в <head>:
<link rel="icon" href="/favicon.ico">.
В результате каждая вкладка браузера будет отражать ваш бренд.
Отображение: 🏳️🟨
Стратегия favicon для разных устройств
Учтите требования разных браузеров и устройств для улучшения идентифицируемости вашего сайта.
Укрощение браузеров
Для гарантированной работы на разных платформах необходимо использовать специфические настройки, как в следующем примере:
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/smalltile.png"/>
<square150x150logo src="/mediumtile.png"/>
<wide310x150logo src="/widetile.png"/>
<square310x310logo src="/largetile.png"/>
<TileColor>#FFFFFF</TileColor>
</tile>
</msapplication>
</browserconfig>А также не забыть о статус-баре на iOS и тематическом цвете для Chrome:
<meta name="apple-mobile-web-app-status-bar-style" content="#000000">
<meta name="theme-color" content="#ffffff">Согласованность и производительность
Важно гарантировать безотказную работу вашего favicon на всех платформах. Используйте сервисы вроде Can I Use, чтобы проверить совместимость форматов.
Полезные материалы
- Как добавить favicon в HTML — W3Schools объясняет процедуру добавления favicon.
- HTML атрибут: rel – HTML: Гипертекстовый язык разметки | MDN — MDN предоставляет руководство по атрибуту
rel. - Favicons, Touch Icons, Tile Icons и так далее. Что вам нужно? | CSS-Tricks — CSS-Tricks освещает вопрос выбора иконок.
- Генератор favicon для совершенства — Инструмент для создания иконок, оптимизированных под браузеры.
- Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т. д. — Таблицы совместимости для использования SVG в качестве favicon.
- Генератор favicon и иконок приложений — Инструмент для генерации favicon и иконок приложений.
- GitHub – audreyfeldroy/favicon-cheat-sheet — Шпаргалка по размерам и типам favicon для проектов на GitHub.