Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску

Favicon ( / е æ v . Ɪ ˌ к ɒ п / ; коротка для любимой иконы ), также известные как ярлык , значок веба - сайта , вкладка значок , значок URL , или значок закладки , представляет собой файл , содержащий один или более мелкие значки , [1] связанные с конкретным веб-сайтом или веб-страницей . [1] [2] веб - дизайнерможет создать такой значок и загрузить его на веб-сайт (или веб-страницу) несколькими способами, а затем графические веб-браузеры будут использовать его. [3] Браузеры, которые предоставляют поддержку значков, обычно отображают значок страницы в адресной строке браузера (иногда также в истории) и рядом с именем страницы в списке закладок . [3] Браузеры, поддерживающие интерфейс документа с вкладками, обычно показывают значок страницы рядом с заголовком страницы на вкладке, а браузеры для конкретных сайтов используют этот значок в качестве значка на рабочем столе . [1]

Значок Википедии, отображаемый в более старой версии Firefox (с 2008 г.)

История [ править ]

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

Стандартизация [ править ]

Значок был стандартизирован Консорциумом World Wide Web (W3C) в рекомендации HTML 4.01, выпущенной в декабре 1999 г., а затем в рекомендации XHTML 1.0, выпущенной в январе 2000 г. [8] [9] В стандартной реализации используется элемент ссылки. с relатрибутом в <head>разделе документа, чтобы указать формат файла, имя и расположение файла. В отличие от предыдущей схемы, файл может находиться в любом каталоге веб-сайта и иметь любой формат файла изображения. [10] [11]

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

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

Наследие [ править ]

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

Реализация браузера [ править ]

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

Поддержка формата файла [ править ]

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

Браузерформат файла изображения
ICOPNGГифкаанимированные GIFJPEGAPNGSVG
КрайдададаНетНеизвестныйНеизвестныйНеизвестный
Fire Fox1.0 [18]1.0 [18]1.0 [18]Да [19]да3,0 [19]41,0 [20]
Гугл Хромдада4.0Нет [21] [22]4.0Нет80 [23]
Internet Explorer5,0 [24]11,0 [25]11,0 [25]Нет [24]Нет [24]Нет [24]Нет [26]
Опера7,0 [27]7,0 [27]7,0 [27]7,0 [27]7,0 [27]9,544,0 [28]
Сафарида4.04.0Нет4.0НетНестандартный (12,0) [a] [29] [30]
  1. ^ Safari, начиная с версии 12.0, в некоторых случаях поддерживает одноцветные значки SVG в нестандартномmask-iconформате.

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

Использование значка [ править ]

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

БраузерАдресная строкаВыпадающий список адресной строкиПанель ссылокЗакладкиВкладкиПеретащите на рабочий стол
КрайНетдадададада
Fire Fox1.0–12.0: Да [31]
> v13: Нет [32]		дадаДа [31]Да [31]Да [31]
Гугл ХромНет [31]НетДа [31]Да [31]1.0 [31]Нет [31]
Internet Explorer7,0 [31]Нет5,0 [31]5,0 [31]7,0 [31]5,0 [31]
Опера7.0–12.17: Да
> v14: Нет [31]		Нет7,0 [31]7,0 [31]7,0 [31]7,0 [31]
СафариДа [31]даНет [31]Да [31]1.0–8.0: Да
9.0–11.0: Нет
> 12.0: Необязательно [33]		Нет [31]

В Opera Software добавлена ​​возможность изменять значок в быстром наборе в Opera 10 . [34]

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

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

КрайFire FoxГугл ХромInternet ExplorerОпераСафари
<link  rel = "shortcut icon"  href = "https://example.com/myicon.ico" >
Да [4]Да [4]Да [4]Да [4] [24]Да [4]да
<link  rel = "icon"  type = "image / vnd.microsoft.icon"  href = "https://example.com/image.ico" >
дададаДа (из IE 9) [25]дада
<link  rel = "icon"  type = "image / x-icon"  href = "https://example.com/image.ico" >
Да [4]Да [4]Да [4]Да (из IE 9) [35]Да [4]да
<link  rel = "icon"  href = "https://example.com/image.ico" >
дададаДа (из IE 11) [25]дада
<link  rel = "icon"  type = "image / gif"  href = "https://example.com/image.gif" >
дададаДа (из IE 11) [25]дада
<link  rel = "icon"  type = "image / png"  href = "https://example.com/image.png" >
дададаДа (из IE 11) [25]дада
<link  rel = "icon"  type = "image / svg + xml"  href = "https://example.com/image.svg" >
дададададаНет
<link  rel = "mask-icon"  href = "https://example.com/image.svg"  color = "red" >
НетНетНетНетНетДа [36]
favicon.ico находится в корне сайтадаНеобязательно [a]дадаНеобязательно [b]да
приоритет: предпочитать корневую или (X) HTML-версиюсвязаны [31]связаны [31]связаны [31]связаны [31]??
  1. ^ Firefox принимает толькоfavicon.icoв корне веб-сайта без<link>тега, если для параметраbrowser.chrome.site_iconsустановлено значениеtrueinabout:config. Значение по умолчанию -true. Если установленоfalse, эти значки игнорируются.
  2. ^ Opera загружается,/favicon.icoтолько если дляMultimedia/Always load faviconпараметраopera:configустановлено значение1. См. Дополнительную информацию на странице поддержки Opera .

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

Только SeaMonkeyfavicon.ico по умолчанию не загружает файлы в корень веб-сайта. [38]

Поддержка устройства [ править ]

Для устройств Apple с операционной системой iOS версии 1.1.3 или более поздней, а также для некоторых устройств Android [39] можно предоставить настраиваемый значок, который пользователи могут отображать на своих домашних экранах с помощью кнопки « Добавить на главный экран» внутри общий лист в Safari. [40] [41] Эта функция включается путем добавления a в разделе документов, обслуживаемых веб-сайтом. Если пользовательский значок не предоставлен, эскиз веб-страницы будет помещен на главный экран. [42]<link rel="apple-touch-icon" ...><head>

Рекомендуемый базовый размер этого значка - 152 × 152 пикселей. [43]

Для iPad базовый размер - 180x180 пикселей. Планшеты Android [через Chrome] предпочитают значок PNG 192x192. [44]

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

Со скругленными углами, добавлено iOS
<link rel = "apple-touch-icon" href = "https://example.com/image.png">

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

Рекомендация HTML5 для значков разных размеров [ править ]

Текущая спецификация HTML5 рекомендует указывать несколько размеров для значков, используя атрибуты в теге. [45] Множественные форматы значков, включая форматы контейнеров, такие как файлы 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 пикселей , когда пользователь выберет « Создать ярлыки приложений ... » в меню «Инструменты».

Анимированные значки [ править ]

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

Ограничения и критика [ править ]

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

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

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

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

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

Ссылки [ править ]

  1. ^ a b c d Лейн, Дэйв (9 августа 2008 г.). «Создание значка с несколькими разрешениями, включая прозрачность с помощью GIMP» . Egressive.com . Архивировано из оригинального 25 декабря 2010 года . Проверено 25 февраля 2011 года .
  2. ^ "Что с новым мини-значком Google?" . BBC. 20 января 2009 . Проверено 25 февраля 2011 года . Этот квадрат 16x16 пикселей - это размер рассматриваемого значка, если не его область действия.
  3. ^ a b c Apple, Дженнифер. «Favicon - Как создать Favicon.ico» . Photoshopsupport.com . Проверено 25 февраля 2011 года .
  4. ^ a b c d e f g h i j k l «Как добавить ярлык на веб-страницу» . Сеть разработчиков Microsoft . Microsoft . Проверено 15 марта 2010 года .
  5. ^ Макгрю, Дарина (26 апреля 2007). «Часто задаваемые вопросы по веб-авторингу - 8.11. Как я могу создать собственный значок, когда люди добавляют мой сайт в закладки?» . htmlhelp.com . Проверено 23 февраля 2011 года .
  6. ^ a b c Хенг, Кристофер (7 сентября 2008 г.). «Что такое Favicon.ico? Персонализируйте закладки своего сайта» . thesitewizard.com . Проверено 23 февраля 2011 года .
  7. ^ «Создание значков с помощью Adobe Photoshop и GoLive» . Adobe GoLive . Архивировано из оригинала 7 декабря 2003 года . Проверено 25 февраля 2011 года .
  8. ^ «Спецификация HTML 4.01» . Консорциум World Wide Web. 24 декабря 1999 , Проверено 14 марта 2011 года .
  9. ^ «XHTML ™ 1.0: Расширяемый язык разметки гипертекста» . Консорциум World Wide Web. 26 января 2000 . Проверено 14 марта 2011 года .
  10. ^ Dubost, Карл (октябрь 2005). «Профиль метаданных веб-сайта: значок, ...» Консорциум World Wide Web . Проверено 23 февраля 2011 года .
  11. ^ a b Dubost, Карл (24 октября 2005 г.). «Как добавить значок на свой сайт» . Консорциум World Wide Web . Проверено 25 февраля 2011 года .
  12. ↑ Мясник, Саймон (3 сентября 2003 г.). «Опубликованная спецификация» . Управление по присвоению номеров в Интернете . Проверено 25 февраля 2011 года .
  13. ^ a b "Список незначительных изменений IE9 RC" . IEInternals . Дата обращения 7 апреля 2016 .
  14. ↑ Irish, Paul (15 декабря 2010 г.). "зафиксировать 37b5fec090d00f38de64 в html5-шаблоне Паулириша" . GitHub . Проверено 25 февраля 2011 года .
  15. ^ "Связь отношений" . IANA .
  16. ↑ Ян Хиксон (19 января 2011 г.). «HTML - это новый HTML5» . Блог WHATWG . WHATWG .
  17. ^ "Версия HTML5 r6404" . HTML5-трекер .
  18. ^ a b c Дэвид (19 июля 2003 г.). «Примечания к выпуску Mozilla 0.9.6» . Mozilla . Проверено 23 февраля 2011 года .
  19. ^ a b «Ошибка 111373: не разрешать анимированные значки сайтов (значки)» . Проверено 1 июня 2014 .
  20. ^ Daniel Холберт (12 июня 2015). «Ошибка 366324 - поддержка значков сайта SVG (значки, ярлыки) - комментарий 55» . Bugzilla @ Mozilla . Mozilla . Дата обращения 12 июня 2015 .
  21. ^ трекер, хром. "нет движения в фавиконе" . chromium.org . Проверено 11 апреля +2016 .
  22. ^ трекер, хром. «Анимированные значки не поддерживаются» . chromium.org . Проверено 8 ноября 2018 .
  23. ^ «Поддержка SVG в значках - Статус платформы Chrome» . 19 ноября 2019 . Проверено 16 января 2020 года .
  24. ^ a b c d e е Дэвис, Джефф (27 декабря 2007 г.). "почему значок моего сайта не отображается в IE7?" . Джеффдав по коду . Microsoft . Проверено 11 марта 2013 года .
  25. ^ a b c d e f «Веселье с иконками» . Microsoft. 7 сентября 2013 . Проверено 3 ноября 2013 года .
  26. ^ "Поддержка значков SVG" . Microsoft Connect. 3 мая 2013 . Проверено 4 сентября 2014 года .
  27. ^ a b c d e "Журнал изменений Opera 7 для Windows" . Программное обеспечение Opera. 28 января 2003 . Проверено 28 февраля 2011 года .
  28. ^ «Что нового в Opera» . Программное обеспечение Opera . Проверено 24 июня 2017 года .
  29. ^ «Теперь доступна версия Safari Technology Preview 58 с функциями Safari 12» . WebKit. 6 июня 2018 . Дата обращения 3 марта 2019 .
  30. ^ "Favicons. Наконец" . Iconfactory. 7 июня 2018 . Дата обращения 3 марта 2019 .
  31. ^ a b c d e f g h i j k l m n o p q r s t u v w x y z aa Фрэнсис, Льюис (11 декабря 2007 г.). «График поддержки фавикона в современных браузерах» . informationgift.com . Проверено 23 февраля 2011 года .
  32. ^ "Firefox считает значки избранных рискованными и удаляет их из адресной строки" . Engadget . Проверено 10 сентября 2012 года .
  33. ^ «Как включить значки в Safari, чтобы вы могли определять веб-сайты во вкладках графически» . iDownloadBlog. 14 июня 2018 . Дата обращения 14 октября 2020 .
  34. ^ «Список изменений Opera 10.0 beta 2 для Windows» . Программное обеспечение Opera. 16 июля 2009 . Проверено 27 февраля 2011 года .
  35. ^ "Список незначительных изменений IE9 RC" . Microsoft. 11 февраля 2011 . Проверено 16 ноября 2013 года .
  36. ^ «Создание закрепленных значков вкладок» . Корпорация Apple 12 декабря 2016 . Дата обращения 9 апреля 2019 .
  37. ↑ Джонатан Т. Нил (16 января 2013 г.). «Понять Favicon» . Архивировано из оригинального 23 мая 2013 года . Проверено 30 мая 2013 года .
  38. ^ Матиас Bynens (14 апреля 2010). "rel =" ярлык "считается вредоносным" . Проверено 15 ноября 2011 года .
  39. ^ Матиас Bynens (2 марта 2011). «Все, что вы всегда хотели знать о сенсорных иконках» . Проверено 15 ноября 2011 года .
  40. ^ «Руководство по интерфейсу пользователя iPhone для веб-приложений: показатели, рекомендации по макету и советы» . Apple , Inc . Проверено 27 мая 2010 года .
  41. ^ a b c «Руководство по веб-содержимому Safari: указание значка веб-страницы для веб-клипа» . Корпорация Apple 15 ноября 2010 . Проверено 25 февраля 2011 года .
  42. ^ a b c d Маклеллан, Дрю (17 января 2008 г.). «Как установить значок Apple Touch для любого сайта» . Allinthe head.com . Проверено 11 марта 2011 года .
  43. ^ "Apple-touch-icon" . Apple , Inc . Дата обращения 9 апреля 2019 .
  44. ^ "Android Chrome и его значок" . Проверено 9 сентября 2014 года .
  45. ^ "Уровень жизни HTML, раздел 4.6.6.6" Тип ссылки "icon" ' " . WHATWG . Проверено 17 ноября 2015 года .
  46. ^ «Ошибка 111373 - не разрешать анимированные значки сайтов (значки)» . bugzilla.mozilla.org. 21 ноября 2001 г.
  47. ^ «Ошибка Firefox 111373 - не разрешать анимированные значки сайтов (mozilla.org)» . Хакерские новости. 7 июля 2015.
  48. ^ Marlinspike, Moxie (21 февраля 2011). «Победа над SSL с помощью Sslstrip (Marlinspike Blackhat)» . (см. описание видео) . SecurityTube. Архивировано из оригинального 13 июля 2011 года . Проверено 9 июля 2011 года .
  49. ^ «Возможности Firefox версии 14» . Проверено 18 июля 2012 года .
  50. ^ Линус, Робин. «Ваш отпечаток в социальных сетях» . Дата обращения 14 октября 2016 .
  51. ^ Goodin, Dan (19 февраля 2021). «Новый способ отслеживания браузера работает, даже когда вы очищаете кеш или находитесь в режиме инкогнито» . Ars Technica . Проверено 21 февраля 2021 года .

Внешние ссылки [ править ]

  • Предложения от организации веб-стандартов W3C о том, как добавить Favicon
  • Системы и методы, связанные с заявкой на патент Favicons 2008