網站圖示產生

圖示全套與 favicon.ico

選擇檔案

將產生的圖示

選擇圖片後會顯示結果。

16×16: 瀏覽器分頁與書籤
32×32: 瀏覽器分頁與書籤
48×48: 瀏覽器分頁與書籤
180×180: iPhone 與 iPad 主畫面
192×192: Android 主畫面與網頁資訊清單
512×512: Android 主畫面與網頁資訊清單
favicon.ico: 16×16 · 32×32 · 48×48

貼到網站的 HTML

把下載的檔案放在網站根目錄，再把下面幾行放進 <head>。

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

全部在瀏覽器中處理，圖片不會上傳，也不會儲存。儲存的檔案不含原圖的拍攝時間、位置(GPS)、相機等資訊(EXIF)。

使用說明

用一張圖產生整套網站圖示：瀏覽器分頁用的 16、32、48px，iPhone 主畫面用的 180px，Android 用的 192、512px PNG，以及 favicon.ico，還附上可貼進 `<head>` 的 HTML。全部在瀏覽器中產生，不會上傳。

什麼時候用

為新建的網站或部落格設定分頁圖示。
更換 logo 後重新產生整套圖示。
連手機「加入主畫面」時顯示的圖示也一併準備好。

使用方法

選擇原圖，建議接近正方形且不小於 512px（最小 48px）。
各個尺寸都會預覽，並標註該尺寸用在哪裡。
按全部下載（ZIP），或只下載 favicon.ico。
解壓後放到網站根目錄，並把附帶的 HTML 貼進 `<head>`。

需要知道的事

favicon.ico 內含 16、32、48px 三種尺寸，舊瀏覽器和 Windows 檔案總管會讀取這個檔案。
原圖不是正方形時不會裁切，而是置中放置、四周留透明 — 把 logo 裁掉是更糟的結果。
比原圖更大的尺寸是放大產生的，可能模糊，出現這種尺寸時頁面會提示您。
16px 下細線和文字會糊成一團，圖形越簡單在小尺寸下越清楚。
全部在瀏覽器中產生 — 您的 logo 不會被上傳。

常見問題

ico 和 png 該用哪個？

兩個都放最穩。新瀏覽器讀 PNG，舊瀏覽器和 Windows 檔案總管找 favicon.ico。ZIP 裡兩者都有，附帶的 HTML 會正確關聯。

換了圖示但顯示的還是舊的。

瀏覽器會長時間快取圖示。請強制重新整理（Ctrl+Shift+R），或在檔名後加 ?v=2 之類改變網址，就會重新讀取。

原圖不是正方形會怎樣？

不裁切，置中放置，四周留透明，這樣整個 logo 都看得到。想鋪滿方形，請先用「圖片裁切」按 1:1 裁好。

可以做透明背景的圖示嗎？

原圖是透明 PNG 就會保持透明。不過深色主題的瀏覽器裡，深色 logo 容易看不見，有底色的圖往往更保險。