Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 11653
Последний выпуск: 19.06.2015

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

Автор: mike
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:

&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 можно на этой странице.

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

Комментарий:
можно использовать BB-коды
Максимальная длина комментария - 4000 символов.
 

Комментарии

1.
98K
26 сентября 2016 года
Віктор Ященко
0 / / 26.09.2016
Мне нравитсяМне не нравится
26 сентября 2016, 22:06:06
Я новичок, зарегистрировал на хостинге сайт на бесплатном адресе, затем наполнив сайт шаблоном и оптимизировал его для работы, возникла потребность в покупке доменного имени, что я и сделал на хостинге, добавил домен, перенос доменного имени был непонятен. Раньше было новый главный домен, а сейчас такой функции нет. И я воспользовался переносом, найдя инструкцию на сайте: http://www.programbeginner.ru/?p=1479#comment-8162 . Сайт полностью работает, но не отображается иконка сайта. В опере иконки нет совсем, в хроше отображается логотип хостинга, а в мозилле иконка отображается коректно. Что в опере, что в хроме иконка отображается только в админ-панели, а на страницах сайта её нет. Браузеры чистил, прошло примерно 6 месяцев, а значка иконки сайта нет! НА других ПК тоже пробовал! Вот сам сайт: http://fast-zarabotok.ru звените за спам!
2.
90K
16 мая 2013 года
Jannet Willner
0 / / 16.05.2013
Мне нравитсяМне не нравится
16 мая 2013, 01:31:02
сработало . использовала для создания иконки сайт http://cooltext.com/
спасибо:) cool
2.1.
90K
16 мая 2013 года
Jannet Willner
0 / / 16.05.2013
Мне нравитсяМне не нравится
16 мая 2013, 01:38:09
браузер ie.забыла добавить что размер текста поставила 15. далее перешла по линку указ в статье и получила файл favicon.ic.разумеется добавила его в папку с ост картинками pic. .далее
таг <link rel="shortcut icon" href="pic/favicon.ico" type="image/x-icon" />
3.
30K
22 июня 2007 года
baluck
0 / / 22.06.2007
Мне нравитсяМне не нравится
22 июня 2007, 14:17:00
//Иконка должна быть в формате *.ico
//Переименнованные GIF и BMP не везде работает.

надо подставить свойство type со значением image/mime_тип_файла в тэг <link/> и все заработает, но использовать можно лишь типы которые браузер может обработать - png, gif(даже анимированый), jpg, svg(не для всех) и соответственно ico, размером 16 на 16 - для лучшего отображения
4.
374
08 августа 2003 года
SLA
274 / / 08.08.2003
+1 / -0
Мне нравитсяМне не нравится
19 августа 2006, 17:49:24
Вообще-то, по стандарту W3C, это выглядит несколько иначе:
[html]
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
[/html]
В данном случае микрософт оказались совершенно неграмотными, ведь они не знали, что с незапамятных времен по стандарту HTML, если в rel= указать "shortcut icon" -- то это уже два типа ("shortcut" и "icon") разделенные пробелом.

Подробнее об этом в Википедии, в параграфе "Standardization".
5.
Аноним
Мне нравитсяМне не нравится
6 мая 2006, 11:36:34
Так воно дійсно хоче справжнісіньку віконку *.ісо.

Я наприклад створюю її у Image Editor що йде з борландовським С++, але я певен що є і інші едітори.
6.
Аноним
Мне нравитсяМне не нравится
18 апреля 2006, 00:04:06
В коде хтмл своей странички нужно добавить строку между HEAD и TITL:
<link rel="SHORTCUT ICON" href="/favicon.ico">
И всё будет показывать.
7.
Аноним
Мне нравитсяМне не нравится
20 марта 2006, 19:40:07
думаю поздновато с ответом, но скажу: очисти кэш.
8.
Аноним
Мне нравитсяМне не нравится
27 января 2006, 12:51:27
Проблема: Прицепил некий 'file.ico' и никак не могу его звменить на другое изображение, несмотря даже на удаление этого файла и пропись 'file2.ico'.
Все прописано так, как рекомендовано в статье и не смотря ни на что показывает первый вариант иконки!
Как это исправить?
9.
Аноним
Мне нравитсяМне не нравится
15 ноября 2005, 23:09:28
Попробывал, в Лисе видна, в Maxthon видна в IE не видна при чем в Maxthone стала видна после переименовании на favicon.ico
10.
Аноним
Мне нравитсяМне не нравится
15 сентября 2005, 17:24:33
Ребята, я хочу сделать сайт при помощи php, подскажите как это сделать?
11.
Аноним
Мне нравитсяМне не нравится
6 апреля 2005, 16:25:11
MSIE показывает только то что добавлено в избранное. И то, только по началу. Потом пропадает. Возможно в 7-ой версии они разберуться.
12.
Аноним
Мне нравитсяМне не нравится
6 апреля 2005, 16:11:14
Тільки що знайшов розвязок. Іконка має бути точно розміру 16х16 і 16 кольорів! І не інакше. (попередній раз в мене було 18х18 і 24 біт кольорів)!
Працює в мозілі FitreFox i Firebird. А MSIE в мене якийсь глючний, там взагалі ні на одному сайті ніодної іконки не показує! :)
13.
Аноним
Мне нравитсяМне не нравится
6 апреля 2005, 16:04:00
Иконка должна быть в формате *.ico
Переименнованные GIF и BMP не везде работает.
14.
Аноним
Мне нравитсяМне не нравится
6 апреля 2005, 15:53:00
Зробив так, як пише в статті. В MSIE взагалі немає іконки, а в мозілі є , як перший раз загрузилася сторінка, або як зробити refresh. А коли просто переключити на інший таб, чи закрити вікно, то іконка вже не перемальовується :-(

Може тому, що я створив гіфку і переназвав її в ico?? Може воно хоче справжньої іконки?
15.
Аноним
Мне нравитсяМне не нравится
21 января 2005, 06:24:45
Дело именно в ИЕ..
Зайдите на сайт например оперой, или мозиллой.
они будут отображать иконку постоянно.
А ИЕ отображает иконку только тогда, когда сайт занесён в избранное.

<link rel="shortcut icon" href="/dances.ico" type="image/x-icon" />
Имхо лучше прописывать вот так.

PS: название не важно, просто ИЕ смотрит по умолчанию именно favicon.ico, но никто не мешает поставить туда и gif, к примеру
16.
Аноним
+1 / -0
Мне нравитсяМне не нравится
23 ноября 2004, 16:08:34
А чего это вообще за файл такой? "favicon.ico"?
17.
Аноним
Мне нравитсяМне не нравится
9 ноября 2004, 21:16:15
Попробуйте постоянно прописывать <LINK REL="SHORTCUT ICON" href="/your/path/favicon.ico">
18.
Аноним
+0 / -2
Мне нравитсяМне не нравится
30 июля 2004, 06:29:46
У меня эта иконка видна тока на стартовой странице сайта и в "Ибранном", а на остальных страничках (.asp) не видать.
19.
Аноним
Мне нравитсяМне не нравится
30 июня 2004, 02:30:51
Когда я так хотел сделать, то просмотрел коды страниц в интернете и сделал по образцу и подобию. Правда назвал файл иконки не favicon.ico, а icon.ico
При этом не заработало. Когда увидел статью - обрадовался, думал в названии дело. Нифига. У меня MSIE 6.0
Жаль...
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог