还没有标志？现在就制作一个
刚起步的项目通常还没有视觉形象，但网站一上线就需要图标。标志制作工具从现有的名称入手：一两个字母、一款从 Google Fonts 中挑选的字体，再加一个背景色，就能得到在 16 像素和 512 像素下都清晰的字母标志。
标志与网站图标制作工具
免费将文字制作成标志：选择配色、Google 字体、渐变和描边，然后下载 SVG 或立即生成网站图标。
从配色方案开始
点击配色方案设置初始颜色，之后可以自由微调。
预览
为什么字母标志效果这么好
缩小到标签页大小时，复杂标志往往会糊成一团。首字母仍然容易辨认，因此许多品牌都使用单个字母作为应用图标。最多使用三个字符，选择较粗的字重，并确保文字与背景有鲜明对比。
整洁的 SVG，文字已转换为轮廓
标志导出为 SVG，文字会转换成矢量轮廓。这对网站图标至关重要：引用外部字体的 SVG 无法正确显示文字，因为浏览器在此场景下不会加载远程资源。生成的文件独立完整、体积小，能无损缩放到图标包所需的所有尺寸。
从标志到完整网站图标
设计好标志后，点击生成按钮即可将其直接发送到网站图标生成器，完整保留透明度和颜色。接着设置 iOS 图标背景、深色模式版本和应用名称，再下载完整图标包。整个过程中，图片不会经过服务器。
标志制作工具常见问题
接下来可以阅读与尝试
探索 LFFavicon 的其他工具，以及解答常见问题的指南。
工具
指南
- 网站图标尺寸：格式与用途网站图标应该生成哪些尺寸？通过实用尺寸表了解 ICO、SVG、iOS、Android 及搜索结果所需的图标。
- 免费将 PNG 转换为 ICO免费将 PNG 转换为多尺寸 favicon.ico。所有操作均在浏览器中完成，图片不会上传到服务器。
- Apple Touch 图标：尺寸、格式与代码了解 Apple Touch 图标的 180×180 尺寸、不透明背景要求、安装标签，以及导致 iOS 图标变黑的常见错误。
- 用 SVG 实现深色模式网站图标黑色标志在深色标签页中消失？使用带 prefers-color-scheme 的 SVG 网站图标，自动显示浅色图形版本。
- 在 HTML 中添加网站图标通过正确的 link 元素、ICO 后备、Apple Touch 图标及网页应用清单，为 HTML 网站添加图标。
- 网站图标不显示或不更新网站图标缺失或一直显示旧版本？检查 URL、格式、标签、缓存、抓取权限和搜索结果要求。
- Next.js App Router 中的网站图标使用 icon 和 apple-icon 文件约定、元数据及清单配置 Next.js App Router 图标，了解文件位置与验证方法。
- SVG 网站图标指南制作独立完整、正方形且清晰的 SVG 网站图标，在 HTML 中声明并添加 ICO 后备，测试浅色与深色效果。