apple-touch-icon

发表于

背景

一个pc站点反馈偶尔会受到 apple-touch-icon.png 文件的404请求，这个是属于ios的特殊 favicon 图标请求文件。

在没有明确配置apple-touch-icon时，ios设置会自动尝试去根目录加载这些文件， 由于是pc项目所以就没配置这个图标，所以就 404 这里记录下 apple-touch-icon 的相关配置。

配置

使用如下配置设置 apple-touch-icon 即可，图片格式使用 png

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

apple-touch-icon 支持size 配置，用来适配不同的设备

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--大多数网站使用以下HTML来指定一个图标-->
<link rel="shortcut icon" href="/gb_logo_icon.png">

<!--ios iphone-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">

<!--ios ipad-->
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">

<!--ios retina iphone-->
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">

<!--ios retina ipad-->
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">

icon 会被默认添加高光效果，如果你不需要高光可以使用 apple-touch-icon-precomposed 图标。

比如:

1
2
<!--ios iphone-->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57×57-precomposed.png">