Иконка в адресной строке
17 июня 1999 года
Хотите чтобы ваша собственная иконка нагло светилась в строке с 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:
<link 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 можно на этой странице.
Оставить комментарий
Комментарии
спасибо:) cool
таг <link rel="shortcut icon" href="pic/favicon.ico" type="image/x-icon" />
//Переименнованные GIF и BMP не везде работает.
надо подставить свойство type со значением image/mime_тип_файла в тэг <link/> и все заработает, но использовать можно лишь типы которые браузер может обработать - png, gif(даже анимированый), jpg, svg(не для всех) и соответственно ico, размером 16 на 16 - для лучшего отображения
[html]
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
[/html]
В данном случае микрософт оказались совершенно неграмотными, ведь они не знали, что с незапамятных времен по стандарту HTML, если в rel= указать "shortcut icon" -- то это уже два типа ("shortcut" и "icon") разделенные пробелом.
Подробнее об этом в Википедии, в параграфе "Standardization".
Я наприклад створюю її у Image Editor що йде з борландовським С++, але я певен що є і інші едітори.
<link rel="SHORTCUT ICON" href="/favicon.ico">
И всё будет показывать.
Все прописано так, как рекомендовано в статье и не смотря ни на что показывает первый вариант иконки!
Как это исправить?
Працює в мозілі FitreFox i Firebird. А MSIE в мене якийсь глючний, там взагалі ні на одному сайті ніодної іконки не показує! :)
Переименнованные GIF и BMP не везде работает.
Може тому, що я створив гіфку і переназвав її в ico?? Може воно хоче справжньої іконки?
Зайдите на сайт например оперой, или мозиллой.
они будут отображать иконку постоянно.
А ИЕ отображает иконку только тогда, когда сайт занесён в избранное.
<link rel="shortcut icon" href="/dances.ico" type="image/x-icon" />
Имхо лучше прописывать вот так.
PS: название не важно, просто ИЕ смотрит по умолчанию именно favicon.ico, но никто не мешает поставить туда и gif, к примеру
При этом не заработало. Когда увидел статью - обрадовался, думал в названии дело. Нифига. У меня MSIE 6.0
Жаль...