Favicon Sizes

Favicon Sizes 尺寸指南

不同平台会读取不同尺寸的图标，FaviconPack 会一次性生成常见尺寸。

Abrir generador Ver acceso a descargas pagas

✓

浏览器标签常用 16x16 和 32x32

✓

ICO 建议包含 16x16、32x32、48x48

✓

PWA 通常需要 192x192 和 512x512

Ejemplo de código HTML

<!-- Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

<!-- Windows Tiles -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="msapplication-config" content="/browserconfig.xml">

Preguntas frecuentes

最重要的 favicon 尺寸是什么？

16x16 和 32x32 是基础尺寸，建议免费开放下载。

为什么还需要 96x96？

部分设备、搜索结果或快捷入口会使用更高分辨率图标。

Lectura relacionada

Favicon Generator

Favicon 生成器

从一张源图生成网站 favicon 所需的基础尺寸和完整接入代码。

ICO Generator

favicon.ico 生成器

favicon.ico 可以把多个尺寸封装在一个文件里，便于兼容浏览器和系统。

Apple Touch Icon

Apple Touch Icon 生成器

Apple Touch Icon 用于 iPhone 和 iPad 把网站添加到主屏幕时显示的图标。