Открыть главное меню
Favicon Википедии

Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico, — тогда Microsoft Internet Explorer использовал их для закладок. До версии 7.0 MSIE использовал значки только для закладок, и поэтому администраторы серверов могли узнать, сколько пользователей создало закладку на их сайт[1].

История развитияПравить

В марте 1999 года Microsoft выпустила браузер Internet Explorer 5, который первым стал поддерживать значки для сайта.[1] Изначально этим значком был файл с именем favicon.ico, помещённый в корневой каталог (например, http://en.wikipedia.org/favicon.ico) веб-сайта. Значок используется браузером Internet Explorer в списке избранного и рядом с URL в адресной строке, если страница находится в закладках.[2][3][4][1] Побочным эффектом было то, что количество посетителей, которые добавили страницу в закладки, можно было оценить по количеству обращений к файлу значка. Эта техника устарела, так как все современные браузеры поддерживают значок без закладок.[3]

Поддержка браузерамиПравить

Следующая таблица иллюстрирует основные веб-браузеры, поддерживающие различные функции. Номера указывают начальную версию браузера, с которой осуществляется поддержка указанной функции.

Поддерживаемые форматы иконки сайтаПравить

Данная таблица показывает поддержку форматов, в которых может быть выполнен значок сайта (favicon).

Браузер ICO PNG GIF Анимированный GIF JPEG APNG SVG
Google Chrome Да 4.0 4.0 Нет 4.0 Нет Нет
Internet Explorer 5.0[5] 11.0[6] 11.0[6] Нет[5] Нет[5] Нет[5] Нет[5]
Firefox 1.0[7] 1.0[7] 1.0[7] Да Да 3.0 Нет[8]
Opera 7.0[9] 7.0[9] 7.0[9] 7.0[9] 7.0[9] 9.5 9.6[источник не указан 2916 дней]
Safari Да 4.0 4.0 Нет 4.0 Нет Нет

Современные возможностиПравить

Многие современные браузеры не требуют явного указания на favicon.ico в коде страницы. В случае отсутствия такого указания браузер пытается загрузить favicon.ico из корня сайта. Однако имеется возможность явно указать положение значка в (X)HTML-коде (внутри элемента <head>), что позволяет при условии отсутствия /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 поддерживается всеми браузерами[источник не указан 3181 день]. Важно помнить, что иконка не будет показываться в браузере, если её Content-type, возвращаемый веб-сервером, не совпадёт с указанным в html-коде страницы.

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

Мобильный значок сайтаПравить

Устройства фирмы Apple начиная с iOS 1.1.3 и некоторые устройства на базе ОС Android[10] поддерживают специальные большие иконки, которые могут использоваться в качестве значков веб-приложений.[11][12] Сайт может предоставлять такую иконку, указав в заголовке <head> <link rel="apple-touch-icon" ...>[13] Рекомендуемый размер иконки 60×60 пикселей для iPhone и 120×120 пикселей для iPhone с Retina дисплеем.[12][14][15] Для iPad рекомендуется иконка размером 76×76 пикселей, а для iPad с Retina дисплеем (начиная с iPad третьего поколения) 152×152 пикселя.[16] Для планшетов на Android с браузером Chrome предпочтительной является иконка формата PNG и размера 192x192.[17]

На изображение упомянутое как apple-touch-icon накладывается тень, отражение, а также изображение получает скруглённые края.[12] А на изображение apple-touch-icon-precomposed не накладывается никаких эффектов.[12][13]

С закруглёнными краями, добавляемыми iOS
<link rel="apple-touch-icon" href="somepath/image.png" />
Без отражений
<link rel="apple-touch-icon-precomposed" href="somepath/image.png" />

Корневой каталог сайта является локацией по-умолчанию для поиска иконок apple-touch-icon-precomposed.png и apple-touch-icon.png.[12][13]

ПримечанияПравить

  1. 1 2 3 How to Add a Shortcut Icon to a Web Page. Microsoft Developer Network. Microsoft. Дата обращения 15 марта 2010. Архивировано 8 февраля 2012 года.
  2. McGrew, Darin Web Authoring FAQ - 8.11. How can I have a custom icon when people bookmark my site?. Web Design Group (26 April 2007). Дата обращения 23 февраля 2011. Архивировано 8 февраля 2012 года.
  3. 1 2 Heng, Christopher What is Favicon.ico? Personalise Your Site's Bookmarks. thesitewizard.com (7 September 2008). Дата обращения 23 февраля 2011. Архивировано 8 февраля 2012 года.
  4. Creating favicons with Adobe Photoshop and GoLive. Adobe GoLive. Дата обращения 25 февраля 2011. Архивировано 7 декабря 2003 года.
  5. 1 2 3 4 5 Davis, Jeff why doesn't the favicon for my site appear in IE7?. jeff's WebLog at Microsoft Developer Network. Microsoft (1 March 2007). Дата обращения 27 февраля 2011. Архивировано 8 февраля 2012 года.
  6. 1 2 Fun with Favicons. Microsoft (7 September 2013). Дата обращения 3 ноября 2013.
  7. 1 2 3 David. Mozilla 0.9.6 Release Notes. Mozilla (19 July 2003). Дата обращения 23 февраля 2011. Архивировано 8 февраля 2012 года.
  8. Works only on first load of the page.
    Daniel Holbert. Bug 366324 – SVG site icons (favicons, shortcut icons) support — comment 22. Bugzilla@Mozilla. Mozilla (14 April 2011). Дата обращения 23 февраля 2011.
  9. 1 2 3 4 5 Opera 7 for Windows Changelog. Opera Software (28 January 2003). Дата обращения 28 февраля 2011. Архивировано 8 февраля 2012 года.
  10. Mathias Bynens. Everything you always wanted to know about touch icons (2 March 2011). Дата обращения 15 ноября 2011.
  11. iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips. Apple Inc.. Дата обращения 27 мая 2010.
  12. 1 2 3 4 5 Safari Web Content Guide: Specifying a Webpage Icon for Web Clip. Apple Inc. (15 November 2010). Дата обращения 25 февраля 2011.
  13. 1 2 3 McLellan, Drew How To Set an Apple Touch Icon for Any Site. Allinthe head.com (17 January 2008). Дата обращения 11 марта 2011.
  14. iOS Human Interface Guidelines: Custom Icon and Image Creation Guidelines, Table 8-1. Apple Inc.. Дата обращения 16 июля 2011.
  15. Apple-touch-icon. Apple Inc.. Дата обращения 25 февраля 2011.
  16. iPad Apple Touch Icon. Дата обращения 12 февраля 2012.
  17. Android Chrome and its favicon. Дата обращения 9 сентября 2014.