设置 iPhone 书签图标 | CSS-Tricks

将此代码放在您的 <head> 部分中，并将 href 属性设置为指向一个 57px x 57px PNG 文件的图像。

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

为了防止 iPhone 添加自己的光泽效果

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

Scott

# 2010 年 3 月 1 日

我一直想知道如何做到这一点，谢谢！

另外值得注意的是，图像会自动获得圆角和轻微的斜角效果……

Tony

# 2010 年 3 月 8 日

如果您安装了 WPTouch iPhone 主题插件，只要上传了图像，它会自动为您完成这项工作。

black-light-studio

# 2011 年 4 月 18 日

有了 iPhone 4G 等设备，图标大小可以达到 128 像素左右。
所以我个人会使用 128 像素，甚至更大，但不要太大，因为它会拖慢带宽。

Rob

# 2011 年 5 月 25 日

您还可以为不同的平台指定不同的图标，如下所示……

<!-- For non-Retina iPhone, iPod Touch, and Android 2.2+ devices: -->
<link rel="apple-touch-icon" href="//dummyimage.com/57x57.png">
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon" sizes="72x72" href="//dummyimage.com/72x72.png">
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon" sizes="114x114" href="//dummyimage.com/114x114.png">
<!-- No such device exists yet, so if this value is used,
    it means the sizes attribute is ignored: -->
<link rel="apple-touch-icon" sizes="228x228" href="//dummyimage.com/228x228.png">

Reyna Wilcox

# 2011 年 11 月 29 日

我们实际上在这个网站上为“书签网站”做了一些非常有趣的事情。我讨厌那些按钮，我认为它们已经过时了，现在不再需要了。但在 http://www.elegantcandlegifts.com 网站上，我认为我们做得很好，使其发挥作用。

Reyna

Jorge

# 2012 年 1 月 2 日

感谢您的分享，我用它来设计这个网站。 NYNE Spot Design Cheers

Damon

# 2012 年 9 月 5 日

下面的代码对我来说似乎不起作用。

< !-- For non-Retina iPhone, iPod Touch, and Android 2.2+ devices: -- >
 <link rel="apple-t-ouch-icon" href="//dummyimage.com/57x57.png">
 <!-- For first-generation iPad: -- >
 <link rel="apple-touch-icon" sizes="72x72" href="//dummyimage.com/72x72.png" >
 <!-- For iPhone 4 with high-resolution Retina display: -- >
 <link rel="apple-touch-icon" sizes="114x114" href="//dummyimage.com/114x114.png" >
 <!-- No such device exists yet, so if this value is used,
    it means the sizes attribute is ignored: -- >
 <link rel="apple-touch-icon" sizes="228x228" href="//dummyimage.com/228x228.png" >

我使用的是运行 5.0.1 的 iPhone 4。这篇文章中的代码自发布以来有变化吗？

Nader Mah

# 2012 年 9 月 25 日

对我来说，挑战不是图标，而是来自网站标题的自动文本。
我们能将其更改为其他内容吗？

mathias sonderskov

# 2012 年 10 月 1 日

在 php 中

<title>
<?php
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
echo '123-mobile'; //text for iLol
}else{
echo 'Welcome to 123-homepage!';
}
?>
</title>

可以为 iPod、iPad 等创建类似的功能。

Abel La O Fernandez

评论永久链接# 2012 年 12 月 20 日
iOS 6 提供了对自定义 Web 应用程序标题的支持。
Abel La O Fernandez

评论永久链接# 2012 年 12 月 20 日
这是代码，它在我的上一条评论中没有显示出来。
```
<meta name="apple-mobile-web-app-title" content="App Title">
```

Juan

# 2014 年 1 月 31 日

太棒了，谢谢！

评论

发表评论 取消回复

发表评论取消回复