如何创建网站图标
现代网站图标不仅仅是 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 中的硬刷新。检查书签栏、选项卡和主屏幕安装。