如何创建网站图标
现代网站图标不仅仅是 16×16 的图像。以下是在每个浏览器、操作系统和设备上看起来都很清晰的设置的完整工作流程。
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
什么是网站图标？
网站图标是浏览器在选项卡、书签栏和历史列表中显示的小图标。在移动设备上，它是主屏幕图标。在 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 中的硬刷新。检查书签栏、选项卡和主屏幕安装。
常见问题
What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.
What size should my favicon source image be?
Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.
Do I need both favicon.ico and PNG files?
Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.
Where do I put favicon files on my website?
Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.