下载
Where to Place Files
Extract the ZIP and place all files in your project's /public folder:
public/ ├── favicon.ico ← Browser fallback ├── favicon.svg ← Modern browsers (scalable) ├── favicon-16x16.png ← Browser tabs ├── favicon-32x32.png ← Taskbar ├── favicon-96x96.png ← Desktop shortcut ├── apple-touch-icon.png ← iOS home screen ├── android-chrome-192x192.png ├── android-chrome-512x512.png └── site.webmanifest ← PWA manifest
Add to Your Project
<!-- Add inside <head> tag --> <link rel="icon" href="/favicon.ico" sizes="48x48" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" /> <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" /> <meta name="theme-color" content="#4f46e5" /> <meta name="apple-mobile-web-app-title" content="My App" />
Add this snippet inside the <head> tag of your HTML file.
文件命名指南
About Favicon Generator
A favicon is the small icon displayed in browser tabs next to your website's title. Our free online Favicon Generator allows you to convert any image, text, or emoji into a perfectly sized, web-ready favicon package.
How It Works
The tool takes your input (image, text, or emoji) and uses an HTML5 Canvas element to resize and render it into the standard favicon dimensions (16x16, 32x32, etc.). It then exports these canvases as downloadable ICO or PNG files.
Common Use Cases
- Creating a professional browser tab icon for a new website
- Generating Apple Touch Icons for iOS home screen bookmarks
- Converting a company logo into a standard .ico file
- Quickly making a text-based placeholder favicon for development
Frequently Asked Questions
Modern browsers fully support .png favicons, which are easier to work with and support transparency. However, providing a fallback .ico file is still considered best practice for older browsers.
The standard size is 16x16 or 32x32 pixels. However, modern web development requires larger sizes (like 180x180) for high-resolution displays and mobile devices.