Favicon Generator
Generate all favicon sizes from an image or create one from text/emoji. Download a complete favicon package with ICO, PNG, Apple Touch Icon, Android icons, manifest.json, and ready-to-use HTML code.
Upload Image
Upload a PNG, JPG, or SVG image. Square images (512x512) work best.
Drop image here or click to browse
PNG, JPG, SVG, WebP (max 10MB)
Output Options
Select which files to include in your download
What is a Favicon?
A favicon (short for “favorite icon”) is a small icon that represents your website. It appears in browser tabs, bookmarks, history, and search results. A well-designed favicon helps users quickly identify your site among multiple open tabs and enhances your brand recognition.
Modern websites need multiple favicon sizes to support different devices and platforms: traditional browsers, Apple devices (Touch Icon), Android devices (Chrome icons), Windows tiles, and more.
How to Create a Favicon
- Upload an image (PNG, JPG, SVG) or create from text/emoji using the tabs above
- Preview your favicon at all standard sizes (16x16 to 512x512 pixels)
- Select which files to include in your download (ICO, PNG sizes, manifest, etc.)
- Download the complete favicon package as a ZIP file
- Copy the HTML code snippet and add it to your website's <head> section
What's Included in the Download
Image Files
- favicon.svg - Scalable vector favicon
- favicon.ico - Multi-size ICO (16, 32, 48px)
- favicon-16x16.png - Standard browser favicon
- favicon-32x32.png - Retina browser favicon
- mstile-150x150.png - Windows tile icon
- apple-touch-icon.png - iOS home screen (180x180)
- android-chrome-192x192.png - Android home screen
- android-chrome-512x512.png - Android splash screen
Configuration Files
- site.webmanifest - PWA manifest for Android
- browserconfig.xml - Windows tile configuration
- README.html - Installation instructions with HTML code
HTML Code to Add
Add these lines to your website's <head> section:
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <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="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-config" content="/browserconfig.xml">
Favicon Best Practices
Use a Square Image
Start with a square image (512x512px recommended) for best results across all sizes. Non-square images will be cropped or distorted.
Keep It Simple
Favicons are tiny. Use simple shapes, bold colors, and avoid fine details that won't be visible at 16x16 pixels.
Use High Contrast
Ensure your favicon stands out against both light and dark browser themes. Test on different backgrounds.
Match Your Brand
Your favicon should be recognizable as part of your brand. Use your logo, a letter, or a symbol that represents your site.
Test at Small Sizes
Always preview your favicon at 16x16px to ensure it's still recognizable and not just a blurry blob.
Use PNG for Transparency
If you need a transparent background, use PNG format. JPG doesn't support transparency and will have a white background.
Frequently Asked Questions
What image format should I upload?
PNG is recommended for the best quality, especially if you need transparency. JPG works well for photos. SVG is great for vector graphics and scales perfectly. We recommend starting with at least 512x512 pixels for best results.
Do I need all these favicon sizes?
For maximum compatibility, yes. Different browsers, devices, and platforms request different sizes. The ICO file alone covers basic browser tabs, but Apple and Android devices need their specific icons for home screen shortcuts.
Where do I put the favicon files?
Upload all files to your website's root directory (where your index.html is). Then add the HTML code snippet to your <head> section. Some files like favicon.ico are automatically detected by browsers in the root.
Why isn't my new favicon showing?
Browsers cache favicons aggressively. Try hard-refreshing (Ctrl+F5 or Cmd+Shift+R), clearing your browser cache, or opening in an incognito window. It may take time for the cache to expire naturally.
Is my image uploaded to a server?
No! All processing happens 100% locally in your browser. Your images never leave your device. This tool uses the Canvas API for image manipulation and JSZip for creating the download package.
Can I create a favicon from text or emoji?
Yes! Use the “Create from Text” tab to generate a favicon from any text, letter, or emoji. Customize the background color, text color, font, and size. Great for quick branded favicons using your company initial or a relevant emoji.
Related Tools
More free tools that might be useful
Image Compressor
Compress and optimize JPG, PNG, and WebP images without losing quality
QR Code Generator
Create custom QR codes for URLs, text, WiFi, and vCards
Meta Tag Generator
Generate SEO meta tags, Open Graph, and Twitter Card tags
Batch Image Renamer & Resizer
Rename and resize multiple images at once with custom patterns