SVG 转 Favicon
把 SVG Logo 变成完整的 favicon 图标集 —— favicon.ico、apple-touch-icon 和网页应用图标 —— 在浏览器中清晰栅格化。不上传任何内容。
隐私优先:每张图片都在你的浏览器中本地处理。任何内容都不会上传、存储或传输到任何服务器。
进来的是矢量,出去的是每一种位图尺寸
SVG 是最理想的 favicon 源文件:它与分辨率无关,因此每个图标尺寸都可以直接从原始图形栅格化,而不是从一张本就很小的位图上再采样。放入你的 SVG,每个输出尺寸 —— 16、32、48、180、192 和 512 像素 —— 都会按其原生尺寸从矢量绘制,边缘因此保持锐利,而不是糊成一团。标签页里的图标是显得用心还是像块污渍,差别就在这里。
为什么你仍然需要 .ico
现代浏览器完全可以直接使用 SVG favicon,但老一些的浏览器和大量工具 —— 订阅阅读器、聊天链接预览、桌面快捷方式 —— 找的还是 favicon.ico。从同一个 SVG 把两者都生成出来,就万无一失了。加上内边距,挑一个方形、圆角或圆形遮罩以及背景色,然后下载完整图标集,附带可直接粘贴的 HTML 代码片段。
常见问题
- 制作 favicon 时我的图片会被上传吗?
- 不会。favicon.ico、PNG 图标和清单文件全部通过 Canvas API 在你的浏览器中本地生成。你的图片绝不会离开你的设备。
- 我会得到哪些尺寸和文件?
- 一个多分辨率的 favicon.ico(16、32 和 48px),16、32、48、180(apple-touch-icon)、192 和 512px 的 PNG 图标,一个 site.webmanifest,以及一段可粘贴到你 <head> 中的 HTML 代码。
- 我可以把 PNG 或 SVG 转换成 ICO 吗?
- 可以。放入一张 PNG、JPG、SVG 或 WebP,即可下载一个真正的 favicon.ico。SVG Logo 会先在本地以高分辨率栅格化。
- 什么样的图片效果最好?
- 简洁、高对比度的方形 Logo 图片。非方形图片会被居中裁剪以适配;可用内边距和形状控件把它调整成你想要的样子。
- 我该如何安装 favicon?
- 把套件解压到你网站的根目录,并把提供的 HTML 代码粘贴到页面的 <head> 中。大多数浏览器会自动识别 favicon.ico。