stringtranslate.com

Фавикон

Значок Википедии, показанный в Firefox

Фавикон ( / ˈ f æ v . ɪ ˌ k ɒ n / ; сокращение от favorite icon ), также известный как значок ярлыка , значок веб - сайта , значок вкладки , значок URL или значок закладки , представляет собой файл, содержащий один или несколько небольших значков [1], связанных с определенным веб-сайтом или веб-страницей . [1] [2] Веб -дизайнер может создать такой значок и загрузить его на веб-сайт (или веб-страницу) несколькими способами, а графические веб-браузеры затем будут его использовать. [3] Браузеры, которые поддерживают favicon, обычно отображают favicon страницы в адресной строке браузера (иногда также в истории) и рядом с именем страницы в списке закладок . [3] Браузеры, которые поддерживают интерфейс с вкладками документов , обычно отображают favicon страницы рядом с заголовком страницы на вкладке, а браузеры, ориентированные на сайты, используют favicon в качестве значка рабочего стола . [1]

История

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

Стандартизация

В 2003 году .icoформат был зарегистрирован третьей стороной в Internet Assigned Numbers Authority (IANA) под типом MIME image/vnd.microsoft.icon . [8] [9] Однако при использовании .icoформата для отображения в виде изображений (то есть не в виде значка сайта) Internet Explorer не может отображать файлы, обслуживаемые с помощью этого стандартизированного типа MIME. [9] Обходным путем для Internet Explorer является связывание .icoс нестандартным image/x-iconтипом MIME на веб-серверах. [10]

RFC 5988 установил реестр связей IANA [11] и rel="icon"был зарегистрирован в 2010 году на основе спецификации HTML5 . Популярный <link rel="shortcut icon" type="image/png" href="image/favicon.png">теоретически идентифицирует два отношения, shortcutи icon, но shortcutне зарегистрирован и является избыточным. В 2011 году стандарт HTML living [12] указал, что по историческим причинам shortcutдопускается непосредственно перед icon; [13] однако, shortcutне имеет значения в этом контексте.

Наследие

Internet Explorer 5–10 поддерживает только формат файла ICO . Netscape 7 и Internet Explorer версий 5 и 6 отображают значок только тогда, когда страница добавлена ​​в закладки, а не просто тогда, когда страницы посещаются, как в более поздних браузерах. [4]

Примеры значков

Реализация браузера

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

Поддержка форматов файлов изображений

В следующей таблице показана поддержка форматов файлов изображений для значка сайта.

Кроме того, такие файлы значков могут иметь размер 16×16, 32×32, 48×48 или 64×64 пикселей и глубину цвета 8 бит, 24 бит или 32 бит . [1] [3] В статье о формате файла ICO объясняются подробности для значков с более чем 256 цветами на различных платформах Microsoft Windows .

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

В этой таблице показаны различные области браузера, в которых могут отображаться значки сайтов.

Opera Software добавила возможность изменять значок на панели быстрого доступа в Opera 10. [ 30]

Как использовать

В этой таблице показаны различные способы распознавания фавикона веб-браузером. Стандартная реализация использует элемент ссылки с relатрибутом в <head>разделе документа для указания формата файла, имени и местоположения.

  1. ^ Safari, начиная с версии 12.0, в некоторых случаях поддерживает одноцветные значки SVG в нестандартном формате маски-значка.
  2. ^ Firefox принимает только favicon.icoв корне сайта без <link>тега, если настройка browser.chrome.site_iconsустановлена true​​в about:config. Значение по умолчанию — true. Если установлено значение false, эти значки игнорируются.
  3. ^ Opera загружается /favicon.icoтолько если Multimedia/Always load faviconпараметр в opera:configустановлен на 1. Подробнее см. на странице поддержки Opera.

Если присутствуют ссылки как на PNG, так и на ICO favicon, браузеры, совместимые с PNG-favicon, выбирают, какой формат и размер использовать, следующим образом. Firefox и Safari будут использовать favicon, который идет последним. Chrome для Mac будет использовать любой favicon в формате ICO, в противном случае favicon 32×32. Chrome для Windows будет использовать favicon, который идет первым, если он 16×16, в противном случае ICO. Если ни один из вышеупомянутых вариантов недоступен, Chrome будет использовать любой favicon, который идет первым, в точности противоположно Firefox и Safari. Действительно, Chrome для Mac будет игнорировать favicon 16×16 и использовать версию 32×32, только чтобы уменьшить ее до 16×16 на устройствах без Retina. Opera выберет любой из доступных значков случайным образом. [33]

Только SeaMonkey по умолчанию не извлекает favicon.icoфайлы из корня веб-сайта. [34]

Рекомендация HTML5 для иконок разных размеров

Текущая спецификация HTML5 рекомендует указывать несколько размеров для иконок, используя атрибуты внутри тега. [35] Несколько форматов иконок, включая форматы контейнеров, такие как файлы Microsoft .ico и Macintosh .icns , а также масштабируемую векторную графику , могут быть предоставлены путем включения типа содержимого иконки в формат внутри тега.rel="icon" sizes="space-separated list of icon dimensions"<link>type="file content-type"<link>

Начиная с iOS 5 , мобильные устройства Apple игнорируют рекомендации HTML5 и вместо этого используют фирменный apple-touch-iconметод, подробно описанный ниже. Однако веб-браузер Google Chrome выберет наиболее подходящий размер из предоставленных в заголовках HTML для создания значков приложений размером 128×128 пикселей , когда пользователь выбирает Создать ярлыки приложений... в меню «Инструменты».

Значки главного экрана на мобильных устройствах

На iPhone и iPad от Apple , а также на мобильных устройствах Android пользователи могут закреплять веб-страницы в качестве значков ярлыков на главном экране . Эти значки ярлыков выглядят как обычные приложения, и веб-разработчики могут предоставлять для них специальные значки.

Устройства Apple

Для устройств Apple с операционной системой iOS версии 1.1.3 или более поздней пользователи могут закрепить веб-сайт на главном экране с помощью кнопки «Добавить на главный экран» на панели общего доступа в Safari. [36] [37]

Это работает для любого веб-сайта. Но для того, чтобы iOS отображала ярлык со значком, веб-сайт должен предоставить <link rel="apple-touch-icon" ...>в <head>разделе документов, обслуживаемых веб-сайтом. Если пользовательский значок не предоставлен, вместо него на главном экране будет размещена миниатюра веб-страницы. [38]

Размеры иконок приложений на разных классах устройств различаются. Рекомендуемые размеры иконок — 152×152 для iPad (до iPad 2 , выпущенного в 2011 году), 167×167 для iPad с экранами Retina ( iPad 3 и более поздние версии) и 180×180 для iPhone. Если иконка соответствующего размера не указана, iOS выберет самую большую иконку rel="apple-touch-icon"и автоматически ее масштабирует. [39]

Пример кода [40]
<!-- Для iPad -->  < ссылка  rel = "apple-touch-icon"  type = "image/png"  sizes = "167x167"  href = "favicon-167x167.png" >
<!-- Для iPhone -->  < ссылка  rel = "apple-touch-icon"  type = "image/png"  sizes = "180x180"  href = "favicon-180x180.png" >

Файл значка, на который ссылается, apple-touch-iconизменен для добавления скругленных углов. В версиях iOS до iOS 7 будут добавлены тень и отражающий блеск, а apple-touch-icon-precomposedзначок может быть предоставлен для указания устройствам не применять отражающий блеск к изображению. [37] [38]

Для получения этих иконок браузерам или мобильным устройствам не требуется HTML. [38] Корневая папка веб-сайта является местоположением файла по умолчанию apple-touch-icon.png(в порядке приоритета). [37] [38]

Android-устройства

На устройствах Android пользователи могут использовать функцию «Добавить на главный экран» в меню инструментов Chrome , чтобы закрепить веб-страницу на главном экране.

Это также работает для любого веб-сайта, но если фавикон не предоставлен, используется общий значок. Поскольку значки приложений Android имеют размер 48x48 точек, веб-сайты должны предоставлять фавиконки размером, кратным 48x48 пикселей. Для современных устройств с высоким разрешением Google рекомендует предоставлять значки размером 192x192 пикселей. [41]

Пример кода [40]
<!-- Для Android -->  < ссылка  rel = "значок"  тип = "изображение/png"  размеры = "48x48"  href = "favicon-48x48.png" >  < ссылка  rel = "значок"  тип = "изображение/png"  размеры = "192x192"  href = "favicon-192x192.png" >

Android также поддерживает файлы Web Manifest, что позволяет глубже интегрировать веб-сайты в систему. Web Manifest — это файл JSON, который определяет метаданные для прогрессивного веб-приложения. Он позволяет разработчику не только предоставлять значки, но и краткое имя для отображения на главном экране, а также цвета темы. [42] Однако предоставление файла Web Manifest не является обязательным для работы функции «Добавить на главный экран» . [40]

Анимированные фавиконы

Различные браузеры, такие как Firefox и Opera, поддерживают анимацию значков. Отчет об ошибке для Firefox был открыт с 2001 года, в котором запрашивался способ отключения этой функции. [43] [44]

Ограничения и критика

Из-за необходимости всегда проверять наличие значка в фиксированном месте, он может привести к искусственному замедлению времени загрузки страницы и появлению ненужных записей 404 в журнале сервера, если он отсутствует. [6]

W3C не стандартизировал атрибут rel, поэтому существуют и другие ключевые слова, такие как значок ярлыка , которые также принимаются пользовательским агентом . [45] [20]

Favicon часто манипулируют как часть фишинговых или подслушивающих атак на HTTPS веб-страницы. Многие веб-браузеры отображают favicon рядом с областями пользовательского интерфейса веб-браузера, такими как адресная строка, которые используются для сообщения о том, использует ли соединение с веб-сайтом защищенный протокол, такой как TLS . Изменив favicon на знакомое изображение замка, злоумышленник может попытаться обмануть пользователя, заставив его думать, что он надежно подключен к нужному веб-сайту. Автоматизированные инструменты атак типа «человек посередине», такие как sslstrip , используют этот трюк. [46] Чтобы устранить это, некоторые веб-браузеры, такие как Firefox или Google Chrome, отображают favicon внутри вкладки, одновременно отображая статус безопасности протокола, используемого для доступа к веб-сайту, рядом с URL-адресом. [47]

Поскольку фавиконы обычно располагаются в корне каталога сайта на сервере, их можно использовать с некоторой надежностью для раскрытия того, вошел ли веб-клиент в данную службу. Это работает с использованием функции перенаправления после входа многих веб-сайтов, путем запроса фавикона в URL перенаправления после входа и тестирования ответа сервера, чтобы определить, предоставлен ли пользователю запрошенный ресурс (что означает, что он вошел в систему), или вместо этого он перенаправлен на страницу входа (что означает, что он не вошел в систему). [48]

В 2021 году исследователи из Иллинойсского университета продемонстрировали метод отслеживания браузера с помощью значков. [49]

Ссылки

  1. ^ abcd Лейн, Дэйв (9 августа 2008 г.). «Создание значка Favicon с несколькими разрешениями, включая прозрачность, с помощью GIMP». Egressive.com . Архивировано из оригинала 25 декабря 2010 г. Получено 25 февраля 2011 г.
  2. ^ «Что с новой мини-иконкой Google?». BBC. 20 января 2009 г. Получено 25 февраля 2011 г. Этот квадрат размером 16x16 пикселей — размер рассматриваемой иконки, если не область действия.
  3. ^ abc Apple, Дженнифер. "Favicon — How To Create A Favicon.ico". Photoshopsupport.com . Получено 25 февраля 2011 г.
  4. ^ abcdefghijkl "Как добавить значок ярлыка на веб-страницу". Microsoft Developer Network . Microsoft. Архивировано из оригинала 5 января 2018 г. Получено 15 марта 2010 г.
  5. ^ МакГрю, Дэрин (26 апреля 2007 г.). «Часто задаваемые вопросы по веб-разработке – 8.11. Как мне получить пользовательский значок, когда люди добавляют мой сайт в закладки?». htmlhelp.com . Получено 23 февраля 2011 г.
  6. ^ abc Heng, Christopher (7 сентября 2008 г.). «Что такое Favicon.ico? Персонализируйте закладки своего сайта». thesitewizard.com . Получено 23 февраля 2011 г. .
  7. ^ "Создание значков с помощью Adobe Photoshop и GoLive". Adobe GoLive . Архивировано из оригинала 7 декабря 2003 года . Получено 25 февраля 2011 года .{{cite web}}: CS1 maint: неподходящий URL ( ссылка )
  8. ^ Бутчер, Саймон (3 сентября 2003 г.). "Опубликованная спецификация". Internet Assigned Numbers Authority . Получено 25 февраля 2011 г.
  9. ^ ab "Список незначительных изменений IE9 RC". IEInternals . Получено 7 апреля 2016 г.
  10. ^ Айриш, Пол (15 декабря 2010 г.). "commit 37b5fec090d00f38de64 to paulirish's html5-boilerplate". GitHub . Получено 25 февраля 2011 г.
  11. ^ "Отношения ссылок". IANA .
  12. ^ Ян Хиксон (19 января 2011 г.). "HTML — это новый HTML5". Блог WHATWG . WHATWG .
  13. ^ "Атрибут HTML: rel - #icon".
  14. ^ abc David (19 июля 2003 г.). "Mozilla 0.9.6 Release Notes". Mozilla . Получено 23 февраля 2011 г. .
  15. ^ ab "Ошибка 111373: не разрешать анимированные значки сайтов (favicons)" . Получено 1 июня 2014 г. .
  16. ^ Дэниел Холберт (12 июня 2015 г.). «Ошибка 366324 – Поддержка иконок сайтов SVG (фавиконы, иконки сочетаний клавиш) – комментарий 55». Bugzilla@Mozilla . Mozilla . Получено 12 июня 2015 г. .
  17. ^ трекер, chromium. "никакого движения в favicon". chromium.org . Получено 11 апреля 2016 г. .
  18. ^ трекер, chromium. "Анимированные значки Favicons не поддерживаются". chromium.org . Получено 8 ноября 2018 г. .
  19. ^ "Поддержка SVG в значках - Статус платформы Chrome". 19 ноября 2019 г. Получено 16 января 2020 г.
  20. ^ abcdef Дэвис, Джефф (27 декабря 2007 г.). "почему значок моего сайта не отображается в IE7?". jeffdav в коде . Microsoft . Получено 11 марта 2013 г.
  21. ^ abcdef Эрик Лоуренс (7 сентября 2013 г.). «Fun with Favicons». Microsoft. Архивировано из оригинала 23 мая 2021 г. . Получено 25 июня 2022 г. .
  22. ^ "Поддержка фавиконки SVG". Microsoft Connect. 3 мая 2013 г. Получено 4 сентября 2014 г.
  23. ^ abcde "Opera 7 for Windows Changelog". Opera Software. 28 января 2003 г. Получено 28 февраля 2011 г.
  24. ^ "Что нового в Opera". Opera Software . Получено 24 июня 2017 г.
  25. ^ «Safari Technology Preview 58 с функциями Safari 12 уже доступна». WebKit. 6 июня 2018 г. Получено 3 марта 2019 г.
  26. ^ "Favicons. Finally". Iconfactory. 7 июня 2018 г. Получено 3 марта 2019 г.
  27. ^ abcdefghijklmnopqrstu vwxyz aa Фрэнсис, Льюис (11 декабря 2007 г.). "Диаграмма поддержки favicon современными браузерами". informationgift.com . Получено 23 февраля 2011 г. .
  28. ^ "Firefox считает фавиконы опасными и удаляет их из адресной строки". Engadget . Получено 10 сентября 2012 г.
  29. ^ «Как включить значки в Safari, чтобы можно было графически идентифицировать веб-сайты на вкладках». iDownloadBlog. 14 июня 2018 г. Получено 14 октября 2020 г.
  30. ^ "Opera 10.0 beta 2 для Windows changelog". Opera Software. 16 июля 2009 г. Получено 27 февраля 2011 г.
  31. ^ "Список незначительных изменений IE9 RC". Microsoft. 11 февраля 2011 г. Получено 16 ноября 2013 г.
  32. ^ "Создание закрепленных значков вкладок". Apple Inc. 12 декабря 2016 г. Получено 9 апреля 2019 г.
  33. ^ Jonathan T. Neal (16 января 2013 г.). «Understand the Favicon». Архивировано из оригинала 23 мая 2013 г. Получено 30 мая 2013 г.
  34. ↑ Mathias Bynens (14 апреля 2010 г.). "rel="shortcut icon" consider dangerous" . Получено 15 ноября 2011 г.
  35. ^ "HTML Living Standard, Раздел 4.6.6.6 'Тип ссылки "значок"'". WHATWG . Получено 17 ноября 2015 г. .
  36. ^ "Руководство по интерфейсу iPhone Human для веб-приложений: метрики, рекомендации по компоновке и советы". Apple Inc. Архивировано из оригинала 4 июня 2010 г. Получено 27 мая 2010 г.
  37. ^ abc "Safari Web Content Guide: Specifying a Webpage Icon for Web Clip". Apple Inc. 15 ноября 2010 г. Архивировано из оригинала 20 мая 2023 г. Получено 2 июня 2023 г.
  38. ^ abcd Маклеллан, Дрю (17 января 2008 г.). «Как установить значок Apple Touch для любого сайта». Allinthe head.com . Получено 11 марта 2011 г.
  39. ^ "Настройка веб-приложений". developer.apple.com . Получено 3 июля 2021 г. .
  40. ^ abc "Как добавить фавикон на ваш сайт – Руководство по современному браузеру". Блог Loqbooq . Архивировано из оригинала 11 июля 2021 г. Получено 3 июля 2021 г.
  41. ^ "Material Design". Material Design . Получено 3 июля 2021 г. .
  42. ^ "Добавить на главный экран - Прогрессивные веб-приложения (PWA) | MDN". developer.mozilla.org . Получено 3 июля 2021 г. .
  43. ^ "Ошибка 111373 — не разрешать анимированные значки сайтов (favicons)". bugzilla.mozilla.org. 21 ноября 2001 г.
  44. ^ "Ошибка Firefox 111373 — не разрешать анимированные значки сайтов (mozilla.org)". Hacker News. 7 июля 2015 г.
  45. ^ Дубост, Карл (24 октября 2005 г.). «Как добавить фавикон на свой сайт». World Wide Web Consortium . Получено 25 февраля 2011 г.
  46. ^ Marlinspike, Moxie (21 февраля 2011 г.). "Побеждаем Ssl с помощью Sslstrip (Marlinspike Blackhat)". (см. описание видео) . SecurityTube. Архивировано из оригинала 13 июля 2011 г. Получено 9 июля 2011 г.
  47. ^ "Возможности Firefox версии 14". 18 июля 2012 г. Получено 18 июля 2012 г.
  48. ^ Линус, Робин. «Ваш отпечаток в социальных сетях» . Получено 14 октября 2016 г.
  49. ^ Гудин, Дэн (19 февраля 2021 г.). «Новый хак отслеживания браузера работает даже при очистке кэшей или переходе в режим инкогнито». Ars Technica . Получено 21 февраля 2021 г.

Внешние ссылки