专业 Favicon 生成器
从任意图片 一键生成 完美网站图标
将您的图片转换为专业 favicon，支持 SVG、PNG、JPG 等所有主流格式。生成包含多种尺寸的完整 favicon 包，确保在所有设备和浏览器上完美兼容。
极速处理
·SVG 支持
·多种格式
上传您的图片
拖拽图片到此处或点击浏览。我们将生成您需要的所有 favicon 尺寸。
PNGJPGSVGGIFWebPBMPICO≤ 10MB
将图片拖到此处
或点击浏览文件
完美 Favicon 所需的一切
我们专业的 favicon 生成器提供创建出色网站图标所需的所有工具和格式，在任何地方都能完美呈现。
极速处理
使用优化的转换引擎，秒级处理图片。无需等待，没有延迟。
SVG 支持
完整支持 SVG 文件，经过适当优化和缩放，呈现完美效果。
全设备适配
为桌面、移动设备、平板和 PWA 生成所需的所有尺寸 favicon。
完整安装包
下载您所需的一切：ICO、PNG 文件、Apple touch 图标和 web manifest。
多种格式
支持 PNG、JPG、GIF、WebP、BMP、SVG — 从任何流行图片格式转换。
即用即走
获取 HTML 代码片段和安装说明，立即可用。
跨浏览器兼容
完美兼容 Chrome、Firefox、Safari、Edge 及所有现代浏览器。
高品质
先进的图像处理技术确保每个尺寸的 favicon 都清晰锐利。
专业级
生成全球顶尖网站使用的行业标准 favicon 包。
8+
支持格式
6
图标尺寸
100%
浏览器兼容
0s
处理时间
简易安装指南
按照以下简单步骤将新 favicon 添加到您的网站
1
下载 Favicon 包
使用上方的生成器创建并下载完整的 favicon 包（ZIP 文件）。
2
解压文件
从 ZIP 中解压所有文件，放到网站的根目录（与 index.html 同一文件夹）。
3
添加 HTML 代码
复制下方的 HTML 代码，粘贴到 HTML 页面的 <head> 部分。
4
测试您的 Favicon
部署网站后，检查 favicon 是否在浏览器标签页、书签和移动设备上正确显示。
您的框架的集成代码
选择您的技术栈并复制即用代码。文件放在站点根目录（或 Next.js App Router 的 app/ 目录）。
文件放在哪里？Drop favicon.ico, icon.png, apple-icon.png directly into the app/ folder. Next.js auto-detects them — no manual link tags needed.
app/layout.tsx
// 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,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}Web Manifest
示例 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.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
专业提示
- 将所有 favicon 文件放在网站根目录以获得最佳兼容性
- 更新 favicon 后清除浏览器缓存以立即查看更改
- 在不同设备和浏览器上测试 favicon 以确保正确显示