Favicon Generator Online Free — Create Favicon for Your Website
Generate a complete favicon set for your website from text, emoji, or any image. Download a ZIP package containing all required sizes — 16×16, 32×32, 180×180 Apple Touch Icon, 192×192 and 512×512 for Android/PWA — plus a ready-to-use site.webmanifest and HTML snippet for your <head>.
How to Create a Favicon
- 01
Design your favicon
Enter text or an emoji (1–2 characters) and customize background color, text color, font, and shape. Or upload your own image.
- 02
Preview in all sizes
See the favicon in all required sizes simultaneously on both light and dark backgrounds to verify visibility at small sizes.
- 03
Download the package
Click "Download Favicon Package" to get a ZIP with all PNG sizes, site.webmanifest, and the HTML snippet to paste into your <head>.
Favicon Size Reference
| File | Size | Where it's used |
|---|---|---|
| favicon-16x16.png | 16×16 | Browser tab, address bar |
| favicon-32x32.png | 32×32 | Browser taskbar, bookmarks |
| favicon-48x48.png | 48×48 | Windows desktop shortcuts |
| favicon-64x64.png | 64×64 | High-DPI / retina displays |
| apple-touch-icon.png | 180×180 | iOS home screen (Add to Home Screen) |
| android-chrome-192x192.png | 192×192 | Android Chrome, PWA install |
| android-chrome-512x512.png | 512×512 | PWA splash screen, Play Store |
Features
- ✓Generate from text, emoji, or uploaded image
- ✓Live preview in all 7 required sizes
- ✓Preview on light and dark backgrounds simultaneously
- ✓Choose background color, text color, font, and shape
- ✓Round corners: square, small, rounded, or circle
- ✓Download complete ZIP with all sizes
- ✓Includes site.webmanifest (required for PWA)
- ✓Ready-to-paste HTML snippet for your <head>
- ✓Upload PNG, JPG, or SVG as base image
- ✓Runs 100% in your browser — no server upload
Frequently Asked Questions
- What is a favicon?
- A favicon (favorite icon) is the small icon that appears in browser tabs, bookmarks, and browser history next to your website name. It's typically a 16×16 or 32×32 pixel image in .ico format, though modern websites provide multiple sizes in PNG format for different devices and contexts.
- What sizes does the favicon package include?
- The package includes: favicon-16x16.png (browser tab), favicon-32x32.png (taskbar/bookmarks), favicon-48x48.png (desktop shortcuts), favicon-64x64.png (high-DPI displays), apple-touch-icon.png at 180×180 (iOS home screen), android-chrome-192x192.png (Android Chrome), android-chrome-512x512.png (PWA splash screen), and site.webmanifest.
- How do I install the favicon on my website?
- Extract the downloaded ZIP file and upload all files to your website's root directory (public/ in Next.js, or the root where index.html is). Then paste the HTML snippet into your <head> tag. The snippet links all sizes correctly for browsers, iOS, and Android.
- Can I use an emoji as a favicon?
- Yes. Type a single emoji character in the text input and it will be rendered on the chosen background color. Emoji favicons are increasingly popular for developer tools, blogs, and personal projects. You can also paste emoji from any emoji picker.
- What is site.webmanifest?
- The web app manifest is a JSON file that tells browsers about your Progressive Web App (PWA). It specifies the app name, icons, theme color, and display mode. It's required for "Add to Home Screen" functionality on Android and Chrome. The generated manifest is pre-filled with the correct icon paths and can be customized.
- Does this create a real .ico file?
- The package downloads PNG files for all sizes. Modern browsers (Chrome, Firefox, Edge, Safari) all support PNG favicons and prefer them over .ico. The favicon-32x32.png can be renamed to favicon.ico and will work in all modern browsers. True multi-size .ico files require binary encoding which is complex to do client-side.