如何创建网站图标

现代网站图标不仅仅是 16×16 的图像。以下是在每个浏览器、操作系统和设备上看起来都很清晰的设置的完整工作流程。

6 分钟阅读

什么是网站图标?

网站图标是浏览器在选项卡、书签栏和历史列表中显示的小图标。在移动设备上,它是主屏幕图标。在 Windows 上,它是快捷方式图标。

现代网站提供多种分辨率和格式,因此每个表面都可以获得清晰的渲染。

准备您的源图像

从至少 512×512 的方形图像开始 — 理想情况下是 SVG 和方形 viewBox。缩小尺寸后,任何较小的物体都会变得模糊。

避免细线和小文字。它们在 16×16 时消失。

生成多尺寸 .ico

单个 favicon.ico 内的捆绑包 16、32、48、64、128 和 256。浏览器会自动选择合适的尺寸。

我们的网站图标生成器在不到一秒的时间内完成了客户端的操作。

添加 HTML 标签

将 favicon.ico 放入您的站点根目录中。然后在 <head> 中添加 SVG、apple-touch-icon 和清单图标以完成设置。

在每个浏览器中验证

Chrome、Safari、Firefox 和 Edge 中的硬刷新。检查书签栏、选项卡和主屏幕安装。

试用工具

继续阅读

探索FetchFavicon

类别

转换器

公用事业

指南

教程