畫面・功能Favicon・網站小圖示
網站圖示（Favicon）
網站圖示（Favicon）是顯示在瀏覽器分頁、搜尋結果和書籤中的網站小圖示。
就像貼在店門上的小小Logo貼紙，雖然小，卻能讓人知道這是您的店。
再多說一點
沒有網站圖示的話，分頁上會出現空白紙張的圖案，看起來比較不專業。
Google會在搜尋結果的網站名稱旁一起顯示網站圖示。依照Google的說明，最好使用大於48×48像素的正方形圖片。
客人把網站加到手機主畫面時使用的圖示，最好也一起做好。
網站圖示（Favicon）要做幾像素？
網站圖示通常不是一種尺寸就搞定，而是依顯示位置準備幾種合適的尺寸。因為瀏覽器分頁、Google搜尋結果、手機主畫面使用的尺寸各不相同。
Google搜尋中心建議網站圖示做成正方形（1:1），並準備大於48×48像素的尺寸，讓它在各種畫面上都清楚。如果使用網頁應用程式設定檔（manifest），web.dev建議至少放入192×192和512×512的圖示。
下表是常用的準備清單。實際需要的檔案會因網站的製作方式略有不同，和製作公司一起決定即可。
網站圖示一旦決定，最好長期使用。客人是靠分頁和書籤上的圖示形狀記住店家的，經常更換反而更難找。
表格可以左右滑動查看
| 顯示位置 | 常用尺寸 | 格式 |
|---|---|---|
| 瀏覽器分頁・書籤 | 32×32（含16×16） | ICO或PNG、SVG |
| Google搜尋結果 | 大於48×48（例如96×96、192×192） | PNG・ICO等，正方形 |
| iPhone加入主畫面 | 通常為180×180 | PNG (apple-touch-icon) |
| Android主畫面・網頁應用程式 | 192×192, 512×512 | PNG（manifest圖示） |
網站圖示要用ICO、PNG還是SVG格式？
現在多以PNG為基本，需要時再一併放ICO和SVG。Google表示支援ICO・PNG・GIF・JPEG等多種格式。
ICO是老格式，一個檔案可以包含多種尺寸，幾乎所有瀏覽器都讀得到。SVG放大也不會失真，但還不是所有地方都支援，所以同時放PNG比較保險。
iPhone在主畫面上不用一般的網站圖示，而是使用另一個名為「apple-touch-icon」的圖示。這個圖示要用填滿的底色而不是透明背景，在主畫面上才會好看。
SVG網站圖示也可以做成配合深色模式改變顏色。不過各瀏覽器支援程度不同，如果不是非要不可，做一個在淺色・深色畫面都看得清楚的設計會比較簡單。
網站圖示怎麼製作、怎麼放到網站上？
只要有Logo檔案，幾個步驟就能做好。不論自己做還是交給製作公司，知道流程就比較容易確認成品。
現在有些網站製作工具或框架，只要把圖示檔放進指定資料夾，就會自動產生連結程式碼。需不需要自己加程式碼，問製作公司就可以了。
大尺寸的原始檔一定要保存好。之後需要新尺寸時，把小檔案放大會變模糊。
用和網站圖示相同的設計，統一分享預覽圖片和社群大頭貼，客人不管在哪裡看到，都能輕易認出是同一家店。
- 01從Logo中挑出縮小後還認得出來的部分（第一個字、象徵圖形）。
- 02在正方形畫布上把那個部分放大配置，邊緣只留一點留白。
- 03先做一個像512×512這樣的大原始檔，再從中輸出需要的小尺寸。
- 04確認縮小到16×16・32×32時形狀是否還看得出來，糊掉的話就把線條加粗。
- 05在網站首頁的head區塊加入「icon」・「apple-touch-icon」的連結程式碼。
- 06分別在瀏覽器分頁、手機加入主畫面、淺色・深色分頁畫面上確認。
為什麼Google搜尋結果沒有顯示網站圖示？
大多是漏掉了Google規定的某個條件。Google說明，網站圖示的連結程式碼必須放在網站首頁，而且Google搜尋機器人要能同時讀取首頁和網站圖示檔案。
每個網站網址（主機）只會認定一個網站圖示，子路徑（例如網址/shop）的首頁不會另外認定。也很重要的是，不要經常更改網站圖示檔案的網址。
即使條件都符合，也不會馬上更新。Google表示重新讀取可能需要幾天到幾週，用Search Console的網址審查工具申請首頁索引，可能會稍微快一點。也要知道，即使符合條件，也不保證一定會顯示。
如果搜尋結果顯示的是預設圖示而不是您的圖示，多半是Google還沒找到網站圖示，或認為它不符合條件。請逐一重新確認上述條件。
不同行業的網站圖示要怎麼設計？
網站圖示是讓人在數十個分頁中找到您店家的標記，所以比起行業圖案，店家獨有的造型更有用。咖啡杯或剪刀這類常見圖案，很容易和別家店分不出來。
顏色只用Logo的一個代表色，縮小後最清楚。漸層或細線在16像素的尺寸下幾乎看不見。
做好後，實際在多個分頁之間打開來比較看看。在常用網站的圖示旁邊，能不能一眼看到自己的圖示，是最可靠的標準。
- 咖啡廳：把店名的第一個字放進品牌色的圓形裡。
- 美髮店：只取出Logo中的象徵圖形，用粗線重新繪製。
- 工作室：手寫字Logo縮小後讀不出來，所以只用一個字母縮寫。
- 網路銷售：很多客人會同時開好幾個購物網站分頁，所以加大色彩對比，讓圖示更醒目。
網站圖示最常犯的錯誤有哪些？
最常見的錯誤，是把橫向長條Logo直接塞進正方形裡，結果看起來非常小。只在透明背景放黑色Logo，在深色分頁畫面上看不見的情況也很多。
也有網站製作工具的預設圖示一直沒換掉的情況。上線前只要看一眼分頁就知道，請一定要確認。
換了網站圖示檔案，自己的電腦上卻還是舊的，大多是因為瀏覽器存了舊圖示。用別的瀏覽器或無痕視窗打開，就能確認有沒有更新。
關於網站圖示，要向製作公司確認什麼？
上線前向製作公司確認以下四件事，不管在分頁・搜尋・手機主畫面都會清楚顯示。
- 瀏覽器分頁・Google搜尋・手機主畫面用的圖示都會製作嗎？
- 有沒有加上底色或外框，讓它在深色畫面上也看得清楚？
- 有沒有擋住Google搜尋機器人讀取網站圖示檔案？
- 可以拿到原始檔（大尺寸）嗎？
舉例來說
- 如果工作室的Logo是橫向長條形，網站圖示就只取第一個字或象徵圖形來使用。
確認這幾點就好
- 瀏覽器分頁上是否顯示我們的Logo
- 縮小之後是否還認得出來
- 在深色背景上是否也看得清楚
我的店需要嗎？
所有網站都需要。
在ISSYMO
如果還沒有Logo，可以透過「Logo設計」選項，連同Logo一起把網站圖示做好。
查看選項常見問題
參考資料
最後更新日