返回部落格
教學

一個在 2026 年隨處可用的 Favicon 套組

六種尺寸、一個 .ico、一個 manifest — 你真正需要的一切，以便發佈一個在 2026 年的每個瀏覽器、iOS 主螢幕和 Windows 工作列上看起來都正確的 favicon。

Admin2026年4月23日1 分鐘閱讀34

Favicon 看起來很簡單。發佈一個，然後會出現一百個邊界情況：iOS 主螢幕圖示模糊、Android Chrome 分頁是錯誤的顏色、Windows 釘選顯示模糊的 16×16。本指南切穿雜訊，涵蓋你在 2026 年需要的確切內容 — 不多不少。

最小可行套組

六個資產涵蓋每個會顯示你網站圖示的表面：

  • favicon.ico — 多尺寸容器，內部有 16×16、32×32、48×48（舊版瀏覽器、Windows 檔案總管、釘選分頁）。
  • favicon-16x16.png、favicon-32x32.png — 現代瀏覽器分頁。
  • apple-touch-icon.png（180×180）— iOS 主螢幕、Safari 閱讀列表。
  • android-chrome-192x192.png、android-chrome-512x512.png — Android 主螢幕、PWA 安裝提示。
  • site.webmanifest — PWA 組態，指向 Android 圖示並定義主題顏色。

就這樣。其他一切（Safari 釘選分頁 SVG、舊 Apple touch 變體、Windows 磚片圖像）都是舊版。現代瀏覽器可優雅地回退到 192 或 512 PNG。

為什麼 .ico 在 2026 年仍然需要

.ico 檔案是一個二進制容器，可以以不同尺寸容納多個 PNG 影像。當瀏覽器要求 /favicon.ico（有些瀏覽器預設仍然會這樣做）時，它在一個請求中獲得所有三種尺寸。渲染器為目前的表面選擇最適合的 — Windows 檔案總管的 48×48、瀏覽器分頁的 16×16。

重新命名為 .ico 的 PNG 只包含一種尺寸。它大多有效，因為瀏覽器寬容，但 Windows 檔案總管和一些電子郵件用戶端要麼會以模糊方式呈現它，要麼會拒絕顯示它。如果你想要一致性，請發佈一個真實的 .ico。

site.webmanifest 的作用

當使用者將你的網站新增到他們的 Android 主螢幕或將其安裝為 PWA 時，瀏覽器會讀取 site.webmanifest 以了解已安裝的應用程式應該如何顯示。它定義：

  • name / short_name — 圖示下方的標籤。
  • icons — 在哪個尺寸使用哪個 PNG。
  • theme_color — 應用程式開啟時狀態列的顏色。
  • background_color — 啟動期間的啟動畫面背景。
  • display — 通常是 standalone，以便應用程式開啟時不帶瀏覽器色彩。

沒有 manifest，Android 會回退到 apple-touch-icon 並在瀏覽器視窗內顯示你的網站。有的話，它看起來像一個原生應用程式。

HTML 片段

每個檔案都放在你的網站根目錄中。每個網站在 <head> 中都需要這個區塊：

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">

設計 16×16

你漂亮的詳細標誌在 16 像素處消失。製作在該尺寸清晰易讀的 favicon 的規則：

  • 一個形狀。圓形、正方形或強烈的縮寫。避免複合形式。
  • 高對比度。前景和背景必須至少是 WCAG AA 分離。微妙的漸層消失。
  • 安全邊距。保留 10–20% 的填充。瀏覽器通常會自行新增 1px 邊框。
  • 文字？在 16px 處，單一粗體字母比完整單詞效果更好。

aukimi Favicon 生成器在 30 秒內從一個影像或一個字母生成所有六個檔案和 HTML 片段。它生成一個真實的多尺寸 .ico（按照 Microsoft ICONDIR 規格），而不是重新命名的 PNG。上傳、選擇你的尺寸、下載一個無 zip 的捆綁、貼上片段 — 完成。

常見錯誤

  • 從 CDN 提供 .ico 但沒有快取標頭。瀏覽器積極快取 favicon。在重新設計後使用版本化 URL（?v=2）來強制重新整理。
  • 每個子網域都有不同的圖示。頂點處的單個 favicon.ico 通常是使用者所期望的 — 不要分割你的身份。
  • 忘記 theme-color meta。Mobile Chrome 將瀏覽器色彩著色以符合此值。跳過它會使你保留預設灰色。

一個好的 favicon 在最好的意義上很無聊 — 使用者會在它遺失或錯誤時注意到，在它正確時從不注意。將六個檔案發佈並繼續前進。

#favicon#web-design#pwa#branding

喜歡這篇文章嗎？

ShareHN

相關文章

industry

創意堆棧剛剛崩塌：2026年4月下旬的一週AI工具浪潮

在2026年4月27日至5月4日期間，Adobe、Luma、Novi、fal、Figma、Canva、HeyGen和Anthropic在八天內都跨越了同一個門檻。以下是發佈的內容、其含義，以及它對試圖整合這一切的瀏覽器型創意套件的影響。

2026年5月4日閱讀文章
industry

2026年AI音樂和音效：獨立遊戲音頻中真正有效的方案

三年前，獨立遊戲音頻要麼來自授權的免版稅庫（便宜、通用、每款遊戲聽起來都一樣），要麼雇用作曲家（效果好、費用高）。到2026年，AI生成的配樂已經可以發行。這裡是哪些工具真正有效——以及人類作曲家仍然勝出的地方。

2026年5月2日閱讀文章
industry

2026年AI網格生成：遊戲管線中的真實應用

圖像轉3D在十八個月內從「詭異demo」進化到「在獨立遊戲中實際應用」。以下是Tripo、Meshy、Rodin和Hyper3D在實際生產中的表現——以及3D藝術家仍然勝過模型的地方。

2026年4月28日閱讀文章
返回部落格