Favicon

Favicon Википедии

Favicon (сокр. от англ. Favorite icon — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, и в качестве картинки рядом с закладкой[1][2], а также в адресной строке в некоторых браузерах.

История

В марте 1999 года Microsoft выпустила браузер Internet Explorer 5, который первым стал поддерживать значки для сайта[3]. Изначально этим значком был файл с именем favicon.ico с картинкой 16×16 пикселей формата ICO, помещённый в корневой каталог веб-сайта. Значок используется браузером Internet Explorer в списке избранного и рядом с URL в адресной строке, если страница находится в закладках[4][5][6][3]. Побочным эффектом было то, что количество посетителей, которые добавили страницу в закладки, можно было оценить по количеству обращений к файлу значка. Эта техника устарела, так как все современные браузеры поддерживают значок без закладок[5].

Намного позже появились в формате 32×32, но старые браузеры все ещё уменьшают его до 16×16[7].

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

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

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

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

Браузер ICO PNG GIF Анимированный GIF JPEG APNG SVG
Google Chrome Да 4.0 4.0 Нет 4.0 Нет Нет
Internet Explorer 5.0[8] 11.0[9] 11.0[10] Нет[8] Да[9] Нет[8] Нет[8]
Firefox 1.0[11] 1.0[11] 1.0[11] Да Да 3.0 Да[9]
Opera 7.0[12] 7.0[12] 7.0[12] 7.0[12] 7.0[12] 9.5 Нет[9]
Safari Да 4.0 4.0 Нет 4.0 Нет Нет

Использование

Таблица соответствия, какой браузер где использует favicon. Браузер Opera, так же позволяет изменять favicon для Панели быстрого доступа, начиная с Opera 10[13].

Браузер Адресная строка Подсказка в адресной строке Панель закладок Закладки Вкладки Иконка рабочего стола
Edge Нет Да Да Да Да Да
Firefox 1.0–12.0: Да[14]
> v13: Нет[15] 		Да Да Да[14] Да[14] Да[14]
Google Chrome Нет[14] Нет Да[14] Да[14] 1.0[14] Нет[14]
Internet Explorer 7.0[14] Нет 5.0[14] 5.0[14] 7.0[14] 5.0[14]
Opera 7.0–12.17: Да
> v14: Нет[14] 		Нет 7.0[14] 7.0[14] 7.0[14] 7.0[14]
Safari Да[14] Да Нет[14] Да[14] 1.0–8.0: Да
9.0–11.0: Нет
> 12.0: Optional[16] 		Нет[14]

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

Многие современные браузеры не требуют явного указания на favicon.ico в коде страницы. В случае отсутствия такого указания браузер пытается загрузить favicon.ico из корня сайта. Однако имеется возможность явно указать положение значка в (X)HTML-коде (внутри элемента <head>), что позволяет при условии отсутствия /favicon.ico использовать для каждой страницы свой значок.

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

<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico" />

где

  • 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. Важно помнить, что иконка не будет показываться в браузере, если её Content-type, возвращаемый веб-сервером, не совпадёт с указанным в html-коде страницы.

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

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

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

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

С закруглёнными краями, добавляемыми 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.[19][20]

Примечания

  1. ↑ Lane, Dave Creating a Multi-Resolution Favicon Including Transparency with the GIMP. Egressive.com (9 августа 2008). Дата обращения: 25 февраля 2011. Архивировано из оригинала 25 декабря 2010 года.
  2. ↑ "What's With Google's New Mini Icon?". BBC. 2009-01-20. Архивировано 30 декабря 2017. Дата обращения: 26 октября 2021. That 16x16 pixel square is the size of the favicon in question, if not the scope.
  3. ↑ 1 2 How to Add a Shortcut Icon to a Web Page. Microsoft Developer Network. Microsoft. Дата обращения: 15 марта 2010. Архивировано из оригинала 8 февраля 2012 года.
  4. ↑ McGrew, Darin Web Authoring FAQ - 8.11. How can I have a custom icon when people bookmark my site? Web Design Group (26 апреля 2007). Дата обращения: 23 февраля 2011. Архивировано из оригинала 8 февраля 2012 года.
  5. ↑ 1 2 Heng, Christopher What is Favicon.ico? Personalise Your Site's Bookmarks. thesitewizard.com (7 сентября 2008). Дата обращения: 23 февраля 2011. Архивировано из оригинала 8 февраля 2012 года.
  6. ↑ Creating favicons with Adobe Photoshop and GoLive. Adobe GoLive. Дата обращения: 25 февраля 2011. Архивировано из оригинала 7 декабря 2003 года.
  7. ↑ What Is a Favicon and Why Is It So Important for Branding? Дата обращения: 8 декабря 2018. Архивировано 9 декабря 2018 года.
  8. ↑ 1 2 3 4 Davis, Jeff why doesn't the favicon for my site appear in IE7? jeff's WebLog at Microsoft Developer Network. Microsoft (1 марта 2007). Дата обращения: 27 февраля 2011. Архивировано из оригинала 8 февраля 2012 года.
  9. ↑ 1 2 3 4 Что такое Favicon и как установить. Sielu (18 марта 2019). Дата обращения: 18 марта 2019. Архивировано из оригинала 29 сентября 2020 года.
  10. ↑ Fun with Favicons. Microsoft (7 сентября 2013). Дата обращения: 3 ноября 2013. Архивировано 26 января 2016 года.
  11. ↑ 1 2 3 David. Mozilla 0.9.6 Release Notes. Mozilla (19 июля 2003). Дата обращения: 23 февраля 2011. Архивировано из оригинала 8 февраля 2012 года.
  12. ↑ 1 2 3 4 5 Opera 7 for Windows Changelog. Opera Software (28 января 2003). Дата обращения: 28 февраля 2011. Архивировано из оригинала 8 февраля 2012 года.
  13. ↑ Opera 10.0 beta 2 for Windows changelog. Opera Software (16 июля 2009). Дата обращения: 27 февраля 2011. Архивировано 27 июля 2017 года.
  14. ↑ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Francis, Lewis Chart of modern browser support for favicon. informationgift.com (11 декабря 2007). Дата обращения: 23 февраля 2011. Архивировано 10 октября 2019 года.
  15. ↑ Firefox deems favicons risky, banishes them from address bar. Engadget. Дата обращения: 10 сентября 2012. Архивировано 19 сентября 2018 года.
  16. ↑ How to enable favicons in Safari so you can identify websites in tabs graphically. iDownloadBlog (14 июня 2018). Дата обращения: 14 октября 2020. Архивировано 23 октября 2020 года.
  17. ↑ Mathias Bynens. Everything you always wanted to know about touch icons (2 марта 2011). Дата обращения: 15 ноября 2011. Архивировано 2 декабря 2019 года.
  18. ↑ iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips. Apple Inc.. Дата обращения: 27 мая 2010. Архивировано 18 августа 2010 года.
  19. ↑ 1 2 3 4 5 Safari Web Content Guide: Specifying a Webpage Icon for Web Clip. Apple Inc. (15 ноября 2010). Дата обращения: 25 февраля 2011. Архивировано 10 сентября 2016 года.
  20. ↑ 1 2 3 McLellan, Drew How To Set an Apple Touch Icon for Any Site. Allinthe head.com (17 января 2008). Дата обращения: 11 марта 2011. Архивировано 4 апреля 2019 года.
  21. ↑ iOS Human Interface Guidelines: Custom Icon and Image Creation Guidelines, Table 8-1. Apple Inc.. Дата обращения: 16 июля 2011. Архивировано 10 сентября 2016 года.
  22. ↑ Apple-touch-icon. Apple Inc.. Дата обращения: 25 февраля 2011. Архивировано 20 ноября 2018 года.
  23. ↑ iPad Apple Touch Icon. Дата обращения: 12 февраля 2012. Архивировано 8 сентября 2010 года.
  24. ↑ Android Chrome and its favicon. Дата обращения: 9 сентября 2014. Архивировано 16 ноября 2018 года.