on 2019-07-03

favicon 使用筆記

隨著 web 發展越來越久

所需要準備的 favicon 等 icon 需要用到越來越多地方了

且這也是一個服務重要的依據

有設定 favicon 就是能夠給人對這個服務有個既定的印象

能夠讓人快速的記憶這個服務

所以不可忽視它在 web 上的使用

這裡會持續記錄需要設定的地方與格式

Wiki Favicon

Suggest

Format PNG

<link rel="shortcut icon" href="https://example.com/myicon.ico">

Safari pin

SVG, 16x16 viewbox

Creating Pinned Tab Icons

iOS add to home screen

Configuring Web Applications

show in Google search result

Update in 2019

會在 mobile browser 加強顯示

Define a favicon to show in search results

PWA

這是 PWA 會在行動裝置顯示的 icon

The Web App Manifest

更新

有網友補充提供服務

https://www.facebook.com/groups/f2e.tw/permalink/2253070994730253/

Favicon checker

Favic-o-Matic