我不确定正确的尺寸是多少。

许多网站似乎都在重复苹果触摸图标应为57x57像素,但引用断开的链接作为其来源。

Hanselman游乐场的评论建议大小不同,包括163x163和60x60。

苹果自己的apple.com图标是129x129!

请参阅我的相关问题: 如何为我的网站提供iPhone图标?

===============>>#1 票数:41 已采纳

截止到2010年8月3日,Apple准则似乎将“高分辨率”图像(适用于iPhone 4)包括在“必需”图标大小中。

看来我们现在需要同时提供57x57和114x114的图片以及640x960的标题图片。

请参阅自定义图标和图像创建指南 (需要Javascript),该指南是整个文档的一部分:

===============>>#2 票数:5

Apple开发人员连接的Google缓存-Web Apps开发中心-设计内容 ...

创建一个Web剪辑书签图标

iPhone和iPod touch允许用户在其主屏幕上将Web Clip书签保存到您的站点。

要为网站的所有页面指定书签图标,请在Web服务器的根目录中放置一个名为“ apple-touch-icon.png”的PNG图像-类似于网站图标的“ favicon.ico”。

要覆盖特定网页上的站点书签图标,请在页面的<head>元素中插入与<link rel =“ apple-touch-icon” href =“ / customIcon.png” />类似的<link>元素。

书签图标的尺寸应为57x57像素。 如果图标的大小不同,则会缩放并裁剪以适合。

Safari会自动将图标与标准的“玻璃”覆盖层进行合成,使其看起来像内置的iPhone或iPod应用程序。

===============>>#3 票数:3

取决于您要拥有多少细节,它的长宽比必须为1:1(基本上-必须为正方形)

我会选择苹果自己的129 * 129

===============>>#4 票数:2

我无法提供这些尺寸的数据源,因为官方参考是在ADC的锁定和密钥之下。

但是,许多非NDA网站都提供了有关如何创建图标的教程。 例如这里:

===============>>#5 票数:2

作为其Safari Web内容指南的一部分,Apple实际上有一个公开可用的页面,称为“ 为Web Clip指定网页图标 ”(需要Javascript),其中涵盖了所有分辨率及其实现。

===============>>#6 票数:1

苹果规格为iOS7指定了新尺寸:

  • 60x60
  • 76x76
  • 120x120
  • 152x152

而iOS6和更低版本的旧尺寸为:

  • 57x57
  • 72x72
  • 114x114
  • 144x144

顺便提一下,不建议使用预先组合的图标。

因此,要支持新设备(运行iOS7)和更旧的设备(iOS6及更低版本),必须提供这8张图片,并且通用代码为:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

另外, 您应该创建一个名为apple-touch-icon.png的152x152图片

您可能想知道,这个图标生成器可以一次生成所有这些图片。 完全披露:我是该网站的作者。

===============>>#7 票数:1

官方尺寸为57x57。 我建议使用确切的大小,仅仅是因为它在加载时会占用较少的内存(除非Apple缓存缩放的表示形式)。 话虽如此, 雷克斯(Rex)正确的是任何正方形都可以

===============>>#8 票数:0

我认为没有“正确的尺寸”。 由于iPhone确实在运行OSX,因此图标呈现系统非常强大。 只要您给它提供具有正确长宽比和至少与实际输出一样高的分辨率的高质量图像,操作系统就会非常干净地缩小尺寸。 我的网站使用158x158,并且该图标在iPhone屏幕上看起来是像素完美的。

===============>>#9 票数:0

更新列表2014年10月,iOS8

适用于有和没有视网膜的iPhone和iPad的列表

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

更新2014 iOS 8:

对于iOS 8和Iphone 6 plus

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

iPhone 6使用与iPhone 4和iPhone 5相同的120 x 120 px图像,其余与iOS 7相同

2013年iOS7更新:

对于iOS 7,建议的分辨率已更改:

  • 适用于iPhone Retina从114 x 114像素到120 x 120像素
  • 适用于iPad Retina从144 x 144像素到152 x 152像素

其他分辨率还是一样

  • 默认为57 x 57像素
  • 对于没有视网膜的iPad为76 x 76像素

===============>>#10 票数:0

您不必再为正确的尺寸而烦恼。 如果您的图标具有iTunes艺术品文件(即1024 * 1024大小的文件),那么我已经创建了此应用程序,它将根据此处提供的信息为您提供所有图标。 从此处获取应用程序 ,并按照自述文件中的说明创建iOS应用程序所需的所有图标。

===============>>#11 票数:0

NilObject的链接将我引到了makentosh.com 上关于您的Icon的精彩博客文章Catchup

...当然,所有这些不一致之处最终都必须得到解决,对吗? 好吧2.0很好地处理了它! 最后,57x57实际上就是57x57。

...每个像素...完美呈现。

  ask by Zack Peterson translate from so

未解决问题?本站智能推荐:

4回复

如何为我的网站提供iPhone的图标?

如何为我创建的网站设置iPhone上正确显示的图标?
1回复

未指定尺寸时,苹果触摸图标的尺寸是多少

我读到有很多苹果触摸图标大小。 就像这样: 在我购买的主题中,我的代码如下所示: 因此,问题是:图标应为多大(如果未指定大小),那么专家将如何处理它? 我的猜测是,我将使图标为144x144,并且上述所有图标均会适当缩小! *参考: apple-touch-ic
2回复

正确定义网站图标

假设我有一个带有要用于网站的图标的SVG。 我应该将其转换成什么尺寸和格式? 我的HTML看起来如何? 我知道如何指定一个简单的16x16图标,但我的目标是图标应能正常工作,并在尽可能多的用例中看起来不错。 例如,图标,书签,iPhone触摸图标,桌面图标,Windo
1回复

异步加载网页图标-跨浏览器解决方案?

在当今混乱的网络图标环境中(令人惊讶的是) .svg图标尚未获得广泛支持,人们可能会倾向于在头部添加大量元素,以指向任意数量的 favicons icons apple-touch-icons safari-pinned-tabs mstiles
2回复

Dashcode Web剪辑图标,我已经尝试了所有操作,但不会显示

我无法显示我的破折号Web剪辑图标,它只显示safari生成的图标。 我尝试使用破折号来设计它,然后使用代码 我还尝试将名为apple-touch-icon.png的文件添加到根文件夹,但仍然无法正常工作。 我已经在模拟器,iphone和ipad上运行了该站点,并且自定义Web剪辑图
1回复

如何使用Javascript或Jquery获取网站图标/ Apple-touch图标和网页标题?

我可以将整个网页插入div或IFrame如下所示: 但是我只需要Iframe图标和标题。 我不知道如何仅获取这些项目favicon icon / Apple-touch-icon和网站title 。 例如www.stackoverflow.com ,我只需要其title和fa
1回复

WebClip图标无法在主屏幕上工作

我知道,这不是一种新技术,这个问题在不同的变化中被问过几次。 但他们(也不是谷歌搜索)都无法帮助我解决问题。 我正在使用以下链接: 这是一个WordPress主题,所以我不能简单地将图标放在Web根目录中。 图标实际上做的工作,例如,当我的网站添加到我的iPad的收藏,我可以看
2回复

为什么这个苹果触摸图标不起作用?

我的网站上有以下代码: 当我在Firefox中查看源并单击href属性时,图标显示(因此它不是404错误)。 将代码添加到http://website.com/mobile/index.php或http://website.com/mobile/page.php等页面并将该页面添加
3回复

我的网站上的苹果触摸图标不会在我的iPhone上更新

我最近在我的网站上添加了苹果触控图标。 当我将网站添加到我的iPad上的收藏夹或我妻子的4S时,它会使用图标。 我认为这只是因为我之前从未在这些设备上为该网站添加了书签。 在我的iPhone上,我之前在我的收藏夹中为该网站添加了书签,并使用该网站名称的通用第一个数字/字母作为触摸图标。
1回复

Web Clip / Apple Touch图标显示问题

我在某些设备上无法正常使用苹果触摸图标时遇到困难。 有问题的设备通常是iPhone,我相信它们是6S。 我的图标设置如下: 由于无法在Android设备上重现该问题,因此我获得了iPhone 6S进行测试。 我能够复制该问题,因此我从上方添加了以下行: 当我刷新测试设备