我如何给我的网站一个iPhone的图标?

nodit 发布于 2018-02-07 favicon 最后更新 2018-02-07 01:07 491 浏览

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

已邀请:

nodit

赞同来自:

从苹果开发者连接Safari网页内容指南的iPhone页面Specifying a Webpage Icon for 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.

mid

赞同来自:

为了完整起见,请链接到Scott Hanselman的帖子,其中还包含一些其他提示: Add Home Screen iPhone Icons and Adjust the ViewPort

nodit

赞同来自:

我提出了一个建议,堆栈溢出实现一个苹果触摸图标: Add an apple-touch-icon for Safari on iPhone

nodit

赞同来自:

请参阅 Safari参考资料库 Safari Web内容指南配置Web应用程序页面的 Specifying a Webpage Icon for Web Clip 部分。 ..

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.
您可能希望用户能够添加   您的Web应用程序或网页链接   到主屏幕。这些链接,   由一个图标表示,被称为Web   剪辑。按照这些简单的步骤来   指定一个图标来表示您的网站   应用程序或iPhone OS上的网页。
      
  • 指定整个图标   网站(网站上的每一页),   在PNG格式中放置一个图标文件   调用根文档文件夹   apple-touch-icon.png或   apple-touch-icon-precomposed.png。如果   你用   apple-touch-icon-precomposed.png为   文件名,iPhone OS上的Safari   不会为该图标添加任何效果。
  •   
  • 指定单个图标   网页或更换网站图标   与一个网页特定的图标,添加一个   链接到网页的元素,如:
      <link rel="apple-touch-icon" href="/custom_icon.png"/>结果   在上面的例子中,替换   custom_icon.png与你的图标   文件名。如果你不想要Safari   iPhone OS添加任何效果   图标,用apple-touch-icon替换   apple-touch-icon-precomposed    有关网页图标指标,请参阅iPhone Human Interface Guidelines for Web Applications中的"Create an Icon for Your Web Application or Webpage"

dut

赞同来自:

在您的头部添加以下内容:<link rel="icon" href="/your-icon-url"/>