cv.cm
全部教程

攝影基礎

怎麼做網站圖示 / favicon

網站圖示要在 16 像素還能認出來。把標誌裁成正方形,選鋪滿還是完整放入,再下載經典分頁用的 ICO,以及觸控圖示用的 PNG 壓縮檔。

約 7 分鐘閱讀

今天的結果 一份 favicon.ico(16/32/48)和一份 PNG 壓縮檔(含 180/192/512),在分頁那麼大仍能認出來。

標誌在磁碟上再打開網站圖示。Cover 鋪滿正方形,可能裁切。Contain 留邊。預設白底。不上傳。

打開Favicon 產生
目錄
  1. 選一個縮得很小仍能認的標誌

    花的照片縮到 16 像素就沒了。一個字母、簡單形狀或高對比 logo 才行。畫面太寬,先裁到主體再過來。

    Cover 鋪滿,可能裁切。Contain 放下整個標誌,會留邊。
    Cover 鋪滿,可能裁切。Contain 放下整個標誌,會留邊。
  2. 打開 cv.cm 的網站圖示

    做圖示留在目前分頁。

    打開Favicon 產生
  3. 拖入圖片

    預覽空白,先把 HEIC 轉成 JPG。

  4. 選 Cover 還是 Contain,以及要不要白底

    Cover 鋪滿正方形,可能裁切。Contain 放下整個標誌,會留邊。經典分頁就留著白底。要透明 PNG 再關掉。

  5. 下載 ICO 和 PNG 壓縮檔

    ICO 裡是 16、32、48,給經典分頁。壓縮檔還有 180、192、512,給蘋果觸控圖示和 PWA。原標誌留下。

    ICO 是 16/32/48。PNG 壓縮檔還有 180/192/512。看 16 像素那份。
    ICO 是 16/32/48。PNG 壓縮檔還有 180/192/512。看 16 像素那份。
  6. 打開 16 像素的 PNG

    256 的預覽會騙人。16 像素糊了,就簡化標誌或改 Contain。把 favicon.ico 放到網站根目錄,並在 HTML 裡鏈上 PNG。

常見問題

可以免費線上做網站圖示嗎?

可以。cv.cm 在目前分頁畫,不上傳。

ICO 裡有哪些尺寸?

16、32、48 像素的 PNG,打進一份 favicon.ico。

還要蘋果觸控圖示嗎?

PNG 壓縮檔裡有 180、192、512。在 HTML 裡鏈上,給主畫面圖示用。

會上傳嗎?

不會。關掉分頁就沒了。

能留透明底嗎?

可以。關掉白底。Contain 會在透明底上留邊。