Favicon.ico или иконка в адресной строке браузера : webDev

Favicon.ico или иконка в адресной строке браузера

Опубликовано June 12, 2007
Категория Вебстандарты |

Favicon, что это и для чего он нужен? Favicon.ico это файл ярлыка в ОС Win32 который является иконкой-ссылкой на страничку сайта, на которой он присутствует. Его можно видеть в в избранных ссылках вашего браузера, адресной строке и на закладках в многооконных браузерах. Как его прикрутить к страничке? Для того чтобы нарисовать иконку вам необходимо воспользоваться любым графическим редактором, но после вам необходимо конвертировать ваш полученный графический файл в формат .ico либо же изначально рисовать его в специализированных редакторах типа AWIcons Pro, IconWorkshop, MicroAngelo и т.п. Простое переименование расширения файла в .ico плохая идея, т.к. некоторые браузеры не примут такой файл и не отобразят иконку. Если вам всеже привычнее работать в фотошопе, то вот здесь вы можете скачать плагин для работы с изображениями в формате .ico. Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats в корневой директории Photoshop.

Итак, у нас есть иконка, конвертированная правильным способом в формат .ico. Далее по пунктам.

  1. Название иконки должно быть favicon.ico, т.к. некоторые старые браузерв не смогут опознать ее именно как ярлык сайта.
  2. Подключение иконки к документу осуществляется следующим кодом 
    
< link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    . Обязательно необходимо указать тип содержимого как image/x-icon и связь с документом как shortcut icon. Кроме того, что это обязательно по спецификации w3c, есть вероятность того, что вы снова споткнетесь об особенности работы некоторых браузеров, не указав тип содержимого.

  3. Размер иконки вы можете выбрать от 16х16 до 48х48, чем больше иконка тем она будет симпатичнее, в случае, когда пользователь вздумает поместить ярлык на ваш сайт на свой рабочий стол, например. Но! Мы живем в реальности которая называется “Все мы любим Internet Explorer”. Поясняю, иконки размером превышающие 16х16 px попросту проигнорируются IE 6.0 и ниже. Однако существует возможность в один файл .ico упаковать несколько изображение, как разных по размеру, так и по содержимому, пользуйтесь этой возможностью.
  4. Где же разместить файл с иконкой сайта? Для надежности просто положите его в корневую директорию вашего сайта.

Грабли.

  1. Как указал выше, IE lt 6.0 не понимает иконок, превышающих 16х16 пикселей.
  2. IE 6.0 и ниже отобразит иконку только после добавления странички в избранное и перезагрузки. Ну любит MS перезагружать все и вся ;-).
  3. Если IE 6.0 и ниже и после этого не отобразит ее, то попробуйте почистить кэш браузера.
  4. Если и после этого иконка не появится там, где ей положено быть необходимо удостовериться, что ваш сервер передает иконку в браузер и отображает ее, а не передает, как файл и предлагает вам его сохранить. Это проверяется простым путем ввода в браузер адреса вашего сайта и имени иконки, например http://yoursite.com/favicon.ico, при условии конечно, что иконка лежит в корневой директории. Во втором случае ваш сервер не настроен на отображение файлов .ico. Для того чтобы исправить эту ситуацию вам необходимо создать в корне сайта файл .htaccess и добавить в него следующую строку AddType image/x-icon .ico .

Ссылки по теме:

  1. Как добавить собственную иконку сайта в адресную строку и в закладки браузера?
  2. Favicon - иконка в адресной строке.
  3. Ð?конка в адресной строке.
  4. favicon.ru - favicon.ico generator and editor.

Коментарии



12 коментариев к “Favicon.ico или иконка в адресной строке браузера”

  1. Atik on June 12th, 2007 6:48 pm

    гуд. простая..но полезная информация.
    не каждый все это знает!!!

  2. Zeus on November 23rd, 2007 6:15 pm

    я сам web-программер - спазибо за инфу… вот только вопрос по идее на HDD C: итд иконка должна фуричить а не фуричит( или все таки на серваке только?!

  3. Павел Ловцевич on November 23rd, 2007 10:31 pm

    AddType image/x-icon .ico именно эта строка сообщает браузеру о типе файла, соответственно без вебсервера, в котором это настраивается, браузер не способен опознать файл иконки. это мое имхо, за достоверность не ручаюсь.

  4. Zeus on November 24th, 2007 11:23 am

    спасибки Павел.

  5. admen on December 23rd, 2007 5:10 pm

    а ещё Php есть…наверное %))

  6. Павел Ловцевич on December 29th, 2007 3:38 pm

    admen не понял ва

  7. Дмитрий on January 15th, 2008 4:56 pm

    А как можно сделать так, чтобы не прописывать link в head’е. Очень много html-файлов прийдётся переписывать. С .htaccess также не получается. Строчку “AddType image/x-icon .ico” прописывал и туда и в главный файл конфигурации. Не хотит и всё. Подскажите, как быть?

  8. Павел Ловцевич on January 17th, 2008 5:05 pm

    Дмитрий, средствами хтмл никак, т.к. элемент body не может содержать дочерний элемент link.

    С .htaccess к сожалению я знаком плохо, потому ничего посоветовать не могу.

    Если у вас статический сайт. То для массовой замены я могу вам посоветовать редактор HTML Changer. К сожалению, он не работает с юникодом. Можно также в редакторе Notepad++ открыть все ва

  9. Дмитрий on January 17th, 2008 7:08 pm

    Павел, спасибо! Поре

  10. Павел Ловцевич on January 17th, 2008 7:35 pm

    Дмитрий, всегда пожалуйста! Читайте нас чаще! =)

  11. MIXA on June 4th, 2008 2:18 pm

    спасибо за статью

  12. vikTOR on June 6th, 2008 10:32 am

    а у меня стоит иконка уже

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