Фавикон - Favicon
Favicon ( / е æ v . Ɪ ˌ к ɒ п / ; коротка для любимой иконы ), также известные как ярлык , значок веба - сайта , вкладка значок , значок URL , или значок закладки , представляет собой файл , содержащий один или более мелкие значки , связанные с конкретным веб-сайтом или веб-страницей . Веб - дизайнер может создать такую иконку и загрузить его на веб - сайт (или веб - страницы) несколькими способами, и графические веб - браузеры будут затем использовать его. Браузеры, которые предоставляют поддержку значков, обычно отображают значок страницы в адресной строке браузера (иногда также в истории) и рядом с именем страницы в списке закладок . Браузеры, поддерживающие интерфейс документа с вкладками, обычно показывают значок страницы рядом с заголовком страницы на вкладке, а браузеры для конкретных сайтов используют этот значок в качестве значка на рабочем столе .
История
В марте 1999 года Microsoft выпустила Internet Explorer 5 , который впервые поддерживал значки. Первоначально Favicon был файл под названием favicon.icoпомещается в корневой каталог веб - сайта. Он был использован в Internet Explorer «s избранное (закладки) , а рядом с URL в адресной строке , если страница была закладкой. Побочным эффектом было то, что количество посетителей, добавивших страницу в закладки, можно было оценить по запросам значка. Этот побочный эффект больше не работает, поскольку все современные браузеры загружают файл значка для отображения в строке своего веб-адреса, независимо от того, добавлен ли сайт в закладки.
Стандартизация
Значок был стандартизирован Консорциумом World Wide Web (W3C) в рекомендации HTML 4.01, выпущенной в декабре 1999 года, а затем в рекомендации XHTML 1.0, выпущенной в январе 2000 года. Стандартная реализация использует элемент ссылки с relатрибутом в <head>разделе документа, чтобы указать формат файла, имя и расположение файла. В отличие от предыдущей схемы, файл может находиться в любом каталоге веб-сайта и иметь любой формат файла изображения.
В 2003 году .icoформат был зарегистрирован третьей стороной в Internet Assigned Numbers Authority (IANA) под типом MIME image/vnd.microsoft.icon . Однако при использовании .icoформата для отображения в виде изображений (например, не в виде значка) Internet Explorer не может отображать файлы, обслуживаемые с этим стандартизированным типом MIME. Обходной путь для Internet Explorer состоит в связывании .icoс нестандартным image/x-iconтипом MIME в веб - серверах.
RFC 5988 установил реестр отношений ссылок IANA и rel="icon"был зарегистрирован в 2010 году на основе спецификации HTML5 . Популярное <link rel="shortcut icon" type="image/png" href="image/favicon.png">теоретически идентифицирует два отношения, shortcutи icon, но shortcutне регистрируется и является избыточным. В 2011 году в стандарте жизни HTML было указано, что по историческим причинам shortcutразрешено непосредственно раньше icon; однако shortcutне имеет значения в данном контексте.
Наследие
Internet Explorer 5–10 поддерживает только формат файла ICO . Netscape 7 и Internet Explorer версий 5 и 6 отображают значок только тогда, когда страница отмечена закладкой, а не просто при посещении страниц, как в более поздних браузерах.
Реализация браузера
В следующих таблицах показана поддержка различных функций в основных веб-браузерах. Если не указано иное, номера версий указывают начальный номер версии поддерживаемой функции.
Поддержка форматов файлов
В следующей таблице показана поддержка формата файла изображения для значка.
| Браузер | формат файла изображения | ||||||
|---|---|---|---|---|---|---|---|
| ICO | PNG | Гифка | анимированные GIF | JPEG | APNG | SVG | |
| Край | да | да | да | Нет | да | Неизвестный | да |
| Fire Fox | 1.0 | 1.0 | 1.0 | да | да | 3.0 | 41,0 |
| Гугл Хром | да | да | 4.0 | Нет | 4.0 | Нет | 80 |
| Internet Explorer | 5.0 | 11.0 | 11.0 | Нет | Нет | Нет | Нет |
| Опера | 7.0 | 7.0 | 7.0 | 7.0 | 7.0 | 9,5 | 44,0 |
| Сафари | да | 4.0 | 4.0 | Нет | 4.0 | Нет | Нестандартный (12.0) |
Кроме того, такие файлы значков могут иметь размер 16 × 16, 32 × 32, 48 × 48 или 64 × 64 пикселей , а также 8-битную, 24-битную или 32-битную глубину цвета . В статье о формате файла ICO подробно описаны значки с более чем 256 цветами на различных платформах Microsoft Windows .
Использование значка
В этой таблице показаны различные области браузера, в которых могут отображаться значки.
| Браузер | Адресная строка | Выпадающий список адресной строки | Панель ссылок | Закладки | Вкладки | Перетащите на рабочий стол |
|---|---|---|---|---|---|---|
| Край | Нет | да | да | да | да | да |
| Fire Fox | 1.0–12.0: Да > v13: Нет |
да | да | да | да | да |
| Гугл Хром | Нет | Нет | да | да | 1.0 | Нет |
| Internet Explorer | 7.0 | Нет | 5.0 | 5.0 | 7.0 | 5.0 |
| Опера | 7.0–12.17: Да > v14: Нет |
Нет | 7.0 | 7.0 | 7.0 | 7.0 |
| Сафари | да | да | Нет | да | 1.0–8.0: Да 9.0–11.0: Нет > 12.0: Необязательно |
Нет |
В Opera Software добавлена возможность изменять значок в быстром наборе в Opera 10 .
Как использовать
В этой таблице показаны различные способы распознавания значка веб-браузером. Стандартная реализация использует элемент ссылки с relатрибутом в <head>разделе документа, чтобы указать формат, имя и расположение файла.
| Край | Fire Fox | Гугл Хром | Internet Explorer | Опера | Сафари | |
|---|---|---|---|---|---|---|
<link rel="shortcut icon"
href="https://example.com/myicon.ico">
|
да | да | да | да | да | да |
<link rel="icon"
type="image/vnd.microsoft.icon"
href="https://example.com/image.ico">
|
да | да | да | Да (из IE 9) | да | да |
<link rel="icon" type="image/x-icon"
href="https://example.com/image.ico">
|
да | да | да | Да (из IE 9) | да | да |
<link rel="icon"
href="https://example.com/image.ico">
|
да | да | да | Да (из IE 11) | да | да |
<link rel="icon" type="image/gif"
href="https://example.com/image.gif">
|
да | да | да | Да (из IE 11) | да | да |
<link rel="icon" type="image/png"
href="https://example.com/image.png">
|
да | да | да | Да (из IE 11) | да | да |
<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">
|
Нет | Нет | Нет | Нет | Нет | да |
favicon.ico находится в корне сайта
|
да | По желанию | да | да | По желанию | да |
| приоритет: предпочитать корневую версию или (X) HTML-версию | связаны | связаны | связаны | связаны | ? | ? |
Если присутствуют ссылки как для значков PNG, так и для значков ICO, браузеры, совместимые с значками PNG, выбирают, какой формат и размер использовать, следующим образом. 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 выберет любой из доступных значков наугад.
Только SeaMonkeyfavicon.ico по умолчанию не загружает файлы в корень веб-сайта.
Рекомендация HTML5 для значков разных размеров
Текущая спецификация HTML5 рекомендует указывать несколько размеров для значков, используя атрибуты в теге. Множественные форматы значков, включая форматы контейнеров, такие как файлы 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.
Это работает для любого веб-сайта. Но чтобы iOS отображала ярлык со значком, веб-сайт должен предоставить a <link rel="apple-touch-icon" ...>в <head>разделе документов, обслуживаемых веб-сайтом. Если пользовательский значок не указан, эскиз веб-страницы будет помещен на главный экран.
Размеры значков приложений на разных классах устройств различаются. Рекомендуемые размеры значков: 152x152 для iPad (до iPad 2 , выпущенного в 2011 году), 167x167 для iPad с экранами Retina ( iPad 3 и новее) и 180x180 для iPhone. Если значок подходящего размера не предоставлен, iOS выберет самый большой значок rel="apple-touch-icon"и автоматически масштабирует его.
- Пример кода
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
Файл значка, на который указывает ссылка, apple-touch-iconизменен для добавления закругленных углов. В версиях iOS до iOS 7 будут добавлены падающая тень и отражающий блеск, а также apple-touch-icon-precomposedможет быть предоставлен значок, указывающий устройствам не применять отражающий блеск к изображению.
Браузеры или мобильные устройства также не требуют HTML для получения этих значков. Корневой каталог веб-сайта - это местоположение файла по умолчанию apple-touch-icon.png(в порядке приоритета).
Android-устройства
На устройствах Android пользователи могут использовать функцию « Добавить на главный экран» в меню инструментов Chrome, чтобы закрепить веб-страницу на главном экране.
Это также работает для любого веб-сайта, но если значок не указан, используется общий значок. Поскольку значки приложений Android имеют размер 48x48 точек, веб-сайт должен предоставлять значки размером, кратным 48x48 пикселей. Для современных устройств с высоким разрешением Google рекомендует предоставлять значки размером 192x192 пикселей.
- Пример кода
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
Android также поддерживает файлы веб-манифестов, которые позволяют глубже интегрировать веб-сайты с системой. Веб-манифест - это файл JSON, в котором указаны метаданные для прогрессивного веб-приложения. Это позволяет разработчику не только предоставлять значки, но и краткое имя для отображения на главном экране, а также цвета темы. Однако для работы функции « Добавить на главный экран» не требуется предоставлять файл веб-манифеста .
Анимированные значки
Различные браузеры, такие как Chrome, Firefox и Opera, поддерживают анимацию значков. С 2001 года для Firefox был открыт отчет об ошибке, в котором запрашивается способ отключить эту функцию.
Ограничения и критика
Из-за необходимости всегда проверять наличие этого значка в фиксированном месте, значок может привести к искусственному замедлению времени загрузки страницы и ненужным записям 404 в журнале сервера, если он отсутствует.
W3C не стандартизировал атрибут rel, поэтому есть другие ключевые слова, такие как значок ярлыка , которые также принимаются пользовательским агентом .
Фавиконами часто манипулируют в рамках фишинговых или перехватывающих атак на веб-страницы HTTPS . Многие веб-браузеры отображают значки рядом с областями пользовательского интерфейса веб-браузера, такими как адресная строка, которые используются, чтобы сообщить, использует ли соединение с веб-сайтом безопасный протокол, такой как TLS . Изменив значок на знакомое изображение замка, злоумышленник может попытаться обмануть пользователя, заставив его думать, что он надежно подключен к нужному веб-сайту. Этот прием используют автоматизированные инструменты атаки типа « злоумышленник в середине», такие как SSLStrip . Чтобы устранить это, некоторые веб-браузеры, такие как Firefox или Google Chrome, отображают значок на вкладке, одновременно отображая статус безопасности протокола, используемого для доступа к веб-сайту, рядом с URL-адресом.
Поскольку значки значков обычно расположены в корне каталога сайта на сервере, их можно использовать с некоторой надежностью, чтобы раскрыть, вошел ли веб-клиент в данную службу. Это работает, используя функцию перенаправления после входа на многих веб-сайтах, запрашивая значок в URL-адресе перенаправления после входа в систему и тестируя ответ сервера, чтобы определить, предоставляется ли пользователю запрошенный ресурс (что означает, что они вошли в систему) или вместо этого перенаправляются на страницу входа (что означает, что они не вошли в службу).
В 2021 году исследователи из Университета Иллинойса продемонстрировали метод отслеживания браузера с помощью значков.