网站的 Apple Touch 图标 [英] Apple Touch icon for websites

问题描述

到目前为止，我一直在脑海中像这样包含 Apple Touch 图标的行:

但是，在问答中Apple-touch-icon 的正确像素尺寸是多少?" 在接受的答案中指出，根据 Apple 的指南，现在需要三个图像.

那么如何将这些插入到代码的头部呢?

解决方案

极简解决方案 - 推荐

一种常见的做法是创建一个 180x180 的图标，这是预期的最高分辨率，然后让 iOS 设备根据需要缩小它.它声明为:

详尽的解决方案 - 不推荐

Apple 规范指定新的适用于 iOS7 的尺寸:

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

也适用于 iOS8:

• 180x180

此外，不推荐使用预先组合的图标.

因此，为了同时支持新设备(运行 iOS7)和旧设备(iOS6 及更早版本)，通用代码为:

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

此外，您应该创建一个名为 apple-touch-icon.png 的 180x180 图片.>

请注意，如果在 HTML 代码中没有找到有趣的东西(有点像 IE 用 /favicon.ico).所以保持文件名在上面很重要.同样重要的是要考虑 Android/Chrome 也在使用这些图片.

您可能想知道这个 favicon generator 可以一次创建所有这些图片.完全披露:我是本网站的作者.

Up to now, I've been including the line for the Apple Touch icon in my head like this:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

However, in the Q&A "What are the correct pixel dimensions for an apple-touch-icon?" it is stated in the accepted answer that three images are now needed according to Apple's guidelines.

So how would one go about inserting these into the head section of the code?

解决方案

Minimalist solution - Recommended

A common practice is to create a single 180x180 icon, which is the highest expected resolution, and let the iOS devices scale it down as needed. It is declared with:

<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

Exhaustive solution - Not recommended

Apple specs specify new sizes for iOS7:

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

And also for iOS8:

• 180x180

In addition, precomposed icons are deprecated.

As a consequence, to support both new devices (running iOS7) and older (iOS6 and prior), 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">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

In addition, you should create a 180x180 picture named apple-touch-icon.png.

Note that iOS looks for URL like /apple-touch-icon-76x76.png, if it does not find interesting stuff in the HTML code (a bit like what IE is doing with /favicon.ico). So it is important to keep the file names are they are above. It is also important to consider that Android/Chrome is also using these pictures.

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

这篇关于网站的 Apple Touch 图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！