Значок ( / ˈ 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>
разделе документа, чтобы указать формат, имя и местоположение файла.
favicon.ico
корень веб-сайта без тега, если для <link>
параметра browser.chrome.site_icons
установлено значение . Значение по умолчанию : . Если установлено значение , эти значки игнорируются.true
about:config
true
false
/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 рекомендует указывать несколько размеров для значков, используя атрибуты внутри тега. [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 с операционной системой 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]
<!-- Для 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 пользователи могут использовать функцию «Добавить на главный экран» в меню инструментов Chrome , чтобы закрепить веб-страницу на главном экране.
Это также работает для любого веб-сайта, но если значок не указан, используется общий значок. Поскольку значки приложений Android имеют размер 48x48 пикселей, на веб-сайте должны быть значки размером, кратным 48x48 пикселей. Для современных устройств с высоким разрешением Google рекомендует предоставлять значки размером 192х192 пикселей. [41]
<!-- Для 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]
Этот квадрат размером 16x16 пикселей соответствует размеру рассматриваемого значка, если не его области действия.
{{cite web}}
: CS1 maint: неподходящий URL ( ссылка )