星期日, 十一月 14, 2010

网页小技巧:在网站设置苹果图标

  随着苹果iPhone、iPod、iPad的大量使用,越来越多的人喜欢使用该设备内置的Safari 浏览网站,当用户把网站添加到主屏幕,使得该网站类似于一个应用程序的时候,会需要一个网站的图标。默认是自动将网页截屏并缩放到相应尺寸生成的图标,这显然并不好,我们可以自己设定这个图标。

  具体方法是,在网站首页的header部分,增加如下语句

  <link rel="apple-touch-icon" href="http://www.williamlong.info/images/apple-touch-icon.png"/>

  或者

  <link rel="apple-touch-icon-precomposed" href="http://www.williamlong.info/images/apple-touch-icon.png" />

  其中logo.png为一个 72X72 像素 PNG 格式的图标,如果你将图标命名为 apple-touch-icon.png 并放在根目录下,不需要任何语句,iPad 也会直接调用该图标。