[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:zh:blog\u002Ffavicon-sizes-which-ones-you-need":-1,"article-zh-favicon-sizes-which-ones-you-need":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"favicon-sizes-which-ones-you-need","网站图标尺寸：2025年你真正需要的尺寸","网站图标尺寸的简明指南：16x16、32x32、180x180、192和512，现代浏览器使用哪些尺寸，以及要添加的HTML代码。","2026-10-12","favicon size","favicon-generator","\u003Cp>搜索"favicon size"，你会看到一大堆相互矛盾的数字：16x16、32x32、48x48、64、180、192、256、512。这些列表大多是十年前写的，从未更新过。实际上，一个现代网站只需要大约四个文件，你可以用\u003Ca href=\"\u002Fzh\u002Ffavicon-generator\">网站图标生成器\u003C\u002Fa>一次性生成所有文件——它完全在浏览器中运行，所以你的logo永远不会离开你的电脑。\u003C\u002Fp>\n\u003Cp>以下是每个尺寸的实际用途，以及哪些你可以安全地跳过。\u003C\u002Fp>\n\u003Ch2>仍然重要的尺寸\u003C\u002Fh2>\n\u003Ch3>16x16和32x32——浏览器标签页和书签\u003C\u002Fh3>\n\u003Cp>这是经典的网站图标。16x16是你在拥挤的标签页中看到的样子；32x32用于高DPI屏幕、书签栏和某些地址栏UI。这两个尺寸通常捆绑在单个\u003Ccode>favicon.ico\u003C\u002Fcode>文件中，该文件可以同时包含多个分辨率。Windows还会从同一个\u003Ccode>.ico\u003C\u002Fcode>中提取48x48用于桌面快捷方式，所以包含它的成本几乎为零。\u003C\u002Fp>\n\u003Ch3>180x180——Apple触摸图标\u003C\u002Fh3>\n\u003Cp>当有人在iPhone或iPad上点击"添加到主屏幕"时，Safari会查找180x180的\u003Ccode>apple-touch-icon.png\u003C\u002Fcode>。如果找不到，iOS会截屏你的页面并使用该截图，看起来很糟糕。这个PNG覆盖每个当前的iOS设备，因为系统会根据需要缩小尺寸。\u003C\u002Fp>\n\u003Ch3>192x192和512x512——Android和PWA\u003C\u002Fh3>\n\u003Cp>Android Chrome和可安装的网络应用从你的\u003Ccode>site.webmanifest\u003C\u002Fcode>读取图标。192是主屏幕图标；512用于启动屏幕和应用列表。如果你想让你的网站可安装，你需要两者。\u003C\u002Fp>\n\u003Ch3>SVG——可选但很好用\u003C\u002Fh3>\n\u003Cp>Firefox和Chrome都支持SVG网站图标，它在任何尺寸下都保持清晰，并可以通过文件内的媒体查询响应深色模式。这是一个额外的功能，不是替代品——Safari和旧版浏览器仍然需要栅格版本。\u003C\u002Fp>\n\u003Ch2>你可以跳过的内容\u003C\u002Fh2>\n\u003Cp>64x64、96x96、128x128、整套Windows磁贴图像和数十个遗留的\u003Ccode>apple-touch-icon-76x76\u003C\u002Fcode>风格文件。它们适用于大多已消失的设备。发送二十个图标文件会让你的代码库臃肿，却没有任何可衡量的收益。\u003C\u002Fp>\n\u003Ch2>HTML代码\u003C\u002Fh2>\n\u003Cp>将文件放在网站根目录中，并将其添加到\u003Ccode><head>\u003C\u002Fcode>：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="icon" href="\u002Ffavicon.ico" sizes="any">\n<link rel="icon" href="\u002Ficon.svg" type="image\u002Fsvg+xml">\n<link rel="apple-touch-icon" href="\u002Fapple-touch-icon.png">\n<link rel="manifest" href="\u002Fsite.webmanifest">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>在清单中：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">"icons": [\n  { "src": "\u002Ficon-192.png", "type": "image\u002Fpng", "sizes": "192x192" },\n  { "src": "\u002Ficon-512.png", "type": "image\u002Fpng", "sizes": "512x512" }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>设计16像素的图标\u003C\u002Fh2>\n\u003Cp>最难的部分不是导出，而是完整的logo在16x16尺寸下会变得模糊。有几个技巧可以帮助：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>使用片段，而不是整个logo。\u003C\u002Fstrong> 一个字母、一个字形、一个形状。文字标记在标签页大小下无法阅读。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>从正方形开始。\u003C\u002Fstrong> 如果你的来源是宽的logo，\u003Ca href=\"\u002Fzh\u002Fcrop-image\">先将其裁剪为正方形\u003C\u002Fa>，这样生成器就不会用空白将其添加黑边。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>保持对比度高。\u003C\u002Fstrong> 细轮廓会消失。实心形状能存活下来。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>决定背景。\u003C\u002Fstrong> 透明PNG适应浅色和深色浏览器界面；如果你的标记是深色的，考虑改为给它一个纯色瓷砖。如果你只有平面JPG，你可以在几秒内\u003Ca href=\"\u002Fzh\u002Fremove-background\">删除logo的背景\u003C\u002Fa>。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>注意安全区域。\u003C\u002Fstrong> Android将图标遮罩成圆形和圆角方形，所以在512图稿边缘周围留出大约10%的填充。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>如果你要将网站图标的背景与网站的品牌颜色匹配，\u003Ca href=\"\u002Fzh\u002Fcolor-picker\">图像颜色拾取器\u003C\u002Fa>将从现有截图中提取精确的十六进制值——对\u003Ccode>theme-color\u003C\u002Fcode>元标记也很方便。\u003C\u002Fp>\n\u003Ch2>一次性生成整个集合\u003C\u002Fh2>\n\u003Cp>无需上传：将正方形PNG或SVG拖到\u003Ca href=\"\u002Fzh\u002Ffavicon-generator\">免费的基于浏览器的网站图标生成器\u003C\u002Fa>中，它会在本地生成\u003Ccode>.ico\u003C\u002Fcode>、Apple触摸图标和192\u002F512 PNG，全部在你的标签页中。没有任何内容被发送到服务器，没有注册，你未发布的logo也不会最终存储在别人的存储桶中。\u003C\u002Fp>\n\u003Cp>然后缩小浏览器，查看标签页，问唯一重要的问题：你能看出它是什么吗？\u003C\u002Fp>\n",1791831542353]