[網頁,前端]網頁圖示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">

參考連結

沒有留言:

Instagram