WonderCSS

为Chrome创建应用快捷方式添加图标

在以往为网站添加图标时,通常用的都是link rel=”shortcut icon” 或link rel=”bookmark” 来实现:

<link rel="bookmark" href="favicon.ico" />

但若是在google浏览器Chrome上使用“工具 > 创建应用快捷方式”创建图标到桌面时,显示出来的图标并非是icon组里的大尺寸,依旧是16*16的小尺寸。

记得在Chrome浏览器刚刚推出时,google官方针对“ 创建应用快捷方式 ”提出了创建图标的方案,那就是增加<link>标签的 sizes 属性。当时html5还没有如今这么完善,如今日趋成熟的html5大大普及的同时,google便去掉了这条帮组信息。

那么如何为Chrome“创建应用快捷方式”添加自定义图标呢?这就是html5的<link> sizes 属性:

<link rel="icon" href="favicon.ico" sizes="48x48"/>

sizes 属性规定被链接资源的尺寸。只有当被链接资源是图标时 (rel=”icon”),才能使用该属性。该属性可接受多个值。值由空格分隔。

当然你可以依据尺寸的大小作出不同的样式,分别给予同的尺寸:


<link rel="icon" href="icon64.png" sizes="64x64"/>
<link rel="icon" href="icon48.png" sizes="48x48"/>

By 于湛 发布于 2013.02.11 4,855 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注