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

时间:2008-08-04 19:02:37

标签: html ios favicon apple-touch-icon

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

6 个答案:

答案 0 :(得分:8)

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

Add Home Screen iPhone Icons and Adjust the ViewPort

答案 1 :(得分:5)

来自Apple Developer Connection Safari网页内容指南for iPhone页面Specifying a Webpage Icon for Web Clip ...

  

用户可以添加Web应用程序或   网页链接到主屏幕。这些   链接,由图标表示,是   称为网络剪辑。遵循这些简单   指定要表示的图标的步骤   您的网络应用程序或网页   iPhone。

     

指定整个图标   网站(网站上的每一页),   放置PNG格式的图标文件   调用的根文档文件夹   苹果触摸的icon.png。

     

指定单个图标   网页,或替换网站图标   使用特定于网页的图标,添加一个   将元素链接到网页,如:

     

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

     

在上面的例子中,替换   custom_icon.png带有您的图标   文件名。

     

请参阅“为您的网站创建图标”   应用程序或网页“在iPhone中   iPhone中的人机界面指南   人机界面网页指南   图标指标。

     

注意:网络剪辑功能是   适用于iPhone 1.1.3及更高版本。

答案 2 :(得分:4)

请参阅 Safari中 Safari Web内容指南配置Web应用程序页面的 Specifying a Webpage Icon for Web Clip 部分参考图书馆 ...

  

指定Web Clip的网页图标

     
    

iPhone OS注意:网络剪辑功能     适用于iPhone OS 1.1.3和     后来。该     apple-touch-icon-precomposed.png     文件名在iPhone OS 2.0中可用     以后。

  
     

您可能希望用户能够添加   您的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

  •   
     

请参阅"Create an Icon for Your Web Application or Webpage"中的iPhone Human Interface Guidelines for Web Applications了解网页图标指标。

答案 3 :(得分:2)

将此添加到您的头部:<link rel="icon" href="/your-icon-url"/>

答案 4 :(得分:1)

我已经建议Stack Overflow实现一个苹果触摸图标:

Add an apple-touch-icon for Safari on iPhone

答案 5 :(得分:0)

我使用RealFaviconGenerator为许多浏览器和平台生成图标和代码。