[HTML] iPhone及iPad的加入主畫面,及瀏覽器的shortcut icon

以下2種效果分別是怎麼辦到的呢?

1、在iPhone及iPad經由"加入主畫面",在主畫面上直接產生icon連結
在iPad或iPhone上的主畫面上顯示icon連結

只要準備好相關的圖例:144 * 144、114 * 114、72 * 72、57 * 57,共四張圖檔的png檔,在<head>裡設定以下代碼(只要更改href屬性確定有指到您所設定的圖即可):

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-144.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-114.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-72.png">

<link rel="apple-touch-icon-precomposed" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-57.png">

設定完後,即可測試囉,例圖:
分享按鈕按下後,就可看到加入主畫面的圖示

以上就大功告成啦!

 

2、shortcut icon

shortcut icon

只要在<head>加入以下代碼即可:

<link rel="shortcut icon" href="http://carlos-studio.com/wp-content/uploads/2013/07/favicon.ico">

注意檔名好像一定要是favicon.ico,此檔案是16 * 16的ico圖檔,可從favicon.cc來快速製作。


綜合以上的代碼,其實就是加入底下的代碼至<head>裡,指定好圖檔路徑即完成。

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-144.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-114.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-72.png">

<link rel="apple-touch-icon-precomposed" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-57.png">

<link rel="shortcut icon" href="http://carlos-studio.com/wp-content/uploads/2013/07/favicon.ico">