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

如何为我创建的网站设置iPhone上显示的图标?

0
额外 编辑
意见: 1
我还在 apple-touch-icon 信息。 html“rel =”nofollow noreferrer“> Safari Web Content Guide 以及用于全屏模式的 apple-mobile-web-app-capable 元标记。
额外 作者 Kevin Hakanson,
额外 作者 Blazemonger,

5 答案

从iPhone的网页。指定一个苹果开发的Safari Web内容指南网页图标的Web Clip ...

The user can add a web application or webpage link to the Home screen. These links, represented by an icon, are called web clips. Follow these simple steps to specify an icon to represent your web application or webpage on iPhone.

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png.

To specify an icon for a single webpage, or replace the website icon with a webpage-specific icon, add a link element to the webpage as in:

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

In the above example, replace custom_icon.png with your icon filename.

See "Create an Icon for Your Web Application or Webpage" in iPhone Human Interface Guidelines in iPhone Human Interface Guidelines for webpage icon metrics.

Note: The web clip feature is available in iPhone 1.1.3 and later.

0
额外
链接死了。
额外 作者 Alfo,

我提出了一个建议,Stack Overflow实现了一个apple-touch-icon:

为iPhone上的Safari添加苹果触摸图标

0
额外

请参阅 为Safari Web内容指南配置Web应用程序页面指定Web Clip的Web页面图标部分 >在 Safari参考资料库中...

Specifying a Webpage Icon for Web Clip

iPhone OS Note: The Web Clip feature is available in iPhone OS 1.1.3 and later. The apple-touch-icon-precomposed.png filename is available in iPhone OS 2.0 and later.

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iPhone OS.

  • To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone OS won?t add any effects to the icon.

  • To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:
    <link rel="apple-touch-icon" href="/custom_icon.png"/>
    In the above example, replace custom_icon.png with your icon filename. If you don?t want Safari on iPhone OS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.

See "Create an Icon for Your Web Application or Webpage" in iPhone Human Interface Guidelines for Web Applications for webpage icon metrics.

0
额外

为了完整起见,请链接到Scott Hanselman的帖子,其中还包含一些其他提示:

添加主屏幕iPhone图标和调整视见

0
额外

Add this in your head section:<link rel="icon" href="/your-icon-url"/>

0
额外