Favicon

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

Favicon Википедии

История

В марте 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. Браузер Опера, так же позволяет изменять 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. Правильный тип image/vnd.microsoft.icon поддерживается всеми браузерами. Важно помнить, что иконка не будет показываться в браузере, если её 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 August 2008). Дата обращения: 25 февраля 2011. Архивировано 25 декабря 2010 года.
  2. What's With Google's New Mini Icon?, BBC (20 January 2009). «That 16x16 pixel square is the size of the favicon in question, if not the scope.».
  3. 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 April 2007). Дата обращения: 23 февраля 2011. Архивировано 8 февраля 2012 года.
  5. Heng, Christopher What is Favicon.ico? Personalise Your Site's Bookmarks (недоступная ссылка). thesitewizard.com (7 September 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.
  8. 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 года.
  9. Что такое Favicon и как установить. Sielu (18 March 2019). Дата обращения: 18 марта 2019.
  10. Fun with Favicons. Microsoft (7 September 2013). Дата обращения: 3 ноября 2013.
  11. David. Mozilla 0.9.6 Release Notes (недоступная ссылка). Mozilla (19 July 2003). Дата обращения: 23 февраля 2011. Архивировано 8 февраля 2012 года.
  12. Opera 7 for Windows Changelog (недоступная ссылка). Opera Software (28 January 2003). Дата обращения: 28 февраля 2011. Архивировано 8 февраля 2012 года.
  13. Opera 10.0 beta 2 for Windows changelog. Opera Software (16 July 2009). Дата обращения: 27 февраля 2011.
  14. Francis, Lewis Chart of modern browser support for favicon. informationgift.com (11 December 2007). Дата обращения: 23 февраля 2011.
  15. Firefox deems favicons risky, banishes them from address bar. Engadget. Дата обращения: 10 сентября 2012.
  16. How to enable favicons in Safari so you can identify websites in tabs graphically. iDownloadBlog (14 июня 2018). Дата обращения: 14 октября 2020.
  17. Mathias Bynens. Everything you always wanted to know about touch icons (2 March 2011). Дата обращения: 15 ноября 2011.
  18. iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips. Apple Inc.. Дата обращения: 27 мая 2010.
  19. Safari Web Content Guide: Specifying a Webpage Icon for Web Clip. Apple Inc. (15 November 2010). Дата обращения: 25 февраля 2011.
  20. McLellan, Drew How To Set an Apple Touch Icon for Any Site. Allinthe head.com (17 January 2008). Дата обращения: 11 марта 2011.
  21. iOS Human Interface Guidelines: Custom Icon and Image Creation Guidelines, Table 8-1. Apple Inc.. Дата обращения: 16 июля 2011.
  22. Apple-touch-icon. Apple Inc.. Дата обращения: 25 февраля 2011.
  23. iPad Apple Touch Icon. Дата обращения: 12 февраля 2012.
  24. Android Chrome and its favicon. Дата обращения: 9 сентября 2014.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.