網站需要哪些圖示檔?
- favicon.ico:瀏覽器分頁上的經典小圖示。這個檔案裡同時包含 16、32、48 像素三種尺寸,每個瀏覽器都會挑最清楚的那張。
- apple-touch-icon.png(180 × 180):把網站加到 iPhone、iPad 主畫面時使用。
- android-chrome-192x192.png 與 512x512.png:Android 和可安裝的網頁應用程式使用,寫在 site.webmanifest 裡。
讓 favicon 清楚好認的訣竅
favicon 非常小,越簡單越好:一個粗體字、一個 emoji 或乾淨的 Logo 標誌,效果都比細節很多的圖片好。看看 16 px 的預覽,如果在那個大小認不出是什麼,就再簡化一點。Apple 會把透明的地方補成黑色,設計有透明背景時,建議幫圖示加上背景色。
用 emoji 當 favicon
輸入任何 emoji 再選個背景色就行。emoji 會用你目前裝置的字型來畫,所以會是 Apple、Google 或 Microsoft 的風格;存成 PNG 之後,在任何地方看起來都一樣。
圖片會上傳嗎?
不會。所有處理都在你自己的瀏覽器裡完成,圖片不會離開你的裝置。頁面載入後就算斷網也能繼續用。