苹果触摸图标的正确像素尺寸是多少?

发布于 2024-07-04 15:05:03 字数 674 浏览 14 评论 0 原文

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

许多网站似乎都重复说 apple-touch-icon 应该是 57x57 像素,但引用了一个损坏的链接作为其来源。

Hanselmanplaygroundblues 的评论建议使用不同的尺寸,包括 163x163 和 60x60。

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

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

I'm not sure what the correct size should be.

Many sites seem to repeat that the apple-touch-icon should be 57x57 pixels but cite a broken link as their source.

Hanselman's and playgroundblues's comments suggest different sizes including 163x163 and 60x60.

Apple's own apple.com icon is 129x129!

See my related question:
How do I give my web sites an icon for iPhone?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

咆哮 2024-07-11 15:05:03

取决于你想要它有多少细节,它需要有 1:1 的纵横比(基本上 - 它需要是方形的)

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

Depends on how much detail you want it to have, it needs to have the aspect ratio of 1:1 (basically - it needs to be square)

I would go with the Apple's own 129*129

別甾虛僞 2024-07-11 15:05:03

Apple 规范指定了 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 图片。

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

Apple specs specify new sizes for iOS7:

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

Whereas old sizes for iOS6 and prior are:

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

By the way, precomposed icons are deprecated.

As a consequence, to support but new devices (running iOS7) and older (iOS6 and prior), these 8 pictures must be present and the generic code is:

<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">

In addition, you should create a 152x152 picture named apple-touch-icon.png.

You might want to know that this favicon generator can generate all these pictures at once. Full disclosure: I'm the author of this site.

北座城市 2024-07-11 15:05:03

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

You don't have to bother for correct size any more. If you have iTunes artwork file (i.e. file of 1024*1024 size) of your icon, then I have created this application which will provide you all the icons based on information provided here. Get the application from here, and follow the instructions in readme file to create all the required icons for iOS application.

软糯酥胸 2024-07-11 15:05:03

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

I don't think there is a "correct size". Since the iPhone really is running OSX, the icon rendering system is pretty robust. As long as you give it a high-quality image with the right aspect ratio and a resolution at least as high as the actual output will be, the OS will downscale very cleanly. My site uses a 158x158 and the icon looks pixel-perfect on the iPhone screen.

不必你懂 2024-07-11 15:05:03

官方尺寸为57x57。 我建议使用精确的大小,因为加载时占用的内存更少(除非 Apple 缓存缩放后的表示)。 话虽如此,雷克斯是对的< /a> 任何正方形尺寸都可以

The official size is 57x57. I would recommend using the exact size simply due to the fact that it takes less memory when loaded (unless Apple caches the scaled representation). With that said, Rex is right that any square size will work

千と千尋 2024-07-11 15:05:03

截至 2010 年 8 月 3 日,Apple 指南似乎已将“高分辨率”图像(适用于 iPhone 4)纳入其“必需”图标尺寸中。

看起来我们现在需要提供 57x57 和 114x114 图像,以及 640x960 标​​题图像。

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

It seems that Apple guidelines as of August 3, 2010 now include the "High resolution" images (for iPhone 4) in their "required" icon sizes.

Looks like we need to provide both a 57x57 and a 114x114 image now, as well as a 640x960 title image.

See Custom Icon and Image Creation Guidelines (Javascript required) which is part of a whole document:

似最初 2024-07-11 15:05:03

更新列表 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 加

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

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

更新 2013 iOS7:

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

  • 120 x 120 像素
  • iPhone Retina 从 114 x 114 像素更改为 iPad Retina 从 144 x 144 px 到 152 x 152 px

其他分辨率仍然相同

  • 57 x 57 px
  • 对于不带视网膜的 iPad 默认 76 x 76 px

Updated list October 2014, iOS8

List for iPhone and iPad with and without retina

<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"> 

Update 2014 iOS 8:

For iOS 8 and iPhone 6 plus

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

iPhone 6 uses the same 120 x 120 px image as iPhone 4 and 5 the rest is the same as for iOS 7

Update 2013 iOS7:

For iOS 7 the recommended resolutions changed:

  • for iPhone Retina from 114 x 114 px to 120 x 120 px
  • for iPad Retina from 144 x 144 px to 152 x 152 px

The other resolution are still the same

  • 57 x 57 px default
  • 76 x 76 px for iPads without retina
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文