Interested Article - Favicon

aoibhe
  • 2020-10-30
  • 1

Favicon Википедии

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

История

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

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

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

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

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

Данная таблица показывает поддержку форматов , в которых может быть выполнен значок сайта (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 1.0 Да Да 3.0 Да
Opera 7.0 7.0 7.0 7.0 7.0 9.5 Нет
Safari Да 4.0 4.0 Нет 4.0 Нет Нет

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

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

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

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

Многие современные браузеры не требуют явного указания на 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 поддерживают специальные большие иконки, которые могут использоваться в качестве значков веб-приложений . Сайт может предоставлять такую иконку, указав в заголовке <head> <link rel="apple-touch-icon" ...> . Рекомендуемый размер иконки 60×60 пикселей для iPhone и 120×120 пикселей для iPhone с Retina дисплеем . Для iPad рекомендуется иконка размером 76×76 пикселей, а для iPad с Retina дисплеем (начиная с iPad третьего поколения) — 152×152 пикселя . Для планшетов на Android с браузером Chrome предпочтительной является иконка формата PNG и размера 192x192 .

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

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

Примечания

  1. Lane, Dave . Egressive.com (9 августа 2008). Дата обращения: 25 февраля 2011. Архивировано из 25 декабря 2010 года.
  2. . BBC. 2009-01-20. из оригинала 30 декабря 2017 . Дата обращения: 25 февраля 2011 . That 16x16 pixel square is the size of the favicon in question, if not the scope. {{ cite news }} : Указан более чем один параметр |accessdate= and |access-date= ( справка )
  3. ↑ . Microsoft Developer Network . Microsoft. Дата обращения: 15 марта 2010. Архивировано из 8 февраля 2012 года.
  4. McGrew, Darin (26 апреля 2007). Дата обращения: 23 февраля 2011. Архивировано из 8 февраля 2012 года.
  5. ↑ Heng, Christopher . thesitewizard.com (7 сентября 2008). Дата обращения: 23 февраля 2011. Архивировано из 8 февраля 2012 года.
  6. . Adobe GoLive . Дата обращения: 25 февраля 2011. Архивировано из 7 декабря 2003 года.
  7. Дата обращения: 8 декабря 2018. 9 декабря 2018 года.
  8. ↑ Davis, Jeff jeff's WebLog at Microsoft Developer Network . Microsoft (1 марта 2007). Дата обращения: 27 февраля 2011. Архивировано из 8 февраля 2012 года.
  9. ↑ . Sielu (18 марта 2019). Дата обращения: 18 марта 2019. Архивировано из 29 сентября 2020 года.
  10. . Microsoft (7 сентября 2013). Дата обращения: 3 ноября 2013. 26 января 2016 года.
  11. ↑ David. . Mozilla (19 июля 2003). Дата обращения: 23 февраля 2011. Архивировано из 8 февраля 2012 года.
  12. ↑ . Opera Software (28 января 2003). Дата обращения: 28 февраля 2011. Архивировано из 8 февраля 2012 года.
  13. . Opera Software (16 июля 2009). Дата обращения: 27 февраля 2011. 27 июля 2017 года.
  14. ↑ Francis, Lewis . informationgift.com (11 декабря 2007). Дата обращения: 23 февраля 2011. 10 октября 2019 года.
  15. . Engadget. Дата обращения: 10 сентября 2012. 19 сентября 2018 года.
  16. . iDownloadBlog (14 июня 2018). Дата обращения: 14 октября 2020. 23 октября 2020 года.
  17. (2 марта 2011). Дата обращения: 15 ноября 2011. 2 декабря 2019 года.
  18. . Apple Inc.. Дата обращения: 27 мая 2010. 18 августа 2010 года.
  19. ↑ . Apple Inc. (15 ноября 2010). Дата обращения: 25 февраля 2011. 10 сентября 2016 года.
  20. ↑ McLellan, Drew . Allinthe head.com (17 января 2008). Дата обращения: 11 марта 2011. 4 апреля 2019 года.
  21. . Apple Inc.. Дата обращения: 16 июля 2011. 10 сентября 2016 года.
  22. . Apple Inc.. Дата обращения: 25 февраля 2011. 20 ноября 2018 года.
  23. . Дата обращения: 12 февраля 2012. 8 сентября 2010 года.
  24. . Дата обращения: 9 сентября 2014. 16 ноября 2018 года.
Источник —

aoibhe
  • 2020-10-30
  • 1
  • Tags:

Same as Favicon

The title for the last searches