現在我們要使用手機上某個應用時，通過點擊屏幕上的圖標就可以運行。但是對基於HTML的Web應用來說，運行起來就比較麻煩了，用戶必須先打開瀏覽器，然后訪問想使用的應用程序站點。現在我們想把一個指定的Web應用綁定到界面上的一個圖標，用戶通過點擊界面上的圖標就可以啟動對應的Web應用了。
但是不同瀏覽器對於觸碰圖標的反應是不一致的。在這里，我們將探索不同瀏覽器對於點擊圖標啟動的不同反應，從而使點擊圖標啟動Web應用的特性能夠覆蓋到更多的瀏覽器。
下載源代碼例子（http://pan.baidu.com/s/1o6AavAM 提取碼：8nyq）中，有一個圖標包是為不同移動設備准備的，里面有圖片文件：
apple-touch-icon.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-precomposed.png
新建ch02r01.html
<!doctype html> <html> <head> <title>Mobile Cookbook</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png"> <link rel="shortcut icon" href="icons/apple-touch-icon.png"> </head> <body> <header> </header> <div id="main"> </div> <footer> </footer> </body> </html>
從iOS4.2.1起，iOS提供了一個新的功能，我們可以通過設置sizes屬性來為不同的設備提供不同的圖標。
對於iPhone4使用的高分辨率Retina屏幕，使用"114x114"大小的圖標。
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114-precomposed.png">
對於iPad，使用"72x72"大小的圖標。
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72-precomposed.png">
對於未使用Retina屏幕的iPhone和Android2.1以上版本的設備，使用"57x57"大小的低分辨率圖標。
<link rel="apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png">
對於諾基亞Symbian 60的設備來說，一個快捷鍵圖標只是用來告訴移動設備這個圖標的位置。
<link rel="shortcut icon" href="icons/apple-touch-icon.png">
這是根據iOS的桌面快捷圖標制作的，對於Android上安裝了Chrome for Android也可以達到同樣的效果。用Safria或Chrome打開網站，按主菜單中的添加到主屏幕即可。返回到手機桌面時，就可以看到這個的webapp的圖標了。
疑問：
rel屬性是否支持多值？如果支持的話，我們就可以把示例中的最后兩行合並為：
<link rel="shortcut icon apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png">
曾經嘗試過這種寫法，但是移動端瀏覽器根本無法識別這樣的寫法。你可能還看過別人像下面這么寫：
<link rel="apple-touch-icon-precomposed" media="screen and (min-resolution:150dpi)" href="icons/apple-touch-icon-114x114-precomposed.png">
一個開源項目Mobile Boilerplate，該項目的目的是為移動設備的前端開發提供一個穩健
的基礎模板，它已經囊括了現階段所有的場景，以及一些未來可能出現的場景。
https://github.com/h5bp/mobile-boilerplate/blob/master/index.html#L21
關於觸摸式圖標的一切
這次關於觸摸式圖標的大部分觀點都來自於Mathias Bynens。可以看一下他發表過的一篇
文章"關於觸摸式圖標的一切":http://mathiasbynens.be/notes/touch-icons