Как браузеры выбирают значок сайта? - PullRequest
Новая
       45

Как браузеры выбирают значок сайта?

1 голос
/ 23 апреля 2019

Когда веб-сайт предоставляет более одного тега favicon link, какие правила использует браузер, чтобы определить, какой значок будет фактически использоваться?

Например, HTML-код IMDB включает в себя следующий фрагмент: 

<link href="https://m.media-amazon.com/images/G/01/imdb/images/safari-favicon-517611381._CB483525257_.svg" mask="" rel="icon" sizes="any">
<link rel="icon" type="image/ico" href="https://m.media-amazon.com/images/G/01/imdb/images/favicon-2165806970._CB470047330_.ico">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" type="image/x-icon" href="https://m.media-amazon.com/images/G/01/imdb/images/desktop-favicon-2165806970._CB484110913_.ico">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-4151659188._CB483525313_.png" rel="apple-touch-icon"> 
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-76x76-53536248._CB484146059_.png" rel="apple-touch-icon" sizes="76x76"> 
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-120x120-2442878471._CB483525250_.png" rel="apple-touch-icon" sizes="120x120"> 
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-152x152-1475823641._CB470042035_.png" rel="apple-touch-icon" sizes="152x152">

Какой значок выбран и для чего используются другие?

Я заметил, что тот, у которого rel="shortcut icon", всегда имеет самый высокий приоритет. Если это так, что будет делать браузер с веб-страницей с несколькими тегами shortcut icon?

Ответы [ 2 ]

2 голосов
/ 23 апреля 2019

Что будет делать браузер с веб-страницей с несколькими ярлыками ярлыков?

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

На самом деле у меня есть следующий фрагмент в теге заголовка сайта, который я сделал: 

<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" sizes="16x16">
<link rel="shortcut icon" href="/assets/16x16.png" type="image/png" sizes="16x16">
<link rel="shortcut icon" href="/assets/32x32.png" type="image/png" sizes="32x32">

У меня естьзаметил, что каждый современный браузер будет выбирать PNG-версию иконки.На самом деле, я не видел использования иконки MS-ICO версии значка, хотя я не проверял, будут ли старые браузеры (например, старые версии IE) выбирать версию ICO поверх версии PNG.

Когда используется экран HiDPI, я заметил, что версия 32x32 будет выбрана для представления в виде значка 16x16 @ 2x на вкладке.В противном случае будет выбрана версия 16x16.Перемещение окна браузера из HDPI в окно браузера, отличное от HDPI, заставит браузер переоценить текущий значок и, при необходимости, изменит его.

0 голосов
/ 23 апреля 2019

Правильное отношение ссылки (link rel="") для создания значка закладки не включает слово «ярлык».Согласно этой странице: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

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

Есть некоторые сайты, которые даже не объявляют значок.Все браузеры будут просто проверять наличие ( favicon.ico ) файла на корневом уровне вашего веб-сайта.

Ярлык - это просто обходной путь для обозначения значка, который не называется favicon.ico .

т.е. Вам придется использовать «ярлык», если вам нужно несколько значков для различных страниц или поддоменов.(также вам нужно указать путь к конкретному файлу ICO.) 

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