Иконка в адресной строке

Хотите чтобы ваша собственная иконка нагло светилась в строке с URL'ом. Или в меню "Избранное". Сделать это на самом деле элементарно.

Процедура создания и использования такого изображения довольно проста. Иконку нужно разместить в корневом каталоге сайта необходимо, в файле favicon.ico. Рекомендуемые параметры изображения: 16х16 пикселей - размеры; 16 цветов. Однако, можно создавать иконку с большими размерами 32х32 и 48х48 пикселей. Формат файла *.icon позволяет хранить несколько разных иконок для разных размеров в одном файле.

Если вы, по каким-либо причинам не можете разместить данный файл в корне своего сайта, то используйте директиву

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

В настройках сервера должен быть прописан mime type для типа файлов ico (если вы используете виртуальный хостинг, то можете уточнить этот вопрос у хостинг-провайдера). Проверить несложно: надо в браузере попытаться загрузить файлик - например, yandex.ru/favicon.ico - если грузится текст - значит, mime-type для .ico не прописан.

Если mime type не прописан, то это можно сделать в файле .htaccess (для веб-сервера Apache), если вам он вам доступен для изменения. Формат примерно следующий:

	AddType image/ico ico (регистр важен).

Файлик сделали, mime type даже прописали... а все равно ничего не видим?

Такое случается со старыми версиями браузеров. Так, например, в Microsoft Internet Explorer 5.5 и 6.0 все работает нормально только после того, как сайт добавляется в закладки.

Update

С того дня, как была написана эта заметка, многое изменилось.

Сейчас многие браузеры не требуют явного указания на favicon.ico в коде страницы, если положение иконки не указано в теле HTML документа, то браузер пытается загрузить favicon.ico из корневого каталога сайта.

Для явного указания местоположения favicon.ico необходимо вписать следующую строку в код страницы вашего сайта внутрь секции head:

&ltlink rel="icon" type="image/png" href="/someimage.png" />

где,

• rel может содержать и «shortcut icon» (при этом Microsoft Internet Explorer будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам — на слово «icon»)
• href содержит абсолютный или относительный URI к файлу (в Mozilla Firefox 3.0, например, поддерживаются те же URI, что и с тегом img).

Форматом файла может быть png или gif, размером 16x16 или 32x32 и с 8-битной или 24-битной глубиной цвета (в Mozilla Firefox, например, может быть не только этот, но и как у тега img).

При этом атрибут type должен содержать MIME-тип формата (например, image/png для PNG).

В 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в Internet Assigned Numbers Authority (IANA). Для этого формата стандартным MIME-типом стал image/vnd.microsoft.icon.

Если для Internet Explorer используется формат ICO, то его MIME-тип должен быть image/vnd.microsoft.icon. Тип image/x-icon устарел в 2003 году после стандартизации типа для ICO. Правильный тип image/vnd.microsoft.icon поддерживается всеми браузерами[источник не указан 68 дней]. Важно помнить, что иконка не будет показываться в браузере если её Content-type, возвращаемый веб-сервером не совпадёт с указанным в html-коде страницы.

Можно указать несколько изображений в разных форматах — например, строку с rel="shortcut icon" и значком в формате ICO для Internet Explorer, и строку с rel="icon" и значком в формате GIF или PNG для остальных браузеров.

Сконвертировать GIF/PNG/JPEG в ICO можно на этой странице.

Оставить комментарий

Оставлять комментарии могут только зарегистрированные пользователи.

Если вы не являетесь зарегистрированным пользователем, то вам необходимо зарегистрироваться. Регистрация бесплатна. Если вы уже зарегистрированы на CodeNet, то вам необходимо ввести логин и пароль в верхней (Alt-U) части страницы.

Комментарии