如果我为favicon PNG指定不同的图像大小,如下所示:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" />
<link rel="icon" type="image/png" sizes="24x24" href="/favicon-24px.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32px.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48px.png" />
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64px.png" />
<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256px.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512px.png" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
Run Code Online (Sandbox Code Playgroud)
是否每个文件都被获取?
引自http://www.jonathantneal.com/blog/understand-the-favicon/:
这些与PNG-favicon兼容的浏览器如何确定应该使用哪个favicon?Firefox和Safari将使用最后的favicon.Chrome for Mac将使用ICO格式的图标,否则为32×32图标.Chrome for Windows将使用首先出现的图标,如果是16×16,则为ICO.如果没有上述可供选择,既铬合金将使用任何图标至上,Firefox和Safari浏览器的完全相反.事实上,Chrome for Mac将忽略16×16图标并使用32×32版本,如果仅在非视网膜设备上将其缩小至16×16.Opera不想偏袒任何一方,可以随意选择任何可用的图标.我喜欢Opera这样做.
而这仅仅是个开始.现在是时候了解Internet Explorer的警告了.
虽然IE8-10将在首次加载页面时显示图标,但IE7将跳过第一次加载并在重复访问期间显示图标.更糟糕的是,IE6只有在网站被加入书签并在浏览器中重新打开后才会显示图标.每当清除浏览器缓存时,IE6也会删除favicon,并且在网站重新加入书签或者以某种方式重新加载图标之前,它不会再次显示图标.如果IE6和favicons对你意味着很多,你可以使用一个小的JavaScript片段强制重新加载,最好包含在条件注释中.
Run Code Online (Sandbox Code Playgroud)<!-- I "support" IE6 --> <!--[if IE 6]><script>(new Image).src="path/to/favicon.ico"</script><![endif]-->