Jaconir
clean
Developer

Favicon Generator: Create ICO, PNG and SVG Favicons Free (All Sizes)

March 7, 2026
7 min read

A favicon is the small icon that appears in browser tabs, bookmarks, and on mobile home screens when someone saves your site. It sounds minor but it's one of the first things users see — and a missing or blurry favicon immediately signals an unfinished product. This guide covers every favicon size you need, the formats browsers and devices require, and the fastest way to generate them all at once.

Generate all your favicon sizes in one shot with Jaconir Favicon Generator — upload one image, download a complete favicon package. No signup, no watermark.

Why Favicons Matter More Than You Think

  • Browser tabs: Users with 20+ tabs open identify sites by favicon, not title text.
  • Bookmarks: Every bookmarked site shows its favicon — a clean icon builds brand recognition.
  • Mobile home screen: When users "Add to Home Screen" on iOS or Android, your favicon becomes the app icon.
  • PWA icons: Progressive Web Apps require specific icon sizes in the web manifest for installation.
  • Google search results: Google shows favicons next to search results on mobile — a clear icon improves CTR.

Every Favicon Size You Actually Need

Different browsers, operating systems, and use cases require different sizes. Here's the complete list:

  • favicon.ico — 16×16, 32×32, 48×48 combined in one .ico file. The classic format every browser understands.
  • 16×16 PNG — Standard browser tab size.
  • 32×32 PNG — Windows taskbar and high-DPI tabs.
  • 48×48 PNG — Windows site icons.
  • 64×64 PNG — Windows site icons, high resolution.
  • 96×96 PNG — Google TV and some Android use cases.
  • 128×128 PNG — Chrome Web Store and some home screen icons.
  • 180×180 PNG — Apple Touch Icon for iOS home screen.
  • 192×192 PNG — Android Chrome home screen and PWA manifest.
  • 512×512 PNG — PWA splash screen and high-resolution app icon.
  • SVG — Modern browsers support SVG favicons which scale perfectly at any size.

You don't need to create each of these manually. Jaconir Favicon Generator takes one source image and exports the full set.

How to Create a Favicon — Step by Step

Step 1: Prepare Your Source Image

Start with a square image at least 512×512 pixels. SVG is ideal as a source because it scales without quality loss. PNG works well if it's high resolution. Avoid using a rectangular logo as your source — it will get cropped or distorted at small sizes.

Design tips for favicons that work at 16×16:

  • Use a single letter, monogram, or simple symbol — not your full logo
  • High contrast between icon and background — low contrast disappears at small sizes
  • Avoid thin lines or fine detail — they become noise at 16×16
  • Test your design at 16×16 before finalising

Step 2: Generate All Sizes

Open Jaconir Favicon Generator, upload your source image, and download the complete package. You'll get all required PNG sizes plus a combined .ico file.

Step 3: Add the HTML Tags

Place these tags in the <head> of every page:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">

Step 4: Update Your Web Manifest (PWA)

If your site is a PWA or you want home screen installation support, update your site.webmanifest:

{
  "name": "Your App Name",
  "icons": [
    { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Step 5: Verify in Browser

Open your site in Chrome, check the tab icon, then bookmark the page and check the bookmark. On mobile, use "Add to Home Screen" to test the Apple Touch Icon and Android icon. Use browser DevTools Network tab to confirm favicon files are loading with 200 status.

Common Favicon Mistakes

  • Only providing favicon.ico: Modern browsers prefer PNG and SVG. Without them, some browsers display a blurry upscaled .ico file.
  • Using a rectangular source image: Gets cropped into a square unexpectedly. Always use a square source.
  • Forgetting the Apple Touch Icon: Without the 180×180 PNG, iOS uses a screenshot of your page as the home screen icon — looks terrible.
  • Not updating after a rebrand: Browser favicon caching is aggressive. After updating, append a version query string: href="/favicon.ico?v=2"
  • Low contrast design: Dark icon on dark browser UI (Chrome dark mode) becomes invisible. Test in both light and dark browser themes.

SVG Favicons — The Modern Approach

Modern browsers (Chrome 80+, Firefox 41+, Safari 15.4+) support SVG favicons. An SVG favicon scales perfectly at any size and can even respond to dark mode using the prefers-color-scheme media query:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Inside the SVG, you can add dark mode support:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path fill="#000000" d="..." />
</svg>

Always provide a fallback .ico file alongside SVG for older browsers.

FAQ

What size should a favicon be?

Your source image should be at least 512×512 pixels square. From that, you generate all required sizes — 16×16 through 512×512 — using a generator. The Jaconir Favicon Generator handles all sizes from one upload.

What format should I use — ICO, PNG or SVG?

Use all three for maximum compatibility. ICO for legacy browser support, PNG for most modern use cases, SVG for perfect scaling in modern browsers. A favicon generator creates all formats at once.

Why isn't my favicon updating?

Browsers aggressively cache favicons. Force a refresh by clearing browser cache, opening an incognito window, or appending a version parameter to the favicon URL: href="/favicon.ico?v=2".

Do I need a favicon for SEO?

Google displays favicons next to search results on mobile. A missing or broken favicon shows a generic placeholder, which reduces visual distinction in search results and can lower CTR.

Conclusion

A complete favicon setup takes about 10 minutes and makes your site look finished and professional across every browser, device, and context. Generate the full set from one image and never think about it again.

Create your favicon now: Jaconir Favicon Generator →