Favicon / 网站图标制作

浏览器标签、收藏夹、手机桌面上的那个小图标。一张图(或一个 emoji)进来, favicon.ico + 全套 PNG + HTML 代码出去,图片不上传。

1. 图标从哪来

把图片拖到这里,或点击选择

PNG / JPG / WebP / SVG,建议 512×512 以上、正方形

2. 样式

边距6%
背景
图片适配

3. 长这样(真实尺寸预览)

512

👆 你的浏览器标签图标已经换成它了 —— 这就是 favicon 唯一的用处:让人在一堆标签里认出你。

4. 贴到网站里

把图标文件放到网站根目录,然后在 <head> 里加这些:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
site.webmanifest(PWA / 安卓桌面图标用)
{
  "name": "",
  "short_name": "",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#2563eb",
  "background_color": "#ffffff",
  "display": "standalone"
}

🔒 图片和生成过程都在你这台设备上,页面不发送任何请求。