Фавикон - Favicon

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

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

История

В марте 1999 г. Microsoft вышел Internet Explorer 5, который впервые поддерживал фавиконы.[4] Первоначально значок был файл называется favicon.ico помещен в корневая директория веб-сайта. Он использовался в Internet Explorer с избранное (закладки) и рядом с 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 формат был зарегистрирован третьей стороной с Управление по присвоению номеров в Интернете (IANA) под Тип MIME изображение / vnd.microsoft.icon.[12][13] Однако при использовании .ico формат для отображения в виде изображений (например, не в виде значка), Internet Explorer не может отображать файлы, обслуживаемые с этим стандартизированным типом MIME.[13] А обходной путь для Internet Explorer - это связать .ico с нестандартными изображение / x-значок Тип MIME на веб-серверах.[14]

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

Наследие

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)[а][29][30]
  1. ^ Safari, начиная с версии 12.0, поддерживает одноцветные значки SVG в некоторых случаях в нестандартном формате. маска-значок формат.

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

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

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

БраузерАдресная строкаВыпадающий список адресной строкиПанель ссылокЗакладкиВкладкиПеретащите на рабочий стол
КрайНетдадададада
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 добавлена ​​возможность изменять фавикон в Быстрый набор в Опера 10.[34]

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

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

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

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

Поддержка устройства

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

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

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

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

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

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

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

Электрический ток HTML5 Спецификация рекомендует указывать несколько размеров для значков, используя атрибуты rel = "icon" sizes = "разделенный пробелами список размеров значков" в пределах <link> тег.[45] Множественные форматы значков, включая форматы контейнеров, такие как Microsoft .ico и Macintosh .icns файлы, а также Масштабируемая векторная графика может быть предоставлен включением значка Тип содержимого в формате type = "тип содержимого файла" в пределах <link> тег.

По состоянию на iOS 5, Мобильные устройства Apple игнорируют рекомендацию HTML5 и вместо этого используют проприетарный яблоко-сенсорный значок метод, описанный выше. В Гугл Хром веб-браузер, однако, выберет наиболее подходящий размер из тех, что указаны в заголовках HTML, чтобы создать 128 × 128 пикселей значки приложений, когда пользователь выбирает Создать ярлыки приложений ... из меню «Инструменты».

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

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

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

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

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

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

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

использованная литература

  1. ^ а б c d Лейн, Дэйв (9 августа 2008 г.). «Создание фавикона с несколькими разрешениями, включая прозрачность, с помощью GIMP». Egressive.com. Архивировано из оригинал 25 декабря 2010 г.. Получено 25 февраля 2011.
  2. ^ "Что с новым мини-значком Google?". BBC. 20 января 2009 г.. Получено 25 февраля 2011. Этот квадрат 16x16 пикселей - это размер рассматриваемого значка, если не его область действия.
  3. ^ а б c Яблоко, Дженнифер. «Favicon - Как создать Favicon.ico». Photoshopsupport.com. Получено 25 февраля 2011.
  4. ^ а б c d е ж грамм час я j k л «Как добавить ярлык на веб-страницу». Сеть разработчиков Microsoft. Microsoft. Получено 15 марта 2010.
  5. ^ МакГрю, Дарин (26 апреля 2007 г.). «Часто задаваемые вопросы по веб-авторингу - 8.11. Как создать собственный значок, когда люди добавляют мой сайт в закладки?». htmlhelp.com. Получено 23 февраля 2011.
  6. ^ а б 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. ^ Дубость, Карл (октябрь 2005 г.). "Профиль метаданных веб-сайта: значок, ..." Консорциум World Wide Web. Получено 23 февраля 2011.
  11. ^ а б Дубость, Карл (24 октября 2005 г.). «Как добавить значок на свой сайт». Консорциум World Wide Web. Получено 25 февраля 2011.
  12. ^ Мясник, Саймон (3 сентября 2003 г.). «Опубликованная спецификация». Управление по присвоению номеров в Интернете. Получено 25 февраля 2011.
  13. ^ а б "Список незначительных изменений IE9 RC". IEInternals. Получено 7 апреля 2016.
  14. ^ Ирландский, Пол (15 декабря 2010 г.). "зафиксировать 37b5fec090d00f38de64 в html5-шаблоне Паулириша". GitHub. Получено 25 февраля 2011.
  15. ^ "Связанные отношения". IANA.
  16. ^ Ян Хиксон (19 января 2011 г.). «HTML - это новый HTML5». Блог WHATWG. WHATWG.
  17. ^ "Версия HTML5 r6404". HTML5 трекер.
  18. ^ а б c Дэвид (19 июля 2003 г.). «Примечания к выпуску Mozilla 0.9.6». Mozilla. Получено 23 февраля 2011.
  19. ^ а б «Ошибка 111373: не разрешать анимированные значки сайтов (значки)». Получено 1 июня 2014.
  20. ^ Дэниел Холберт (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. ^ а б c d е ж Дэвис, Джефф (27 декабря 2007 г.). "почему значок моего сайта не отображается в IE7?". Джеффдав по коду. Microsoft. Получено 11 марта 2013.
  25. ^ а б c d е ж "Веселье с иконками". Microsoft. 7 сентября 2013 г.. Получено 3 ноября 2013.
  26. ^ "Поддержка значков SVG". Microsoft Connect. 3 мая 2013. Получено 4 сентября 2014.
  27. ^ а б c d е «История изменений 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. ^ а б c d е ж грамм час я j k л м п о п q р s т ты v ш Икс у z аа Фрэнсис, Льюис (11 декабря 2007 г.). «График поддержки favicon в современных браузерах». 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 Inc. 12 декабря 2016 г.. Получено 9 апреля 2019.
  37. ^ Джонатан Т. Нил (16 января 2013 г.). "Понять фавикон". Архивировано из оригинал 23 мая 2013 г.. Получено 30 мая 2013.
  38. ^ Матиас Байненс (14 апреля 2010 г.). "rel =" ярлык "считается вредоносным". Получено 15 ноября 2011.
  39. ^ Матиас Байненс (2 марта 2011 г.). «Все, что вы всегда хотели знать о сенсорных иконках». Получено 15 ноября 2011.
  40. ^ «Рекомендации по созданию пользовательского интерфейса iPhone для веб-приложений: показатели, рекомендации по макету и советы». Apple Inc.. Получено 27 мая 2010.
  41. ^ а б c «Руководство по веб-контенту Safari: указание значка веб-страницы для веб-клипа». Apple Inc. 15 ноября 2010 г.. Получено 25 февраля 2011.
  42. ^ а б c d Маклеллан, Дрю (17 января 2008 г.). «Как установить значок Apple Touch для любого сайта». Allinthe head.com. Получено 11 марта 2011.
  43. ^ "Apple-сенсорный значок". Apple Inc.. Получено 9 апреля 2019.
  44. ^ "Android Chrome и его значок". Получено 9 сентября 2014.
  45. ^ "HTML Living Standard, раздел 4.6.6.6" Тип ссылки "значок"'". WHATWG. Получено 17 ноября 2015.
  46. ^ «Ошибка 111373 - не разрешать анимированные значки сайтов (значки)». bugzilla.mozilla.org. 21 ноября 2001 г.
  47. ^ «Ошибка Firefox 111373 - не разрешены анимированные значки сайтов (mozilla.org)». Хакерские новости. 7 июля 2015.
  48. ^ Марлинспайк, Мокси (21 февраля 2011 г.). «Победа над SSL с помощью Sslstrip (Marlinspike Blackhat)». (см. описание видео). SecurityTube. Архивировано из оригинал 13 июля 2011 г.. Получено 9 июля 2011.
  49. ^ «Возможности Firefox версии 14». Получено 18 июля 2012.
  50. ^ Линус, Робин. "Ваш отпечаток в социальных сетях". Получено 14 октября 2016.

внешняя ссылка