首页 / 知识

关于html：如何为我的网站提供iPhone图标？

2023-04-11 15:09:00

How do I give my websites an icon for iPhone?

如何为创建的网站在iPhone上正确显示的图标？

为了完整起见，链接到Scott Hanselman的文章，其中还包含一些其他提示：

添加主屏幕iPhone图标并调整ViewPort

摘自《 Apple开发者连接Safari iPhone网页内容指南》页面为Web剪辑指定网页图标...

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.webp.

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:

In the above example, replace
custom_icon.webp 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.

请参阅Safari参考资料库中" Safari Web内容指南"的"配置Web应用程序"页面的"指定Web剪辑的网页图标"部分。

Specifying a Webpage Icon for Web Clip

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 iOS.

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.webp.

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:

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

Note: Safari on iOS 7 doesna€?t add effects to icons. Older versions of Safari will not add effects for icon files named with the -precomposed.webp suffix. See First Steps: Identifying Your App in iTunes Connect for details.