我想将单张图片用作常规图标和iPhone / iPad友好图标。
这可能吗?如果链接到常规浏览器图标,iPad友好的72x72 PNG会变焦吗?或者我是否必须使用单独的16x16或32x32图像?
答案 0 :(得分:1344)
对于IE,Microsoft recommends 16x16, 32x32 and 48x48 packed in the favicon.ico file。
对于iOS,Apple recommends specific file names and resolutions,对于运行iOS 8的最新设备,最多180x180。
Android Chrome primarily uses a manifest and also relies on the Apple touch icon.
IE 10 on Windows 8.0 requires PNG pictures and a background color和IE 11 on Windows 8.1 and 10 accepts several PNG pictures declared in a dedicated XML file called browserconfig.xml
。
Safari for Mac OS X El Capitan introduces an SVG icon for pinned tabs
其他一些平台会查找具有各种分辨率的PNG文件,例如96x96 picture for Google TV或228x228 picture for Opera Coast。
请查看此favicon pictures list以获取完整参考。
TLDR:此favicon generator可以一次生成所有这些文件。生成器也可以实现为a WordPress plugin。完全披露:我是本网站的作者。
答案 1 :(得分:119)
我没有看到此处列出的任何最新信息,所以这里是:
现在回答这个问题,如果你希望你的图标在任何地方看起来都很棒,那么2个不会这样做。请参阅以下尺寸:
16 x 16 - 浏览器的标准尺寸
24 x 24 - 用户界面的IE9固定网站尺寸
32 x 32 - IE新页面选项卡,Windows 7+任务栏按钮,Safari阅读列表侧栏
48 x 48 - Windows站点
57 x 57 - iPod touch,iPhone最高3G
60 x 60 - iPhone触控至iOS7
64 x 64 - Windows站点,HiDPI / Retina中的Safari阅读器列表侧栏
70 x 70 - Win 8.1 Metro tile
72 x 72 - iPad触控至iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhone视网膜触控至iOS6
120 x 120 - iPhone视网膜触摸iOS7
128 x 128 - Chrome网上应用店应用,Android
144 x 144 - 用于固定网站的IE10 Metro磁贴,iPad视网膜高达iOS6
150 x 150 - Win 8.1 Metro tile
152 x 152 - iPad视网膜触摸iOS7
196 x 196 - Android Chrome
310 x 150 - 赢得8.1宽的地铁砖
310 x 310 - 赢得8.1地铁砖
答案 2 :(得分:79)
我不确定浏览器是否/如何扩展大图标,但W3C建议以下 1 :
您选择的图像格式必须为16x16像素或32x32像素,使用8位或24位颜色。图像格式必须是PNG(W3C标准),GIF或ICO之一。
1 w3c.org: How to Add a Favicon to your Site (Draft in development)。
答案 3 :(得分:53)
实际上,要使您的favicon在所有浏览器中正常运行,您必须以正确的尺寸和格式添加10个以上的文件。
我的朋友和我为此创建了一个应用程序!你可以在faviconit.com
找到它我们这样做了,所以人们不必手动创建所有这些图像和正确的标签,创建所有这些用于惹恼我很多!
希望它可以帮到你!
答案 4 :(得分:6)
你可以在同一个文件中有多种尺寸的图标。我经常创建48,32和16像素的favicon(.ico
文件)。您可以添加任何尺寸的图像。问题是,iPhone会使用ico
文件吗?
ico
也支持透明度,但我不确定它是否像PNG一样是alpha通道;可能更像GIF,它在哪里或者它已经关闭。
答案 5 :(得分:2)
根据Wikipedia Article on Favicon, Internet Explorer仅支持favicon的ICO格式。
我会坚持使用两个不同的图标。
答案 6 :(得分:2)
据我了解,这几种解决方案中没有一种是完美的。使用 favicon生成器确实是一个不错的解决方案,但是它们的数量太多了,很难选择。我想补充一点,如果您希望网站启用PWA,则还需要提供by Google Devs所示的512x512图标:
图标,包括192px和 512px版本
我没有遇到很多执行该标准的网站图标生成器(firebase does,但是很多事情并没有执行)。因此,解决方案必须是许多其他解决方案的组合。
我不知道今天是在2020年初提供16x16、32x32还是有意义的。我猜它在某些情况下仍然很重要,例如,如果您的用户由于某种原因仍在使用IE(这种情况仍然发生在某些出于某些原因而不会迁移到较新浏览器的私有公司中)
答案 7 :(得分:1)
我担心每个分辨率都需要单独的文件。在广告系列监视器上有一篇非常好的文章,描述了他们如何为每个iOS设备创建和实现他们的图标:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
答案 8 :(得分:1)
favicon不一定是16x16或32x32。你可以创建一个80x80或100x100的图标,只要确保两个值都是相同的尺寸,显然不要太大或太小,选择合理的尺寸。
答案 9 :(得分:0)
我可以提醒大家问题是:
<块引用>我想将单个图像用作常规收藏夹图标和 iPhone/iPad 友好收藏夹图标?这可能吗?如果链接到常规浏览器图标,iPad 友好的 72x72 PNG 会缩放吗?还是我必须使用单独的 16x16 或 32x32 图片?
答案是:是的,这是可能的!是的,它将被缩放。不,您不需要“常规浏览器图标”。请看这个答案:https://stackoverflow.com/a/48646940/2397550