Меню

Главная
Случайная статья
Настройки
Favicon
Материал из https://ru.wikipedia.org

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

Содержание

История

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

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

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

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

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

Данная таблица показывает поддержку форматов, в которых может быть выполнен значок сайта (favicon).
Браузер ICO PNG GIF Анимированный GIF JPEG APNG SVG
Google Chrome Да 4.0 4.0 Нет 4.0 Нет Нет
Internet Explorer 5.0 11.0 11.0 Нет Да Нет Нет
Firefox 1.0 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]. Рекомендуемый размер иконки 6060 пикселей для iPhone и 120120 пикселей для iPhone с Retina дисплеем[19][21][22]. Для iPad рекомендуется иконка размером 7676 пикселей, а для iPad с Retina дисплеем (начиная с iPad третьего поколения) — 152152 пикселя[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. 20 января 2009. Архивировано 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. [sitechecker.pro/what-is-favicon 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 года.
Downgrade Counter