跳至内容
PicsSizer.com LogoPicsSizer.com
设计

如何制作网站图标：适用于所有浏览器和设备的完整指南

学习如何创建可在所有浏览器、移动设备和平台上运行的网站图标，包括正确的尺寸、格式以及要添加到您网站的 HTML 代码。

PicsSizer Team

PicsSizer · 2026年4月13日 · 7 最小阅读量

网站图标（favicon，即“收藏图标”的缩写）会出现在浏览器标签页、书签和移动设备主屏幕上。它是一个虽小但重要的品牌标识点，但要在所有浏览器和设备上正确实现却相当复杂。以下是具体操作方法。

什么是网站图标（Favicon）？

网站图标（favicon）是与网站关联的小图标。它会显示在：

  • 在浏览器标签页中，页面标题旁边。
  • 在浏览器的书签和历史记录中
  • 在 iOS/Android 主屏幕上，当用户保存您的网站时（Apple 触摸图标）
  • 在 PWA 安装程序中作为应用图标
  • 在搜索引擎结果中（有时）

一套完整的网站图标设置需要多种尺寸和格式，以涵盖所有这些情况。

所需的网站图标尺寸

尺寸用途
16×16 像素浏览器标签页（标准）
32×32 像素浏览器标签页（高 DPI），任务栏
48×48 像素Windows 网站图标
180×180 像素苹果触控图标（iOS 主屏幕）
192×192 像素安卓 Chrome 浏览器主屏幕
512×512 像素PWA 启动画面，高分辨率上下文
SVG现代浏览器（无限可缩放）

第一步：从高分辨率源图像开始

请创建或导出尺寸至少为 512×512 像素的正方形 PNG 格式徽标/图标，并添加透明背景。这将作为您生成所有较小尺寸图像的源文件。

便于使用网站图标的设计技巧：

  • 保持简洁——复杂的设计在 16×16 的屏幕上难以辨认。
  • 使用高对比度——浅色背景搭配深色图标，反之亦然。
  • 避免使用细线——细线在尺寸较小时会消失。
  • 在 16×16 分辨率下测试 — 在设计工具中缩小尺寸以验证可读性

步骤 2：生成所有尺寸的网站图标

与其手动调整每个所需尺寸，不如使用网站图标生成器。PicsSizer 的网站图标生成器 可以读取您的源图像并生成完整的图标包：

  1. 上传您的 512×512（或更大）的源 PNG 图片。
  2. 预览每种尺寸的外观
  3. 下载包含所有必需尺寸的完整网站图标包

步骤 3：添加 HTML

请将以下标签添加到 HTML 的 <head> 部分：

<!-- Standard favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Android / PWA manifest -->
<link rel="manifest" href="/site.webmanifest" />

第四步：创建 Web 应用程序清单

对于 Android 主屏幕图标和 PWA 支持，请创建 site.webmanifest 文件：

{
  "name": "Your Site Name",
  "short_name": "SiteName",
  "icons": [
    {
      "src": "/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

SVG 图标方法

对于现代浏览器而言，SVG 格式的网站图标是理想之选：

  • 无限可扩展 — 在任何分辨率下都清晰锐利
  • 文件体积小——通常小于 2 KB
  • 支持深色模式 — 您可以在 SVG 中使用 CSS 媒体查询
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

在 SVG 中使用媒体查询来实现深色模式：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: white; }
    }
    .icon { fill: black; }
  </style>
  <rect class="icon" width="32" height="32" rx="4" />
</svg>

所有现代浏览器（Chrome、Firefox、Safari 14+、Edge）都支持 SVG 网站图标。

解决常见网站图标问题

网站图标未显示：

  • 检查文件是否存在于 href 中指定的路径。
  • 强制刷新浏览器（Ctrl+Shift+R / Cmd+Shift+R）
  • 检查浏览器开发者工具的网络选项卡，查看 favicon 请求是否出现 404 错误

网站图标在电脑端显示，但在移动端不显示：

  • 确保已为 iOS 设置 apple-touch-icon 。
  • 确保 Android 的 Web 清单文件存在并已链接

更新后仍显示旧版网站图标：

浏览器会大量缓存网站图标。请添加一个清除缓存的查询字符串： href="/favicon.png?v=2"

网站图标模糊或像素化：

  • 从更高分辨率的源图像（最低 512×512）重新生成
  • 检查您是否针对每种情况使用了正确的大小

完整的网站图标清单

  • 源图像尺寸为 512×512 像素（透明 PNG 格式）
  • favicon.ico（ICO 文件中包含 16×16 + 32×32 像素，适用于旧版 IE 浏览器）
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png (180×180)
  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • favicon.svg（可选，但推荐）
  • site.webmanifest
  • HTML <link> 标签位于 <head> 中

使用 PicsSizer 的网站图标生成器 从单个图像生成整个图标包，或者查看 网站图标大小指南 获取完整参考。

常见问题解答

网站图标（favicon）应该有多大？
浏览器标签页的最小图标尺寸为 16×16 像素。然而，现代的图标设置通常包含多种尺寸：浏览器图标为 16×16、32×32 和 48×48 像素；苹果触控图标为 180×180 像素；安卓/PWA 清单文件为 192×192 和 512×512 像素。建议从一张 512×512 像素的源图像开始，并以此生成所有尺寸的图标。
网站图标（favicon）应该采用什么格式？
现代浏览器支持 ICO、PNG 和 SVG 格式的网站图标。推荐的做法是：使用 SVG 格式的网站图标（可无限缩放，文件体积小），32×32 像素的 PNG 格式作为备用，以及一个 180×180 像素的 PNG 格式的苹果触控图标。包含 16×16 和 32×32 像素图标的 ICO 文件则适用于旧版浏览器。
为什么我的网站图标在浏览器中不显示？
常见原因：网站图标文件路径不正确、HTML链接标签缺失或type属性错误，或者浏览器缓存了旧的网站图标。尝试强制刷新页面（Ctrl+Shift+R 或 Cmd+Shift+R）以强制浏览器重新加载网站图标。
我需要ICO文件吗？还是可以使用PNG文件？
现代浏览器（Chrome、Firefox、Safari、Edge）都支持 PNG 格式的网站图标。ICO 文件仅用于支持旧版 IE 浏览器。如果您不打算使用 IE 浏览器，32×32 像素的 PNG 图片完全可以用作浏览器标签页的图标，您可以完全省略 ICO 文件。
一个好的网站图标应该是什么样的？
一个好的网站图标（favicon）应该是你的logo或品牌的简化版本，在16×16像素和32×32像素的尺寸下都能清晰辨认。避免使用过小的文字、复杂的渐变和过于精细的细节——它们在小尺寸下会变得难以辨认。单个字母、简单的图标或醒目的形状是最佳选择。
返回所有文章