Лучшая практика заказа значков <link>в HTML-заголовке - PullRequest
Новая
       106

Лучшая практика заказа значков <link>в HTML-заголовке

0 голосов
/ 25 ноября 2018

Я хочу включить теги <link> в мою HTML-заголовок для различных значков разных размеров.Каковы оптимальные методы заказа значков <link> s в теге <head>?Имеет ли значение, в каком порядке я их включаю?Самый маленький к большому?От самого большого до самого маленького?

Ответы [ 3 ]

0 голосов
/ 27 ноября 2018

Я думаю, что вы хотите знать информацию только о значках, потому что ваш вопрос имеет тег favicon.В другом случае я могу написать книгу об этом.:-) Я не нашел информацию о порядке размеров, но я бы сделал это от самого маленького до самого большого заказа из-за экономии ресурсов сервера.

Internet Explorer9 использует значки сайтов в следующих местах:

  • Адресная строка (16x16)
  • Страница новой вкладки (32x32)
  • Кнопка панели задач (32x32)
  • Пользовательский интерфейс браузера закрепленного сайта (24x24)

При создании закрепленного сайта вам могут потребоваться дополнительные значки, чтобы использовать их следующими способами:

  • Задачи списка переходов (16x16)
  • Кнопки панели инструментов с миниатюрами (16x16)
  • Значки наложения (16x16)

Для достижения наилучших результатов в Internet Explorer 9 ваши значки должны поддерживать следующие размеры изображений:

  • Рекомендуется 16x16, 32x32, 48x48
  • Оптимально 16x16, 24x24, 32x32, 64x64

Файл ICO может содержать несколько изображений, и Microsoft рекомендует поместить в значок значок версии 16x16, 32x32 и 48x48..ico.Например, IE будет использовать версию 16x16 для адресной строки и 32x32 для ярлыка панели задач.

Вы можете написать значок следующим образом: 

<link rel="icon" href="/path/to/icons/favicon.ico">

Современные настольные браузеры (IE11, Chrome, Opera, Firefox ...) предпочитают использовать иконки PNG.Обычные ожидаемые размеры: 16x16, 32x32 и "как можно больше".Например, MacOS / Safari использует значок 196x196, если он самый большой из найденных.

Значки PNG объявлены с: 

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...

Документация: : элемент External Resource Link в MDN .

Каковы рекомендуемые размеры?Выберите свои любимые платформы:

Дополнительная информация оклассические и не классические значки:

0 голосов
/ 29 ноября 2018

Из HTML5 спецификации :

Указанный ресурс представляет собой значок, представляющий страницу или сайт, и должен использоваться пользовательским агентом при представлении страницы пользователюinterface.

Значки могут быть слуховыми значками, визуальными значками или другими видами значков.Если предусмотрено несколько значков, пользовательский агент должен выбрать наиболее подходящий значок в соответствии с атрибутами типа, носителя и размеров. Если имеется несколько одинаково подходящих значков, пользовательские агенты должны использовать последний, объявленный в древовидном порядке в тот момент, когда пользовательский агент собирал список значков.Если пользовательский агент пытается использовать значок, но этот значок определяется, при ближайшем рассмотрении, на самом деле неуместным (например, потому что он использует неподдерживаемый формат), тогда пользовательский агент должен попробовать следующий наиболее подходящий значок, как определеноАтрибуты.

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

<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">

Надеюсь, это поможет!

0 голосов
/ 25 ноября 2018

Я бы рекомендовал переходить от наибольшего к наименьшему для каждого тега rel .Устройство или пользовательский агент должны затем использовать изображение с самым высоким разрешением, которое оно может поддерживать.

...