Fruga
中文
前端工作室网站图标与应用图标切换工具

Favicon 与应用图标

一幅图，生成浏览器和手机需要的每种尺寸，包括 iOS 不透明图标和 Android 可裁切图标，这两种最容易出问题。Logo 只在当前标签页中绘制，绝不上传。

  • 文件: 8 个图标 + manifest
  • 输入: PNG、JPG、WebP 或 SVG
  • 你的 Logo: 不会离开当前标签页

你的 Logo

方形图片效果最佳，SVG 的效果最清晰。

你选择的 Logo

当前文件：placeholder.svg

背景Logo 后面的填充色。iOS 图标和可裁切图标始终会填充。
应用 manifest 设置

你将得到

预览已缩放以适应显示，每个文件均按标注尺寸生成。点击任一图标可单独下载。

  • favicon.ico

    48×48

    16、32 和 48 合并在一个文件中，适用于旧版浏览器和书签

  • favicon-16x16.png

    16×16

    标签页，最小尺寸

  • favicon-32x32.png

    32×32

    高密度屏幕上的标签页

  • favicon-48x48.png

    48×48

    Windows 任务栏和快捷方式

  • apple-touch-icon.png

    180×180

    iOS 主屏幕，透明部分会显示为黑色，因此该图标带填充

  • icon-192.png

    192×192

    Android 主屏幕

  • icon-512.png

    512×512

    启动画面和应用列表

  • icon-maskable-512.png

    512×512

    Android 自适应图标，图案保持在安全圆内

将此内容粘贴到页面的 <head> 中

代码片段和 manifest 也包含在 .zip 中。

<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

site.webmanifest

{
  "name": "My site",
  "short_name": "Site",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

为什么 iOS 图标要填充背景

Safari 会把透明的主屏幕图标合成到黑色背景上，用深色墨水绘制的 Logo 会因此消失。因此无论其他图标如何设置，apple-touch-icon.png 在这里始终带有背景。

“可裁切”是什么意思

Android 会把自适应图标裁切成启动器使用的形状，如圆形、超椭圆或圆角方形，每条边最多可能被裁掉百分之二十。因此可裁切文件会把图案完全留在安全区内，并留有充足边距。

关于 favicon.ico

这里的 .ico 文件在容器内以 PNG 形式包含 16、32、48 像素的图像，自 Vista 起所有浏览器都能读取。它仍然值得提供：书签、旧版浏览器和部分订阅阅读器会直接请求 /favicon.ico，并忽略 link 标签。

常见问题

我到底需要哪些 favicon 尺寸？
需要包含 16、32、48 像素图像的 favicon.ico、标签页 PNG 图标、180 像素的 iOS 图标，以及带可裁切版本的 Android 图标。本页面用一幅图生成全部这些文件，并附带清单文件和可直接粘贴的 link 标签。
为什么 iOS 图标要有背景？
因为 Safari 会把透明图标合成到黑色背景上，用深色墨水绘制的 Logo 会因此消失。所以无论其他尺寸如何设置，这里生成的 apple-touch-icon.png 始终带有背景。
Android 的可裁切图标是什么意思？
Android 会把自适应图标裁切成启动器的形状，如圆形、圆角方形或方形，每条边最多可能被裁掉约百分之二十。可裁切文件把图案保持在安全区内，因此在任何启动器上都不会被裁坏。
我还需要 favicon.ico 文件吗？
需要，它仍然值得提供。书签、旧版浏览器和部分订阅阅读器会直接请求 /favicon.ico 并忽略 link 标签。这里生成的文件在容器内以 PNG 形式包含 16、32、48 像素图像，自 Vista 起所有浏览器都能读取。