22.21. Использование favicon.ico
Проблема
Favicon широко используются на веб-сайтах для улучшения узнаваемости бренда и удобства пользователя. Например, на сайте http://www.freebsd.org favicon в виде маленького чертика отображается в адресной строке браузера и в списке закладок. Вы хотите создать собственную иконку для сайта, чтобы посетители могли легко его идентифицировать.
Решение
Для создания favicon необходимо подготовить изображение в формате .ico и добавить его в настройки сервера и веб-страниц. Важно отметить, что изображение должно быть не просто переименованным файлом .jpg или .png, а настоящим файлом .ico.
Основные требования к favicon:
- Размер изображения: 16x16 пикселей.
- Цветовая глубина: 16 цветов (4-битовая).
- Имя файла:
favicon.ico.
Для создания файла можно воспользоваться графическими редакторами, поддерживающими экспорт в формат .ico. Например, это могут быть GIMP, Babygimp или Kiconedit. Редактор Kiconedit особенно удобен, но требует установки KDE.
После создания файла favicon.ico сохраните его в корневом каталоге сайта (в примерах этой главы это /var/www/). Чтобы браузеры распознали файл как значок сайта, добавьте в конфигурацию Apache следующую строку в httpd.conf:
AddType image/x-icon .icoТакже добавьте следующие строки в заголовки HTML-страниц:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">Первая строка позволяет отображать иконку рядом с URL вашего сайта в адресной строке браузера, а вторая строка — в списках закладок браузера.
Комментарий
Если создание собственного значка не входит в ваши планы, можно найти готовые варианты. Для этого выполните поиск по ключевым словам «favicon clip art» или «favicon gallery». Вы найдёте множество шаблонов и сможете выбрать понравившийся.
Если сервер поддерживает несколько виртуальных хостов, каждый из них может иметь уникальный значок. В таком случае необходимо добавить строку AddType image/x-icon .ico в соответствующую директиву VirtualHost для каждого сайта.
Современные требования к favicon допускают также более крупные размеры, такие как 32x32 и даже 48x48 пикселей, что позволяет отображать эмблему с высоким качеством на различных устройствах. Однако для базовой совместимости стоит использовать размер 16x16 пикселей, который поддерживается всеми браузерами.
См. также