指南Logo 设计
Logo 设计 · BRANDSTUDIO GUIDE

为什么 Favicon 不能只是缩小的 Logo?

在 16 像素内保留最有辨识度的部分,并正确导出浏览器需要的文件。

5 分钟更新于 2026-10-23
01

Favicon 是独立的微型识别系统

浏览器标签里的图标通常只有 16 或 32 像素。完整字标、细线和复杂渐变会在这个尺寸失去作用。

优先选择 Logo 中轮廓最清楚的一部分,也可以为小尺寸重新画一个更粗、更简化的版本。

02

从三种来源开始

你可以上传现有图片、输入一个字母或从项目中选择正式 Logo。使用现有 Logo 时,应检查它是否有独立图形标;没有时再创建专用图标。

03

同时检查浅色与深色标签页

透明背景图标在不同浏览器主题中可能失去边界。必要时增加实色底板或为浅色、深色环境分别准备版本。

  • 16×16 检查轮廓
  • 32×32 检查细节
  • 180×180 检查主屏图标
  • 深浅背景均可辨认
04

导出后不要只看 ICO

完整图标包通常还包括 PNG、ICO、Apple Touch Icon 和 manifest 信息。将它们放入网站后再做一次真实浏览器验证。

FINAL CHECK

完成前检查

没有使用完整长字标

16px 下仍能看清主要轮廓

透明背景不会在深色主题消失

导出包含常用尺寸和 manifest

已在真实浏览器标签中验证

CONTINUE IN BRANDSTUDIO

把方法用到你的项目里

创建 Favicon