浏览器如何为网站选择图标?

问题描述 投票:1回答:2

当一个网站提供多个favicon link标签时,浏览器会采用什么样的规则来确定实际使用哪个图标?

例如,IMDB的html src包含以下代码段:

<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标记的网页会做什么?

html google-chrome firefox browser favicon
2个回答
2
投票

浏览器会对具有多个快捷图标标记的网页执行什么操作?

我已经通过实验测试了当提供多个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)是否会选择基于PNG版本的ICO版本。

当使用HiDPI屏幕时,我注意到将选择32x32版本,以便在选项卡中显示为16x16 @ 2x图标。否则,将挑选16x16版本。将浏览器窗口从HDPI移动到非HDPI浏览器窗口将使浏览器重新评估当前的图标,如果需要,它将更改它。


0
投票

用于创建书签图标的正确链接关系(link rel="")不包括单词“shortcut”。根据这个页面:https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

快捷链接类型通常在icon之前看到,但此链接类型不符合,被忽略,Web作者不得再使用它。

有些网站甚至没有声明图标。所有浏览器只需在您网站的根级别检查(favicon.ico)文件。

快捷方式只是指定一个名为favicon.ico的图标的解决方法。

即如果您需要多个图标用于各种页面或子域,则必须使用“快捷方式”。 (您还需要指定特定ICO文件的路径。)

<link rel="shortcut icon" href="path/to/icon.ico" />
© www.soinside.com 2019 - 2024. All rights reserved.