[前端]網頁圖示favicon、觸摸圖示apple-touch-icon到底該怎麼寫

說到網頁的小圖示，之前沒研究還挺混亂的
到底該用多大的圖示才夠用呢？
檔案類型又該用ico還是png？
程式碼要怎麼寫？
另外還要做手機版的是怎麼做？

在這邊我先紀錄手機版圖示(觸摸圖示apple-touch-icon)，favico再分另外一篇寫

觸摸圖示apple-touch-icon是什麼？

觸摸圖示apple-touch-icon，這圖示是這幾年智慧型手機盛行才衍生出來的
是給使用者儲存網頁快捷到手機主畫面的功能：點我參考
存放在手機桌面的那個“圖示”

我非常喜歡手機的這個功能，因為手機容量太少了非常討厭下載App
直接存網頁捷徑在桌面、像一個假的App又不怎麼占空間、好棒棒R

但不過就是個手機用的圖示，在開發網頁的時候，因為apple系列要求的尺寸不一樣，網路上許多人說要這樣寫：

要準備落落長的一堆size，我看到快崩潰
一點都不想塞這麼多東西在我的網頁裡，不過就是個手機圖示阿QnQ
所以後來去爬文整理了一下....到底該放多大的size當"觸摸圖示"呢

規定是

規則

檔案格式：使用png或ico
mete內屬性寫上關係：rel="apple-touch-icon"
mete內屬性寫上路徑：href="touch-icon.png"
大小：放目前市面上裝置要求的最大size就可以了

其他細節：Apple系列的反光、圓角

Apple手機會自行上圓角、反光、陰影

如要拿掉反光的話，在rel後方加一段-precomposed

rel="apple-touch-icon-precomposed"

檔案格式

關於網頁頁籤的favicon，

目前瀏覽器(IE版本11)：png、gif、ico皆通用了
IE10以下：png、gif這兩種格式不支援

而ico是全部都支援(rel寫shortcut icon的話)，所以還是建議使用ico檔最方便。

關於尺寸

Apple系列

Apple系列的裝置大小，官網是有規定各種裝置要求的推薦size，但要求size沒有的話，會用要求尺寸再大一號的size，如果要求尺寸再大一號的size也沒有的話，會直接用最大的size。
也就是說直接放最大size就好了。

IPhone6 Plus目前最大 180px
IPad Pro 167px
IPad&IPad mini是 152px

Android的手機

Android的手機會依瀏覽器(chrome、yahoo、現在才知道原來是看瀏覽器規定不是看系統)的不同，要求不同大小的size。

以常用的Chrome for Android來看，官方指引是說要求192x192。

結論

而apple系列最大要求是180、常用的Chrome for Android是192

結論是直接用最大的192x192就好了(20170423更新)

程式碼

結論就是在html的<head>裡面加上這兩行~

<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">

<link rel="shortcut icon" sizes="16x16" href="favicon.ico">