Every website needs a favicon. That tiny icon in the browser tab, the bookmark star, the mobile home screen shortcut — it is often the first visual impression a user has of your brand. Yet creating favicons in all the right sizes is surprisingly tedious. You need PNGs at 16x16, 32x32, 180x180 for Apple, 192x192 for Android, 512x512 for PWA splash screens, and more. Doing this by hand with an image editor is a waste of time.
That is why we built our free Favicon Generator. Upload any image — PNG, JPG, GIF, SVG, or WEBP — and the tool instantly generates all standard favicon sizes. Download each one individually, or batch-download the selected sizes. Copy the complete HTML link tags and a sample web app manifest JSON. All processing happens in your browser. No server, no signup, no data collection.
What Is a Favicon?
A favicon (favorite icon) is a small image associated with a website, displayed in browser tabs, bookmark bars, browser history, and search results. The concept dates back to 1999, when Microsoft introduced it in Internet Explorer 5. Back then, favicons were single favicon.ico files — a proprietary Windows icon format that could contain multiple resolutions in one file.
The web has evolved significantly since then. Modern browsers support PNG, SVG, and even GIF favicons. Each platform and device expects a different size and format:
- Browser tabs display 16x16 or 32x32 PNG icons
- Bookmarks and history use 32x32 or larger for retina displays
- Mobile home screen icons require 180x180 (Apple) and 192x192 (Android)
- PWA splash screens need a 512x512 icon for the launch image
- macOS Safari pinned tabs use an SVG icon at any resolution
While the old .ico format still works, PNG has become the standard for modern web development. It supports transparency, compresses well, and every browser handles it correctly. SVG favicons are emerging as the future — they scale to any resolution without pixelation — but PNG remains the safe, universally supported choice for now.
Why Favicons Matter
It is easy to dismiss favicons as cosmetic fluff. They are tiny, after all. But they serve real functional and psychological purposes that directly impact user experience and brand perception.
Browser Tabs and Windows
When a user has twenty tabs open, the favicon is the only visual identifier of your page. Without one, the tab shows a generic document icon — instantly forgettable. With a distinctive favicon, users can find your tab at a glance. This is especially important for web apps, dashboards, and any site users keep open for extended periods.
Bookmarks and Reading Lists
Bookmark bars display favicons without text labels in many browsers. A clear, recognizable icon makes your site instantly identifiable in a crowded bookmark bar. It also increases the chance that users will bookmark your site in the first place — a missing favicon signals an unfinished or low-quality site.
Mobile Home Screens
When a user adds your site to their iPhone or Android home screen, the favicon becomes the app icon. A blurry, incorrectly sized, or missing icon makes your "app" look amateur next to professionally designed native apps. The 180x180 Apple touch icon and 192x192 Android icon are your chance to look like a first-class citizen on the home screen.
PWA Icons and Splash Screens
Progressive Web Apps use the 192x192 and 512x512 icons defined in the web app manifest. The 512x512 version is especially important — it is used as the splash screen background while your PWA loads. A sharp, well-designed 512x512 icon creates a polished launch experience. A pixelated or missing one makes your PWA feel broken.
Social Sharing and Trust
While Open Graph tags control the primary social preview image, some platforms fall back to the favicon for smaller embeds, message previews, and link unfurling in chat apps. Beyond the technical, a favicon is a trust signal. Users subconsciously associate the presence of a favicon with a legitimate, maintained website. Its absence raises questions.
Brand Recognition
Your favicon is your logo at its smallest. The best favicons are simplified versions of a brand mark — just enough detail to be recognizable at 16x16. Think of the Gmail "M", the GitHub Octocat silhouette, or the Wikipedia "W". These work because they were designed to be legible at favicon scale.
Standard Favicon Sizes Explained
Here is the complete breakdown of every standard favicon size, what platform uses it, and why it matters:
| Size | Platform / Use | Why It Matters |
|---|---|---|
16x16 | Legacy browser tabs, IE, old browsers | Still requested by some browsers and tools; include for completeness |
32x32 | Standard browser tabs (Chrome, Firefox, Safari) | The most commonly displayed size; this is your primary favicon |
48x48 | Windows taskbar, Windows Metro tiles | Used when pinning sites to the Windows taskbar or start menu |
64x64 | macOS dock, Safari pinned tabs, HiDPI | Retina displays need higher resolution; Safari uses this for pinned tab silhouettes |
128x128 | Chrome Web Store, some Android contexts | Required for Chrome extension and Web Store listings |
180x180 | Apple touch icon (iOS, iPadOS) | The icon shown when users add your site to their iPhone or iPad home screen |
192x192 | Android home screen, Chrome app launcher | Required for "Add to Home Screen" on Android and for PWA manifest icons |
512x512 | PWA splash screen, large Android icons | Used as the background splash image while a PWA loads; must be sharp at large scale |
Our Favicon Generator creates all eight sizes in one action. You do not need to open Photoshop, resize eight times, export eight PNGs, and name them correctly. Upload once, get everything.
How to Use the Favicon Generator
Step 1: Upload Your Image
Drag and drop any image onto the upload zone, or click to browse. The tool accepts PNG, JPG, JPEG, GIF, SVG, and WEBP. There is no file size limit enforced by the tool — though extremely large images may slow down your browser during processing.
For best results, start with a square image or a logo with a simple design. Complex photographs often lose detail at 16x16. If your source image is not square, the generator offers two resize modes:
- Cover (default): Center-crops the image to a square, then resizes. Best for logos and icons where the subject is centered.
- Contain: Scales the image to fit within the square, adding transparent letterboxing if needed. Best for non-square logos you want to preserve fully.
Step 2: Preview the Original
After upload, the tool displays your original image with its filename and dimensions. This confirms the upload worked and gives you a reference point for the generated outputs.
Step 3: Review Generated Sizes
Each of the eight standard sizes appears as a card with a preview, size label, platform description, individual download button, and a selection checkbox. The preview uses image-rendering: pixelated for small sizes so you can see exactly how the icon will look at actual size in a browser tab.
By default, all sizes are selected. You can uncheck individual sizes you do not need, or use "Select All" / "Select None" to batch-toggle.
Step 4: Download
Click "Download" on any individual size card to save that PNG. Or click "Download Selected" to batch-download all checked sizes. Since the tool is 100% client-side with no server backend, batch downloads trigger individual file downloads with a small delay between each — your browser's standard download behavior.
Step 5: Copy the HTML
The tool generates the complete set of <link> tags you need in your HTML <head>. Click "Copy HTML" and paste directly into your page. The generated markup includes:
- Standard
<link rel="icon">tags for 16x16, 32x32, and 48x48 - Apple touch icon link for 180x180
- Android / PWA icon links for 192x192 and 512x512
- Web app manifest link
- A
<meta name="theme-color">placeholder
Step 6: Copy the Manifest JSON
For Progressive Web Apps, you also need a manifest.json file. The tool generates a sample manifest with the correct icon array. Copy it, save as manifest.json in your site root, and customize the name, short name, theme color, and background color to match your brand.
Favicon Best Practices
Design for 16x16 First
The 16x16 size is the hardest to get right because it has so few pixels. Design your favicon at 16x16 first, then scale up. If it is legible at 16x16, it will look great at every larger size. A common mistake is designing at 512x512 and then discovering the detail is lost at tab size.
Keep It Simple
The best favicons use one or two colors, simple geometric shapes, and high contrast. Text is almost unreadable at 16x16 unless it is a single bold letter. Gradients and fine lines blur together. Look at the favicons of major sites — they are all radically simplified versions of their full logos.
Use Transparent PNG Where Appropriate
PNG supports transparency, which lets the favicon blend into any browser chrome color. This is especially important for dark mode users — a white-background favicon looks terrible in a dark browser tab. Our generator outputs transparent PNGs when you use "Contain" mode with a non-square source. If your source has a solid background, consider removing it in an image editor first.
Set a Theme Color
The <meta name="theme-color" content="#0c0c0e"> tag changes the address bar color on mobile Chrome and Safari. It also affects the window title bar in desktop PWA mode. Choose a color that matches your brand primary. This small detail makes your site feel native and polished.
Test on Real Devices
Before shipping, test your favicon on actual hardware: an iPhone home screen, an Android home screen, a macOS Safari pinned tab, and Windows taskbar pinning. Each platform renders slightly differently, and what looks good in a generator preview may need tweaking in practice.
Common Favicon Mistakes
Only Providing One Size
Uploading a single 32x32 favicon and calling it done leaves your site looking blurry on retina displays, broken on mobile home screens, and generic in PWA mode. Modern web development requires a full set of sizes. The good news: our generator creates them all in seconds.
Forgetting the Apple Touch Icon
iOS devices aggressively cache touch icons, and if you do not provide one, iOS generates an ugly miniature screenshot of your page. Once cached, it is difficult to clear. Provide a proper 180x180 Apple touch icon from day one to avoid this.
Not Including a Web App Manifest
Without a manifest.json, Android cannot offer "Add to Home Screen" properly, and your site will not qualify as an installable PWA. The manifest is a single JSON file with a few fields — there is no reason to skip it.
Using the Wrong File Format
ICO files are legacy. PNG is the modern standard. SVG is the future but not yet universally supported (Safari only added SVG favicon support in 2021). For maximum compatibility, serve PNGs in multiple sizes and consider adding an SVG as a higher-resolution fallback for supporting browsers.
The HTML You Need
Here is the complete <head> block for a properly configured favicon setup. Replace my-icon with your actual filename prefix:
<link rel="icon" type="image/png" sizes="16x16" href="/my-icon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/my-icon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/my-icon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/my-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/my-icon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/my-icon-512x512.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0c0c0e">Each tag serves a specific purpose:
rel="icon"— the standard favicon link, recognized by all modern browserssizesattribute — tells the browser which resolution this file is optimized for, allowing it to choose the best matchrel="apple-touch-icon"— specifically for iOS and iPadOS home screen icons; Safari also uses it for pinned tabsrel="manifest"— points to the web app manifest, required for PWA functionality and Android home screen iconsmeta name="theme-color"— sets the browser chrome color on mobile and in PWA mode
Privacy: 100% Client-Side
Your logo, brand mark, or app icon is proprietary. Sending it to an online service for favicon generation creates an unnecessary information leak — not to mention the privacy risk of uploading images to unknown servers.
Our Favicon Generator is 100% client-side. All image processing, canvas rendering, PNG generation, and code output happens inside your browser using the native Canvas API. There is no server, no database, no analytics script, and no data transmission. Your image never leaves your machine. You can safely use it with confidential logos, pre-launch app icons, and proprietary brand assets.
Design: The Icon Foundry
Most favicon generators look like generic web utilities — white backgrounds, blue primary buttons, and no soul. We designed ours like a 19th-century metal foundry where icons are cast from molten brass.
The background is deep forge-black #0c0c0e, evoking the darkness of a workshop at night. Panels are wrought-iron grey #18181b with subtle borders. The accent color is warm brass #c9a96e — the color of cast metal under lamplight. Headings use Cinzel, a serif typeface inspired by classical inscriptions, giving the tool the gravitas of a craftsman's stamp. Body text uses Source Sans 3 for clarity, and code uses JetBrains Mono for technical precision. A faint metal grain texture overlays the background, so subtle you might not notice it — but you would notice if it were missing.
The result is a tool that feels intentional. It does not look like it was generated by a template. It looks like someone cared.
Related Tools
Building a website involves dozens of small details beyond favicons. Here are other free tools in our collection that complement the favicon workflow:
- Meta Tag Generator — Generate complete SEO meta tags, Open Graph markup, Twitter Cards, and JSON-LD structured data. Preview how your page looks on Google, Facebook, and Twitter.
- Color Palette Generator — Create harmonious color schemes from any base color. Export as CSS custom properties, JSON, or Tailwind config.
- CSS Gradient Generator — Build linear, radial, and conic gradients with interactive draggable color stops. Twenty presets and one-click CSS copy.
- Landing Page Generator — Generate a complete SaaS landing page in seconds. Enter your product details and get a polished, responsive HTML page ready to deploy.
Try the Favicon Generator Now
Open the free Favicon Generator, upload your logo or icon, and watch all eight standard sizes generate instantly. Toggle between Cover and Contain modes to see which works better for your image. Download the sizes you need, copy the HTML link tags into your page's <head>, and save the manifest JSON for your PWA setup. No signup, no server, no data collection — just the icons you need, forged in your browser.
Looking for more free developer tools? Browse our full tools directory — including JSON formatters, regex testers, color converters, and more.