我有一个尺寸为height = 26px/width = 20px的图标,名为favicon.png
<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />
但是,在我的浏览器中,我的favicon.png都是扭曲的.
问题:我的favicon.png应该是特定尺寸吗？另外,我可以使用非标准尺寸/尺寸,如果是,如何使用？
phi*_*e_b 488
favicon应该是ICO格式的一组16x16,32x32和48x48图片.ICO格式与PNG不同.不支持非方形图片.
为了生成图标,由于下面解释的原因,我建议你使用这个图标生成器.完全披露:我是这个网站的作者.
Favicon必须是方形的.桌面浏览器和Apple iOS不支持非方形图标.
favicon由几个文件支持:
favicon.ico图标.为了在桌面浏览器(Windows/IE,MacOS/Safari等)中获得最佳效果,您需要将两种类型的图标组合在一起.
favicon.ico虽然所有桌面浏览器都可以处理此图标,但它主要用于旧版本的IE.
ICO格式与PNG格式不同.这一点很棘手,因为有些浏览器足够聪明,可以正确处理PNG图片,即使它被错误地重命名为ICO扩展.
ICO文件可以包含多个图片,Microsoft建议将16x16,32x32和48x48版本的图标放入其中favicon.ico.例如,IE将使用16x16版本作为地址栏,使用32x32作为任务栏快捷键.
使用以下内容声明favicon:
<link rel="icon" href="/path/to/icons/favicon.ico">
但是,建议将其放在favicon.ico网站的根目录中,不要声明它,让现代浏览器选择PNG图标.
现代桌面浏览器(IE11,Chrome的最新版本,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">
...
注意:Firefox不支持该sizes属性,并使用它找到的最后一个PNG图标.确保最后声明32x32图片:它对Firefox来说已经足够了,这将阻止它下载它不需要的大图片.
另请注意,Chrome不支持该sizes属性,并且倾向于加载所有已声明的图标.最好不要声明太多图标.
这个问题是关于桌面图标,所以没有必要在这个主题上钻研太多.
Apple定义了iOS平台的触摸图标.iOS不支持非方形图标.它只是重新调整非方形图片,使它们成为正方形(寻找Kioskea示例).
Android Chrome依赖于Apple touch图标,还定义了192x192 PNG图标.
Microsoft定义了图块图片和browserconfig.xml文件.
生成适用于所有地方的图标非常复杂.我建议你使用这个favicon生成器.完全披露:我是这个网站的作者.
Mar*_*urd 106
16x16像素,*.ico格式.
Der*_*man 65
我使用faviconit.com获得最佳浏览器和设备支持.您上传图像,此站点为您提供代码,转换后的图像和browserconfig文件.
我们可以简单地将一个favicon手动上传到我们16x16的网站,它几乎可以在任何浏览器中显示.
但是当您将它标记为智能手机或平板电脑上的最爱之一时,我们将需要更大的图像(60x60到144x144).
并且假设我们的一个用户在他们的桌面上创建了一个快捷方式.在这种情况下,196x196看起来更好!
在所有转换后的图像旁边,faviconit会给你的示例代码:
<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
但这还不是全部.从Windows 8开始,我们可以创建带有磁贴的网站快捷方式!
<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
上传名为browserconfig.xml的文件(在Windows中启用切片> 8)
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/favicon-70.png"/>
<square150x150logo src="/favicon-150.png"/>
<square310x310logo src="/favicon-310.png"/>
<TileColor>#FFFFFF</TileColor>
</tile>
</msapplication>
</browserconfig>
Joo*_*stS 18
最简单的解决方案是使用一个(!)PNG图像(在2018年).
只需将其添加到文档的头部:
<link rel="shortcut icon" type="image/png" href="/img/icon-196x196.png">
<link rel="shortcut icon" sizes="196x196" href="/img/icon-196x196.png">
<link rel="apple-touch-icon" href="/img/icon-196x196.png">
最后一个链接用于Apple(主屏幕),第二个链接用于Android(主屏幕),第一个链接用于其余部分.
请注意,此解决方案不支持Windows 8/10中的"磁贴".它支持快捷方式,书签和浏览器标签中的图像.
| 归档时间： |
|
| 查看次数： |
374536 次 |
| 最近记录： |