apple-touch-icon 访问 502

今天早上刚到公司,服务器运维的同学就告知这几天日志里频繁出现几个问题,其中一个就是苹果设备引起的 apple-touch-icon.png 和 apple-touch-icon-precomposed.png 访问502的问题。

我们的服务器是 Nginx + uWSGI,服务器的日志中偶尔会出现 /apple-touch-icon.png 502 和 /apple-touch-icon-precomposed.png 502。一看这两个路径,没什么印象,代码里也确实没有。网上找了下,大概猜测了下,就用 iPhone4s 验证了下,果然是这样。

苹果的iOS设备特制了 apple-touch-icon 私有属性,添加该属性,在iPhone、iPad 和 iTouch 上的Safari 浏览器上,可以使用“添加到主屏”按钮,将网站添加到主屏幕上,方便用户以后访问。点击这个按钮的时候,浏览器就会尝试从服务器去获取图片文件。如果有的话就是生成的快捷方式的图标,如果没有,会对当前网页进行截图,来作为图标。

总之,这个过程中会试图获取 apple-touch-icon.png 和 apple-touch-icon-precomposed.png。默认都是从根路径获取,除非你在网页上告知浏览器,图片在其他路径。如下:

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

更好更完善的写法是区分图片尺寸,供不同设备调用:

<link rel=”apple-touch-icon” sizes=”57×57″ href=”touch-icon-iphone.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone4.png” />
<link rel=”apple-touch-icon” sizes=”144×144″ href=”apple-touch-icon-ipad3-144.png” />

大致就是这样。