返回博客
教程

一个在2026年通用的网站图标集合

六个尺寸，一个 .ico，一个 manifest — 这是你在2026年需要的一切，确保你的网站图标在每个浏览器、iOS主屏幕和Windows任务栏上都显示正确。

Admin2026年4月23日1 分钟阅读34

网站图标看起来很简单。上传一个后，却会出现一百个边界情况：iOS主屏幕图标模糊、Android浏览器标签页颜色错误、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触摸图标变体、Windows瓷贴图像）都已过时。现代浏览器可以优雅地回退到192或512的PNG。

为什么2026年仍要使用 .ico

.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 并在浏览器窗口内显示你的网站。有了manifest，它看起来就像一个原生应用。

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 设计

你精美详细的logo在16像素时会消失。制作在这个尺寸下清晰易读的网站图标的规则：

  • 一个形状。 一个圆形、一个正方形或一个有力的单字缩写。避免复合形式。
  • 高对比度。 前景和背景必须至少达到WCAG AA的分离度。细微的渐变会消失。
  • 安全边距。 留出10–20%的填充。浏览器通常会添加自己的1px边框。
  • 文字？ 一个单独的加粗字母在16px时的效果比完整单词好得多。

aukimi网站图标生成器可以在30秒内从一张图像或一个字母生成全部六个文件和HTML代码片段。它生成一个真正的多尺寸 .ico（按照Microsoft ICONDIR规范），而不是重命名的PNG。上传、选择尺寸、下载无需解压的包、粘贴代码片段 — 完成。

常见错误

  • 从CDN提供 .ico 但没有缓存头。 浏览器会积极缓存网站图标。使用版本化的URL（?v=2）在重新设计后强制刷新。
  • 每个子域使用不同的图标。 单个 favicon.ico 在顶点域通常是用户期望的 — 不要分散你的身份。
  • 忘记 theme-color meta标签。 移动Chrome会将浏览器界面颜色染成这个值的颜色。跳过它会留下默认的灰色。

好的网站图标无聊得最好 — 用户会注意到它什么时候丢失或错误，永远不会注意到它什么时候正确。获得这六个文件并继续前进。

#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在十八个月内完成了蜕变。以下是Tripo、Meshy、Rodin和Hyper3D在实际生产中的表现——以及3D艺术家仍然击败模型的地方。

2026年4月28日阅读文章
返回博客