製做方式比較簡單,即在webapphtml
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="apple-touch-icon" href="dwred.png" /> <link rel="apple-touch-icon" sizes="72x72" href="dwred.png" /> <link rel="apple-touch-icon" sizes="114x114" href="dwred.png" /> <link rel="apple-touch-icon" sizes="144x144" href="dwred.png" /> <title></title> </head> <body> </body> </html>
的頁面head中插入如下代碼:android
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />
能夠看到,針對不一樣分辨率的設備將會引用不一樣的png文件,此處png則爲桌面快捷圖標文件。上傳文件到服務器上,用Safari或者Chrome打開網站,按菜單中的添加到主屏幕便可,這裏截圖都是android的web