网站图标的 ICO 与 PNG

ICO 通用但较旧; PNG 是现代的,但需要显式链接。以下是如何同时使用两者。

4 分钟阅读

ICO:通用后备

每个桌面浏览器都会获取 /favicon.ico,而无需您执行任何操作。它是一个可以容纳多种分辨率的容器。

Windows 快捷方式和文件资源管理器依赖于 .ico,因此即使您不关心网络图标,也可以为操作系统提供一个。

PNG:任何密度下的像素完美

当您将 PNG 与 <link rel="icon"sizes="..."> 链接时,它会在高 DPI 显示器上清晰地呈现。

对 Web 清单使用 192×192 和 512×512 PNG,对 apple-touch-icon 使用 180×180。

结论:两者都用

提供多尺寸 .ico 以实现通用支持,以及用于高清显示器的 PNG 变体和 PWA 安装提示。在顶部添加 SVG 以获得最清晰的可缩放图标。

试用工具

继续阅读

探索FetchFavicon

类别

转换器

公用事业

指南

教程