Download
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.
File Naming Guide
Favicon Generator Online Free
Create favicons from text, emoji, or images. Generate ICO, PNG, and SVG favicons for your website. Free online favicon maker with instant preview.
How It Works
Choose your favicon source: type text/emoji, or upload an image. Customize the background color, font, and size. The tool generates favicons in multiple sizes (16x16, 32x32, 180x180) and formats (ICO, PNG, SVG) ready for download.
Common Use Cases
- Creating a recognizable browser tab icon for your website or blog
- Generating Apple Touch icons for iOS home screen bookmarks
- Designing favicon sets for Progressive Web Apps (PWA)
- Building consistent brand identity across browser tabs
Frequently Asked Questions
A favicon (favorites icon) is the small icon displayed in browser tabs, bookmarks, and address bars. It helps users identify your website quickly.
The standard sizes are 16x16 and 32x32 pixels for browsers, 180x180 for Apple Touch, and 192x192/512x512 for Android/PWA.
ICO is the traditional format. Modern browsers also support PNG and SVG. It's best to provide multiple formats for maximum compatibility.
At minimum: 16x16 and 32x32 for browsers. For comprehensive support, also include 180x180 (Apple touch icon), 192x192 and 512x512 (Android/PWA). Our tool generates all sizes.
Yes, select any emoji and the tool generates properly sized favicon files from it. This is a quick way to get a distinctive favicon without design skills.
Modern browsers support PNG favicons. The classic .ico format supports multiple sizes in one file. For best compatibility, provide both .ico (16/32px) and PNG (larger sizes).
Add <link rel='icon' href='/favicon.ico'> to your HTML <head>. For Apple devices, add <link rel='apple-touch-icon' href='/apple-touch-icon.png'>. Our tool generates the HTML code for you.