免费 · 无需注册 · 服务端运行

从任意图片 一键生成完美网站图标

将图片转换为专业 favicon,支持 SVG、PNG、JPG 等所有主流格式。下载包含全部尺寸的完整 favicon 安装包,在任何设备和浏览器上都能完美显示。

极速处理· SVG 支持· 多种格式

上传您的图片

拖放图片到此处或点击浏览,我们将生成您需要的全部 favicon 尺寸。

将图片拖到此处

或点击浏览文件

选择文件
PNGJPGGIFWEBPBMPSVGICO≤10MB
正在生成 favicon 安装包…
抱歉,该文件无法处理。请使用 10 MB 以内的方形 PNG、JPG、GIF、WebP、BMP 或 SVG 图片。
favicon preview

您的 favicon 安装包已就绪

ZIP 内含 ICO、PNG、Apple 图标、Android 图标和 web manifest。

下载 favicon 安装包

完美 Favicon 所需的一切

一个专业的 favicon 生成器,提供制作清晰、随处可用图标所需的全部工具与格式。

极速处理

使用优化的转换引擎,秒级处理图片,无需等待,没有延迟。

SVG 支持

完整支持 SVG 文件,经过优化与缩放,呈现完美效果。

全设备适配

为桌面、手机、平板和 PWA 生成所需的全部尺寸。

完整安装包

一键下载所需一切:ICO、PNG 文件、Apple touch 图标和 web manifest。

多种格式

支持 PNG、JPG、GIF、WebP、BMP、SVG —— 可从任意主流格式转换。

即用即走

提供 HTML 代码片段和安装说明,立即可用。

跨浏览器兼容

完美兼容 Chrome、Firefox、Safari、Edge 等所有现代浏览器。

高品质

先进的图像处理技术,确保每个尺寸都清晰锐利。

专业级

生成全球顶尖网站都在使用的行业标准 favicon 包。

8+
支持格式
6
图标尺寸
100%
浏览器兼容
0s
处理时间

简易安装指南

按照以下简单步骤,将新的 favicon 添加到您的网站。

1

下载 Favicon 安装包

使用上方的生成器创建并下载完整的 favicon 安装包(ZIP 文件)。

2

解压文件

将 ZIP 中的全部文件解压到网站根目录(与 index.html 同一文件夹)。

3

添加 HTML 代码

复制下方 HTML 代码,粘贴到页面的 <head> 部分。

4

测试您的 Favicon

部署网站后,确认 favicon 能在浏览器标签页、书签和移动设备上正确显示。

各框架集成代码

选择您的技术栈并复制即用代码。文件放在站点根目录(Next.js App Router 则放在 app/ 目录)。

index.html
<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">
// app/layout.tsx
// 1. Drop these files into app/ (Next.js auto-detects them):
//    - favicon.ico, icon.png, icon.svg, apple-icon.png
// 2. For extra PNG sizes + a manifest, declare them here:
import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: ['/apple-touch-icon.png'],
  },
  manifest: '/site.webmanifest',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en"><body>{children}</body></html>
  )
}
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <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" />
      </Head>
      <body><Main /><NextScript /></body>
    </Html>
  )
}
// Vue (public/index.html) — put files in public/
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

// Nuxt 3 (nuxt.config.ts)
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' },
      ],
    },
  },
})
// 1. npm i gatsby-plugin-manifest
// 2. gatsby-config.js — point icon at a 512x512 PNG
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'Your App Name',
        short_name: 'App',
        start_url: '/',
        display: 'standalone',
        icon: 'src/images/android-chrome-512x512.png',
      },
    },
  ],
}

// Also copy favicon.ico to the static/ folder for the browser fallback.
// src/app.html — files live in static/
<!doctype html>
<html lang="en">
  <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/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display:contents">%sveltekit.body%</div>
  </body>
</html>
文件放在哪里?把 favicon.ico、icon.png 和 apple-icon.png 直接放进 app/ 目录,Next.js 会自动识别,无需手写 link 标签。
site.webmanifest
{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

包含的文件

您的 favicon 安装包将包含以下文件。

favicon.icofavicon-16x16.pngfavicon-32x32.pngapple-touch-icon.pngandroid-chrome-192x192.pngandroid-chrome-512x512.pngfavicon.svgsite.webmanifest

专业提示

  • 将所有 favicon 文件放在网站根目录,以获得最佳兼容性。
  • 更新 favicon 后强制刷新(或清除缓存),即可立即看到变化。
  • 在不同设备和浏览器上测试 favicon,确保显示正确。

常见问题

关于 favicon 生成与使用的常见问题解答。

支持哪些图片格式?
可以上传 PNG、JPG、GIF、WebP、BMP 或 SVG 文件。为获得最清晰的效果,建议使用至少 512×512 像素的方形图片,文件大小不超过 10 MB。
原始图片应该多大?
理想情况是 512×512 或更大的方形图片。生成器会干净地缩小,因此大而清晰的源图能得到最好看的小图标。
支持 SVG favicon 吗?
支持。SVG 会保留为矢量 favicon.svg,在现代浏览器中清晰呈现;同时也会栅格化为全部 PNG 和 ICO 尺寸,兼容旧浏览器。
会生成哪些 favicon 尺寸?
安装包包含 16×16 与 32×32 PNG、多分辨率 favicon.ico、180×180 Apple touch 图标、192×192 与 512×512 Android/PWA 图标,以及 web manifest。
如何把 favicon 添加到我的网站?
将 ZIP 解压到网站根目录,并把提供的 HTML 片段粘贴到页面的 <head> 中。上方有完整说明和各框架代码。