stringtranslate.com

Фавикон

Значок Википедии, отображаемый в Firefox

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

История

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

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

В 2003 году .icoформат был зарегистрирован третьей стороной в Управлении по присвоению номеров в Интернете (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 [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]

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

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

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

Если присутствуют ссылки как для значков PNG, так и для значков ICO, браузеры, совместимые с значками PNG, выбирают, какой формат и размер использовать, следующим образом. Firefox и Safari будут использовать значок, который находится последним. Chrome для Mac будет использовать любой значок в формате ICO, в противном случае — значок 32×32. Chrome для Windows будет использовать первый значок, если он имеет размер 16×16, в противном случае — ICO. Если ни один из вышеупомянутых вариантов недоступен, Chrome будет использовать тот значок, который появится первым, в отличие от Firefox и Safari. Действительно, Chrome для Mac будет игнорировать значок 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 пикселей , когда пользователь выбирает « Создать ярлыки приложений...» в меню «Инструменты».

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

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

устройства Apple

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

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

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

Пример кода [40]
<!-- Для iPad -->  < link  rel = "apple-touch-icon"  type = "image/png"  size = "167x167"  href = "favicon-167x167.png" >
<!-- Для iPhone -->  < link  rel = "apple-touch-icon"  type = "image/png"  size = "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 рекомендует предоставлять значки размером 192х192 пикселей. [41]

Пример кода [40]
<!-- Для Android -->  < link  rel = "icon"  type = "image/png"  size = "48x48"  href = "favicon-48x48.png" >  < link  rel = "icon"  type = "image/ png"  размеры = "192x192"  href = "favicon-192x192.png" >

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

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

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

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

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

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

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

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

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

Рекомендации

  1. ^ abcd Lane, Дэйв (9 августа 2008 г.). «Создание значка с несколькими разрешениями, включая прозрачность, с помощью GIMP». Egressive.com . Архивировано из оригинала 25 декабря 2010 года . Проверено 25 февраля 2011 г.
  2. ^ «Что с новым мини-значком Google?» Би-би-си. 20 января 2009 года . Проверено 25 февраля 2011 г. Этот квадрат размером 16x16 пикселей соответствует размеру рассматриваемого значка, если не его области действия.
  3. ^ abc Apple, Дженнифер. «Favicon — Как создать Favicon.ico». Photoshopsupport.com . Проверено 25 февраля 2011 г.
  4. ^ abcdefghijkl «Как добавить значок ярлыка на веб-страницу». Сеть разработчиков Microsoft . Майкрософт. Архивировано из оригинала 5 января 2018 года . Проверено 15 марта 2010 г.
  5. ↑ МакГрю, Дарин (26 апреля 2007 г.). «Часто задаваемые вопросы по веб-разработке - 8.11. Как мне установить собственный значок, когда люди добавляют мой сайт в закладки?». htmlhelp.com . Проверено 23 февраля 2011 г.
  6. ^ abc Хенг, Кристофер (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 г.). «Опубликованная спецификация». Управление по присвоению номеров в Интернете . Проверено 25 февраля 2011 г.
  9. ^ ab «Список незначительных изменений IE9 RC». IEInternals . Проверено 7 апреля 2016 г.
  10. ↑ Ирландец, Пол (15 декабря 2010 г.). «Зафиксируйте 37b5fec090d00f38de64 в шаблоне html5 Paulirish». Гитхаб . Проверено 25 февраля 2011 г.
  11. ^ «Отношения ссылок». ИАНА .
  12. ^ Ян Хиксон (19 января 2011 г.). «HTML — это новый HTML5». Блог WHATWG . ЧТОРГ .
  13. ^ "HTML5-версия r6404" . HTML5-трекер .
  14. ^ abc Дэвид (19 июля 2003 г.). «Примечания к выпуску Mozilla 0.9.6». Мозилла . Проверено 23 февраля 2011 г.
  15. ^ ab «Ошибка 111373: запрещены анимированные значки сайтов (значки значков)» . Проверено 1 июня 2014 г.
  16. ↑ Дэниел Холберт (12 июня 2015 г.). «Ошибка 366324 — поддержка значков сайтов SVG (значки значков, ярлыков) — комментарий 55». Багзилла@Mozilla . Мозилла . Проверено 12 июня 2015 г.
  17. ^ трекер, хром. «Нет движения в фавиконе». хромиум.орг . Проверено 11 апреля 2016 г.
  18. ^ трекер, хром. «Анимированные значки не поддерживаются». хромиум.орг . Проверено 8 ноября 2018 г.
  19. ^ «Поддержка SVG в значках — статус платформы Chrome» . 19 ноября 2019 года . Проверено 16 января 2020 г. .
  20. ^ abcdef Дэвис, Джефф (27 декабря 2007 г.). «почему значок моего сайта не отображается в IE7?». Джеффдав о коде . Майкрософт . Проверено 11 марта 2013 г.
  21. ^ abcdef Эрик Лоуренс (7 сентября 2013 г.). «Весело с Фавиконками». Майкрософт. Архивировано из оригинала 23 мая 2021 года . Проверено 25 июня 2022 г.
  22. ^ «Поддержка значков SVG» . Майкрософт Коннект. 3 мая 2013 года . Проверено 4 сентября 2014 г.
  23. ^ abcde «Журнал изменений Opera 7 для Windows». Программное обеспечение Опера. 28 января 2003 года . Проверено 28 февраля 2011 г.
  24. ^ «Что нового в Opera» . Программное обеспечение Опера . Проверено 24 июня 2017 г.
  25. ^ «Теперь доступна предварительная версия Safari Technology 58 с функциями Safari 12» . ВебКит. 6 июня 2018 года . Проверено 3 марта 2019 г.
  26. ^ "Фавиконки. Наконец-то" . Иконная фабрика. 7 июня 2018 года . Проверено 3 марта 2019 г.
  27. ^ abcdefghijklmnopqrstu vwxyz а.а. Фрэнсис, Льюис (11 декабря 2007 г.). «Диаграмма поддержки значков современными браузерами». infogift.com . Проверено 23 февраля 2011 г.
  28. ^ «Firefox считает значки рискованными и удаляет их из адресной строки» . Engadget . Проверено 10 сентября 2012 г.
  29. ^ «Как включить значки значков в Safari, чтобы вы могли графически идентифицировать веб-сайты на вкладках» . iDownloadBlog. 14 июня 2018 года . Проверено 14 октября 2020 г. .
  30. ^ «Журнал изменений Opera 10.0 beta 2 для Windows» . Программное обеспечение Опера. 16 июля 2009 года . Проверено 27 февраля 2011 г.
  31. ^ «Список незначительных изменений IE9 RC» . Майкрософт. 11 февраля 2011 года . Проверено 16 ноября 2013 г.
  32. ^ «Создание значков закрепленных вкладок» . Apple Inc., 12 декабря 2016 г. Проверено 9 апреля 2019 г.
  33. ↑ Джонатан Т. Нил (16 января 2013 г.). «Понять фавикон». Архивировано из оригинала 23 мая 2013 года . Проверено 30 мая 2013 г.
  34. ↑ Матиас Биненс (14 апреля 2010 г.). "rel="значок ярлыка" считается вредным" . Проверено 15 ноября 2011 г.
  35. ^ «Уровень жизни HTML, раздел 4.6.6.6 'Тип ссылки «значок»'». ЧТОРГ . Проверено 17 ноября 2015 г.
  36. ^ «Рекомендации по пользовательскому интерфейсу iPhone для веб-приложений: метрики, рекомендации по макету и советы» . Apple Inc. Архивировано из оригинала 4 июня 2010 года . Проверено 27 мая 2010 г.
  37. ^ abc «Руководство по веб-контенту Safari: указание значка веб-страницы для веб-клипа» . Apple Inc., 15 ноября 2010 г. Архивировано из оригинала 20 мая 2023 г. . Проверено 2 июня 2023 г.
  38. ^ abcd Маклеллан, Дрю (17 января 2008 г.). «Как установить значок Apple Touch для любого сайта». Allinthe head.com . Проверено 11 марта 2011 г.
  39. ^ «Настройка веб-приложений». разработчик.apple.com . Проверено 3 июля 2021 г.
  40. ^ abc «Как добавить значок на свой веб-сайт - Руководство по современному браузеру» . Блог Loqbooq . Архивировано из оригинала 11 июля 2021 года . Проверено 3 июля 2021 г.
  41. ^ «Материальный дизайн». Материальный дизайн . Проверено 3 июля 2021 г.
  42. ^ «Добавить на главный экран — прогрессивные веб-приложения (PWA) | MDN» . http://developer.mozilla.org . Проверено 3 июля 2021 г.
  43. ^ «Ошибка 111373 — запретить анимированные значки сайтов (значки значков)» . bugzilla.mozilla.org. 21 ноября 2001 г.
  44. ^ «Ошибка Firefox 111373 — запретить анимированные значки сайтов (mozilla.org)» . Хакерские новости. 7 июля 2015 г.
  45. ↑ Дубост, Карл (24 октября 2005 г.). «Как добавить фавиконку на свой сайт». Консорциум Всемирной паутины . Проверено 25 февраля 2011 г.
  46. ^ Марлинспайк, Мокси (21 февраля 2011 г.). «Победа над SSL с помощью Sslstrip (Marlinspike Blackhat)». (см. описание видео) . SecurityTube. Архивировано из оригинала 13 июля 2011 года . Проверено 9 июля 2011 г.
  47. ^ «Функции Firefox версии 14» . 18 июля 2012 года . Проверено 18 июля 2012 г.
  48. ^ Линус, Робин. «Ваш отпечаток пальца в социальных сетях» . Проверено 14 октября 2016 г.
  49. ↑ Гудин, Дэн (19 февраля 2021 г.). «Новый хак для отслеживания браузера работает, даже если вы очищаете кеши или переходите в режим инкогнито». Арс Техника . Проверено 21 февраля 2021 г.

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