WikiSort.ru - Не сортированное

ПОИСК ПО САЙТУ | о проекте
Favicon Википедии

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

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

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

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

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

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

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

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

Браузер ICO PNG GIF Анимированный GIF JPEG APNG SVG
Google Chrome Да 4.0 4.0 Нет 4.0 Нет Нет
Internet Explorer 5.0[6] 11.0[7] 11.0[7] Нет[6] Нет[6] Нет[6] Нет[6]
Firefox 1.0[8] 1.0[8] 1.0[8] Да Да 3.0 Нет[9]
Opera 7.0[10] 7.0[10] 7.0[10] 7.0[10] 7.0[10] 9.5 9.6[источник не указан 2682 дня]
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 поддерживается всеми браузерами[источник не указан 2947 дней]. Важно помнить, что иконка не будет показываться в браузере, если её Content-type, возвращаемый веб-сервером, не совпадёт с указанным в html-коде страницы.

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

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

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

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

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

Примечания

  1. 1 2 3 How to Add a Shortcut Icon to a Web Page. Microsoft Developer Network. Microsoft. Проверено 15 марта 2010. Архивировано 8 февраля 2012 года.
  2. ↑ What Is a Favicon and Why Is It So Important for Branding?. Проверено 8 декабря 2018.
  3. ↑ 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 года.
  4. 1 2 Heng, Christopher What is Favicon.ico? Personalise Your Site's Bookmarks. thesitewizard.com (7 September 2008). Проверено 23 февраля 2011. Архивировано 8 февраля 2012 года.
  5. ↑ Creating favicons with Adobe Photoshop and GoLive. Adobe GoLive. Проверено 25 февраля 2011. Архивировано 7 декабря 2003 года.
  6. 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 года.
  7. 1 2 Fun with Favicons. Microsoft (7 September 2013). Проверено 3 ноября 2013.
  8. 1 2 3 David. Mozilla 0.9.6 Release Notes. Mozilla (19 July 2003). Проверено 23 февраля 2011. Архивировано 8 февраля 2012 года.
  9. ↑ 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.
  10. 1 2 3 4 5 Opera 7 for Windows Changelog. Opera Software (28 January 2003). Проверено 28 февраля 2011. Архивировано 8 февраля 2012 года.
  11. ↑ Mathias Bynens. Everything you always wanted to know about touch icons (2 March 2011). Проверено 15 ноября 2011.
  12. ↑ iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips. Apple Inc.. Проверено 27 мая 2010.
  13. 1 2 3 4 5 Safari Web Content Guide: Specifying a Webpage Icon for Web Clip. Apple Inc. (15 November 2010). Проверено 25 февраля 2011.
  14. 1 2 3 McLellan, Drew How To Set an Apple Touch Icon for Any Site. Allinthe head.com (17 January 2008). Проверено 11 марта 2011.
  15. ↑ iOS Human Interface Guidelines: Custom Icon and Image Creation Guidelines, Table 8-1. Apple Inc.. Проверено 16 июля 2011.
  16. ↑ Apple-touch-icon. Apple Inc.. Проверено 25 февраля 2011.
  17. ↑ iPad Apple Touch Icon. Проверено 12 февраля 2012.
  18. ↑ Android Chrome and its favicon. Проверено 9 сентября 2014.

Данная страница на сайте WikiSort.ru содержит текст со страницы сайта "Википедия".

Если Вы хотите её отредактировать, то можете сделать это на странице редактирования в Википедии.

Если сделанные Вами правки не будут кем-нибудь удалены, то через несколько дней они появятся на сайте WikiSort.ru .



Текст в блоке "Читать" взят с сайта "Википедия" и доступен по лицензии Creative Commons Attribution-ShareAlike; в отдельных случаях могут действовать дополнительные условия.

Другой контент может иметь иную лицензию. Перед использованием материалов сайта WikiSort.ru внимательно изучите правила лицензирования конкретных элементов наполнения сайта.

2019-2026
WikiSort.ru - проект по пересортировке и дополнению контента Википедии