Generate favicons from images or text. Creates ICO, PNG, SVG in all sizes (16x16 to 512x512). Apple Touch, Android Chrome, MS Tile icons. Instant download.
Use this free online Favicon Generator directly in your browser. No signup required, no data leaves your device. Part of Utilier — a collection of 133+ developer utilities.
What is Favicon Generator (Multi-Size & Format)?
Favicon generator creates website icons from uploaded images, text, or emojis — generates all required sizes and formats for modern browsers and devices. Upload logo or image (PNG, JPG, SVG), tool creates ICO (16x16, 32x32, 48x48), PNG (32x32, 192x192, 512x512 for PWA), Apple Touch Icon (180x180), Android Chrome icons, and Microsoft Tile icons. Download as ZIP with all sizes or individual files. Includes HTML code snippet for linking favicons in <head>.
A favicon is the small site identity image shown in browser tabs, bookmarks, shortcuts, and installed web apps. Modern browsers and devices request different sizes and formats depending on the context, so a favicon set commonly includes ICO, PNG, and touch-icon files plus HTML link tags. A generator derives those consistent variants from one source image and avoids blurry browser scaling.
Multi-size generation: Creates 16x16, 32x32, 48x48, 64x64, 128x128, 180x180 (Apple), 192x192, 512x512 (Android/PWA) from single source image. All sizes in one click.
Platform-specific icons: Apple Touch Icon (iOS home screen), Android Chrome (PWA manifest), Microsoft Tile (Windows Start Menu). Platform-optimized sizes and formats.
Text/emoji to favicon: Generate favicon from text (initials, emoji, single char). Choose font, color, background. Example: 'A' on blue background, or 🚀 emoji.
HTML code generation: Provides <link> tags for all favicon sizes. Copy-paste into <head> section. Includes manifest.json for PWA.
Why use favicon generator?
Creating favicons manually requires resizing images to 10+ sizes and converting to ICO, PNG, SVG. This tool automates multi-size generation instantly.
Save time: Manually resizing to 10+ sizes (16x16, 32x32, 180x180, 512x512) and converting formats takes 30+ minutes. Tool does it in seconds.
Ensure compatibility: Different browsers and devices need different sizes (16x16 for browser tabs, 180x180 for iOS, 512x512 for Android). Tool creates all sizes automatically.
No Photoshop needed: Resize, crop, and convert formats without image editing software. Upload source image, download all sizes.
PWA-ready icons: Generates 192x192 and 512x512 PNG for Progressive Web App manifest. Essential for 'Add to Home Screen' on mobile.
HTML code snippet: No need to write <link> tags manually. Tool generates code for all favicons, ready to paste into <head>.
Text to favicon: No logo? Generate favicon from initials or emoji. Quick solution for prototypes or personal sites.
When to use favicon generator
Use whenever you need to create or update website favicons for browsers and devices.
Launching a new website and need favicons for browser tabs, bookmarks, and mobile home screens.
Converting a logo to all favicon sizes (16x16, 32x32, 180x180, 512x512).
Creating PWA icons for Progressive Web App manifest (192x192, 512x512).
Generating Apple Touch Icon for iOS 'Add to Home Screen'.
Making Microsoft Tile icons for Windows Start Menu.
Creating favicon from text or emoji when you don't have a logo.
Updating favicons after logo redesign (new brand colors, new icon).
How to use favicon generator
Upload image or enter text; download favicons in all sizes.
Upload source image: Upload PNG, JPG, SVG, or WebP. Recommended: square image, 512x512 or larger, transparent background. Tool resizes and converts to all sizes.
Or generate from text/emoji: Enter text (A, AB, 🚀) or emoji. Choose font (sans-serif, monospace, serif), text color, background color. Tool creates favicon from text.
Adjust cropping (optional): Use crop tool to select favicon area. Ensures icon looks good at small sizes (16x16). Add padding if needed.
Preview sizes: See favicon rendered at 16x16, 32x32, 48x48, 64x64. Verify readability at small sizes. Adjust if blurry or crowded.
Generate favicons: Click Generate. Tool creates ICO, PNG (all sizes), Apple Touch Icon, Android icons, MS Tile icons. Instant generation.
Download ZIP: Click Download ZIP to get all favicon sizes and formats. Or download individual sizes (favicon.ico, apple-touch-icon.png, favicon-192x192.png).
Copy HTML code: Click Copy HTML to get <link> tags for all favicons. Paste into <head> section of HTML. Includes manifest.json link for PWA.
Key features
Multi-size generation: Creates 16x16, 32x32, 48x48, 64x64, 128x128, 180x180, 192x192, 512x512 from single image. All sizes in one click.
ICO, PNG, SVG output: Generates ICO (legacy), PNG (modern), SVG (vector). Supports all browsers and devices.
Apple Touch Icon: 180x180 PNG for iOS 'Add to Home Screen'. Named apple-touch-icon.png per Apple specs.
Android/PWA icons: 192x192 and 512x512 PNG for Progressive Web App manifest. Enables 'Add to Home Screen' on Android.
Text to favicon: Generate favicon from text (A, AB, 🚀) or emoji. Choose font, colors, background. No logo needed.
HTML code snippet: <link> tags for all favicon sizes. Includes rel='icon', rel='apple-touch-icon', manifest.json reference.
Transparent background: Preserves transparency from source PNG. Or set custom background color for solid backgrounds.
Common use cases
Website favicons: Upload logo (PNG, SVG) and generate all favicon sizes (16x16 to 512x512). Download ZIP, upload to /public or /static, link in <head>.
PWA icons: Generate 192x192 and 512x512 PNG for manifest.json. Required for Progressive Web Apps and 'Add to Home Screen' on mobile.
Apple Touch Icon: Create 180x180 apple-touch-icon.png for iOS. Displayed when users save website to home screen on iPhone/iPad.
Emoji favicon: Use emoji (🚀, ⚡, 🎨) as favicon. Quick, recognizable, no design needed. Great for personal sites or prototypes.
Initials favicon: Generate favicon from initials (A, AB, JS). Set brand color as background. Professional look without logo.
Rebrand update: After logo redesign, generate new favicons. Replace old favicon.ico, apple-touch-icon.png with new versions.
iOS home screen icon. 180x180 per Apple specs. Displayed when users save website to iPhone/iPad home screen.
Technical reference
Favicon sizes and formats for modern web:
favicon.ico
Legacy format for IE and old browsers. Contains 16x16, 32x32, 48x48 in one .ico file. Place in root (/favicon.ico) or link in <head> with <link rel='icon' href='/favicon.ico'>.
16x16 PNG
Browser tab icon (Chrome, Firefox, Safari). Smallest size. Must be clear and recognizable. Use simple logo or single letter.
32x32 PNG
Browser tab and bookmarks on retina displays (2x scaling). Also used for Windows taskbar. Link: <link rel='icon' sizes='32x32' href='/favicon-32x32.png'>.
48x48 PNG
Browser history, bookmarks bar, Windows shortcuts. Mid-size icon. Link: <link rel='icon' sizes='48x48' href='/favicon-48x48.png'>.
180x180 Apple Touch Icon
iOS home screen icon (iPhone, iPad 'Add to Home Screen'). Named apple-touch-icon.png. Link: <link rel='apple-touch-icon' href='/apple-touch-icon.png'>. Must be 180x180 per Apple specs.
192x192 PNG (PWA)
Android Chrome home screen icon (PWA manifest). Referenced in manifest.json: 'icons': [{'src': '/icon-192.png', 'sizes': '192x192'}]. Required for Progressive Web Apps.
512x512 PNG (PWA)
Android splash screen and high-res icon. Referenced in manifest.json. Largest size for PWA. Ensures crisp display on large screens or high-DPI devices.
SVG favicon
Scalable vector icon. Modern browsers (Chrome 96+, Firefox 41+). Link: <link rel='icon' href='/favicon.svg' type='image/svg+xml'>. Best for logos with vector source.
MS Tile icons (optional)
Windows Start Menu and taskbar. 70x70, 150x150, 310x310. Set in browserconfig.xml or <meta> tags. Less critical (Windows 10+ uses ICO/PNG).
Recommended: transparent background
Use transparent PNG for logos without background. Adapts to browser themes (light/dark mode). Solid background works for initials or emoji favicons.
Common mistakes to avoid
Using a complex logo at 16x16, making it unreadable in browser tabs
Why it happens: Logos with fine details, text, or multiple elements become blurry or unrecognizable at 16x16 pixels. Browser tab icons are tiny, so intricate logos don't work. Common when using full company logo (with text) as favicon.
How to avoid it: Simplify for small sizes: use icon mark only (no text), single letter, or simplified symbol. Test at 16x16 to ensure clarity. Or create separate simplified version for favicons (e.g., Nike swoosh vs full Nike logo).
Forgetting Apple Touch Icon, making iOS home screen icon look bad
Why it happens: Without apple-touch-icon.png (180x180), iOS uses a screenshot of the website as home screen icon (looks unprofessional). Apple requires 180x180 PNG for proper display. Common oversight when developers only add favicon.ico.
How to avoid it: Always generate apple-touch-icon.png (180x180) and link in <head>: <link rel='apple-touch-icon' href='/apple-touch-icon.png'>. Tool creates this automatically.
Using only favicon.ico, missing modern PNG/SVG sizes for retina displays
Why it happens: favicon.ico (16x16) looks pixelated on retina displays (2x, 3x scaling). Modern browsers prefer PNG (32x32, 64x64) or SVG for crisp display. ICO-only = blurry favicons on Mac, iPhone, high-DPI monitors.
How to avoid it: Provide multiple sizes: favicon.ico (legacy), 32x32 PNG (retina), 180x180 (iOS), SVG (scalable). Link all sizes in <head>. Browsers pick best size for display.
Not including 192x192 and 512x512 for PWA, preventing 'Add to Home Screen' on Android
Why it happens: Progressive Web Apps (PWA) require 192x192 and 512x512 PNG in manifest.json for Android home screen icon. Without these sizes, 'Add to Home Screen' fails or uses generic icon. Required by Chrome's PWA audit.
How to avoid it: Generate 192x192 and 512x512 PNG. Add to manifest.json: 'icons': [{'src': '/icon-192.png', 'sizes': '192x192'}, {'src': '/icon-512.png', 'sizes': '512x512'}]. Tool creates these automatically.
Using non-square images, causing distorted favicons after cropping
Why it happens: Favicons must be square (1:1 aspect ratio). Non-square images (logo with text beside it, wide banner) get cropped or squashed to fit. Result: distorted, cut-off icon. Common with horizontal logos.
How to avoid it: Use square source image (512x512, 1024x1024). If logo is non-square, add padding to make it square, or use icon mark only (no text). Tool has crop feature, but starting square is best.
Frequently asked questions
What sizes do I need for modern browsers?
Minimum: favicon.ico (16x16, 32x32), 32x32 PNG (retina), 180x180 Apple Touch Icon (iOS), 192x192 and 512x512 PNG (PWA). Optional: SVG (scalable). Tool generates all sizes automatically.
Where do I place favicon files?
Place in /public (React, Next.js), /static (Svelte, Hugo), or root directory. Link in <head>: <link rel='icon' href='/favicon.ico'>. Or use framework defaults (public/favicon.ico).
Do I need an ICO file or just PNG?
ICO (favicon.ico) supports legacy browsers (IE). Modern browsers prefer PNG or SVG. Best practice: provide both. favicon.ico for IE/old browsers, PNG for modern browsers and retina displays.
What is Apple Touch Icon?
apple-touch-icon.png (180x180) is used when users save your website to iPhone/iPad home screen. Without it, iOS uses a screenshot (unprofessional). Always include for iOS support.
Can I use SVG for favicons?
Yes. Modern browsers (Chrome 96+, Firefox 41+, Safari 16+) support SVG favicons. Benefits: scalable (sharp at any size), small file size, supports dark mode. Link: <link rel='icon' href='/favicon.svg' type='image/svg+xml'>.
How do I create a favicon from text or emoji?
Use text-to-favicon mode. Enter text (A, AB, 🚀), choose font, colors, background. Tool generates favicon from text. Great for quick prototypes or initials-based favicons.
What are PWA icons (192x192, 512x512)?
Progressive Web Apps (PWA) require 192x192 and 512x512 PNG for Android home screen icon ('Add to Home Screen'). Referenced in manifest.json. Required for PWA audit and mobile installation.