Free Favicon Generator (Image to Favicon, All Sizes)

Free favicon generator (image to favicon, all sizes)

Upload one image and get every favicon size you need. The favicon generator converts your logo or icon into the full set of formats required by browsers, iOS, Android, and Progressive Web Apps, plus the HTML snippet and site.webmanifest file you need to install it. No account, no email, no watermark.

The tool runs entirely in your browser. Your image never leaves your device, and the generated files download as a single zip you can drop straight into your site’s public/ or static/ folder.

How to use the favicon generator

The flow is intentionally simple:

Upload your image. Drop a square PNG, SVG, or JPG into the upload area. A 512x512 source produces the cleanest output for every downstream size.
Preview the result. The tool shows how your favicon will render in a browser tab, on iOS home screens, and inside Android app launchers so you can spot scaling issues before you ship.
Download the zip. You get every required size, a favicon.ico fallback, a site.webmanifest, and the HTML snippet to paste into your site’s <head>.

What is a favicon and why does your website need one?

A favicon (short for “favorite icon”) is the small image browsers display next to your site’s title in tabs, bookmarks, history entries, and most Google mobile search results. It started as a 16x16 icon for Internet Explorer in 1999 and has since expanded into a whole family of sizes covering every browser, mobile OS, and progressive web app target.

Three reasons every website needs one:

Brand recognition. Users with dozens of open tabs scan favicons before titles. A distinctive icon is the difference between “I can find that tab” and “I’ll just search again.”
Trust and legitimacy. A site without a favicon shows a blank or generic placeholder. To most users that signals “unfinished” or “untrustworthy,” which translates into lower engagement and lower conversion.
SERP visibility. Google shows favicons alongside your URL in mobile search results. A clean favicon contributes to higher organic click-through rate.

What favicon sizes do you need in 2026?

Modern websites should ship a set of favicons rather than a single file. Each size targets a specific surface:

Size	File	Purpose
16x16	favicon.ico	Browser tab on standard displays
32x32	favicon.ico	Browser tab on Retina displays, bookmarks
48x48	favicon.ico	Windows taskbar, Google Search favicon (minimum source)
180x180	PNG	Apple Touch Icon, iOS home screen
192x192	PNG	Android home screen, PWA install
512x512	PNG	PWA splash screen, store listings, app icon
Vector	favicon.svg	Scalable favicon for modern browsers

You don’t need to choose between these sizes. The generator produces all of them, plus the favicon.ico container that bundles the 16x16, 32x32, and 48x48 raster versions into a single legacy-compatible file.

Supported image formats: PNG, SVG, JPG

The favicon generator accepts PNG, SVG, and JPG inputs. A few rules to get clean output:

Use a square source. Non-square images get cropped or letterboxed. Crop or pad your logo to a 1:1 ratio before uploading.
Aim for 512x512 or larger. Downscaling is lossless; upscaling is not. A 64x64 source will produce blurry 180x180 and 512x512 versions no matter what tool you use.
SVG is best for simple logos. SVG inputs render crisp at every size and produce a smaller favicon.svg for modern browsers. Bitmap inputs are fine when your logo has gradients, photographic detail, or effects that don’t translate to vector.
Avoid fine detail. A logo with thin lines, small text, or tight kerning will vanish at 16x16 and 32x32. Design (or simplify) your favicon for the smallest size you ship, not the largest.
Use high contrast. Favicons render at a few dozen pixels against backgrounds you don’t control (light tabs, dark tabs, search results). Bold, high-contrast shapes survive that scaling; subtle ones don’t.

How to install your favicon on your website

The generator produces both the icon files and the HTML snippet you need to declare them. Drop the files into your site’s static directory, paste the snippet in your layout’s <head>, and you’re done. Here’s how that maps to the most common stacks.

Plain HTML

Place the files at the root of your site (so they resolve to /favicon.ico, /favicon.svg, etc.) and paste this snippet inside <head>:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

This single block covers desktop browsers, iOS, Android, and PWA installs.

WordPress

WordPress 4.3 and later includes a built-in favicon (Site Icon) feature. Go to Appearance → Customize → Site Identity and upload your 512x512 PNG. WordPress generates the various sizes automatically and injects the link tags into your theme. If you need finer control (for example, the SVG variant or a custom site.webmanifest), upload the generated zip to your theme’s assets/ directory and add the HTML snippet to your header.php or via a theme hook.

Shopify

In your Shopify admin, go to Online Store → Themes → Customize → Theme settings → Favicon, then upload the 32x32 or 512x512 PNG. Shopify only exposes a single favicon slot. To install the full set (Apple Touch Icon, web manifest, etc.), upload the files via Settings → Files and add the link tags inside theme.liquid between {% comment %} blocks in <head>.

Webflow

Open your Webflow project, go to Project settings → General → Favicons, and upload a 256x256 or larger PNG for the favicon and a 256x256 PNG for the Webclip (Apple Touch Icon). Webflow injects the link tags automatically across all published pages. For PWA support or the SVG variant, add the additional link tags under Project settings → Custom code → Head code.

Astro

Astro doesn’t generate favicons for you; you drop the files into the public/ directory and reference them from your base layout’s <head>. For example, in src/layouts/Layout.astro:

<head>
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
</head>

Files in public/ are copied verbatim into dist/ at build time, so a public/favicon.ico resolves to https://your-site.com/favicon.ico.

Next.js

Next.js (App Router) supports file-based favicons. Place favicon.ico in app/, and Next.js wires it up automatically. For additional sizes, add app/icon.png (32x32) and app/apple-icon.png (180x180), or use the icons field in app/layout.tsx metadata to declare the full set including the web manifest.

Apple touch icons and iOS home screen icons

When a user adds your site to their iOS home screen, iOS looks for the apple-touch-icon link tag. Without it, iOS captures a screenshot of your page and uses that as the icon, which usually looks terrible.

The apple-touch-icon should be:

180x180 PNG (older iOS sizes are now upscaled from this one)
Flat, no transparency. iOS adds rounded corners and (in older versions) a glossy overlay; transparent areas get an unintended white background.
Referenced via <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

The favicon generator outputs the apple-touch-icon at the right size and format by default.

Progressive Web App (PWA) icons and the web manifest

If your site is a Progressive Web App (installable, with offline support and a service worker), you need a site.webmanifest file. The generator includes one in the output zip. A minimal manifest looks like this:

{
  "name": "Your Site Name",
  "short_name": "YourSite",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

For Android, the 192x192 icon is used on the home screen and the 512x512 powers the install prompt and splash screen. Consider adding a maskable icon ("purpose": "maskable") so Android can crop your icon to match the device’s preferred shape (circle, squircle, rounded square) without losing important parts.

Why isn’t my favicon showing up in Google search results?

This is the most common favicon issue, and there are usually four root causes:

The favicon is too small. Google requires a favicon that’s a multiple of 48 pixels (96x96, 144x144, 192x192). A 16x16 favicon.ico alone won’t appear in mobile search results.
The favicon isn’t crawlable. It must be served over HTTPS, not blocked by robots.txt, and reachable at a stable URL.
Google hasn’t recrawled yet. Favicon refresh can take a few days to several weeks. To speed it up, submit your homepage for indexing in Google Search Console.
The HTML link tag is wrong or missing. Google reads the <link rel="icon"> tag from your HTML head. Without it, Google falls back to /favicon.ico at the root.

If your favicon meets all four conditions and still isn’t appearing after a few weeks, check Search Console’s URL Inspection tool to confirm the link tag is being parsed and the image file is reachable.

Dark mode favicons: should you have one?

You can serve a different favicon for dark mode browser tabs by embedding prefers-color-scheme inside an SVG favicon:

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

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

For most B2B sites, a dark-mode favicon is a nice polish but rarely worth the maintenance cost. It matters most when your logo has a single colored element that disappears against the opposite background (a dark logo on a dark tab, a light logo on a light tab). If your logo already works on both light and dark backgrounds, skip it.

Common favicon mistakes

The mistakes that show up in real audits, in rough order of frequency:

Only shipping a single PNG. No .ico fallback, no apple-touch-icon, no manifest. Works in your test browser, breaks everywhere else.
Uploading a tiny source. A 64x64 logo scaled up to 512x512 will be blurry no matter how good the generator is. Source at 512x512 or larger.
Saving the source as JPEG. Compression artifacts that look fine at full size become smears at 32x32. PNG or SVG only.
Designing for the largest size. Fine lines and small text that look great at 512x512 vanish at 16x16. Design for the smallest size you ship.
Wrong file paths. The link tag points to /icons/favicon.ico but the file is at /favicon.ico (or vice versa). Use the path the generator outputs, or update both consistently.
Mixed mime types. Serving a PNG with Content-Type: image/x-icon or vice versa. Stick to the defaults your static host gives you and the right file extension on disk.
Transparent apple-touch-icon. iOS adds an opaque background behind transparent pixels, which usually looks wrong. Export the apple-touch-icon as a flat 180x180 PNG.
Forgetting the manifest. Without site.webmanifest, Android and PWA installs fall back to whatever they can guess from your HTML, which is rarely what you want.

Frequently Asked Questions

What is a favicon?

A favicon is a small icon associated with a website. It appears in browser tabs, bookmarks, search results, and on mobile home screens, helping users quickly identify a site.

What image size should I upload to generate a favicon?

For best results, upload a 512x512 PNG or SVG image. This size allows the generator to create all required favicon sizes without quality loss.

What favicon sizes does this generator create?

The generator creates all standard favicon sizes required by modern platforms, including 16x16 and 32x32 for browsers, 48x48 for legacy support, 180x180 for Apple Touch Icons, and 192x192 and 512x512 for Android and Progressive Web Apps.

Do I need multiple favicon sizes for my website?

Yes. Different browsers and devices request different favicon sizes. Including multiple sizes ensures proper display across all platforms and avoids blurry or missing icons in browser tabs, bookmarks, and home-screen shortcuts.

What is a site.webmanifest file?

A site.webmanifest file defines how a website behaves when installed as a web app. It includes the app name, icons, theme color, and display settings, and is required for Progressive Web Apps.

Is a single PNG favicon enough for all browsers?

No. While some browsers may display a single PNG, full compatibility requires multiple icon sizes and a web manifest to ensure consistent results across browsers, iOS, Android, and PWAs.

Does having a favicon improve SEO?

A favicon is not a direct ranking factor, but it improves user experience, brand recognition, and trust, which can positively impact click-through rates and engagement. Google also displays favicons next to your URL in mobile search results, so a clean favicon contributes to SERP CTR.

Can I use this favicon generator for any website?

Yes. The generated favicons work for static websites, blogs, e-commerce sites, web applications, and Progressive Web Apps. The HTML snippet and web manifest produced by the tool work with any framework or CMS.

How long does it take for Google to show my new favicon in search results?

Google typically refreshes favicons within a few days to a few weeks after recrawling your site. To show in search results, your favicon must be hosted at a URL Google can crawl over HTTPS, served at a size that is a multiple of 48 pixels (192x192 works well), and not blocked by robots.txt. If your favicon still isn't appearing after several weeks, submit your homepage in Google Search Console to request a recrawl.

Why does my favicon look blurry or pixelated?

Blurry favicons usually come from one of three causes: the source image was too small (anything under 256x256 will lose detail when scaled up), the source was a JPEG with compression artifacts, or the design has thin lines or small text that disappears at 16x16 and 32x32 sizes. Upload a clean 512x512 PNG or SVG with bold, high-contrast shapes.

Can I use an SVG as my favicon?

Yes. All modern browsers (Chrome, Firefox, Safari, Edge) support SVG favicons through <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Always include a PNG and an ICO fallback alongside the SVG for older browsers and for platforms like iOS that don't render SVG favicons.

What's the difference between favicon.ico and favicon.png?

favicon.ico is a legacy multi-resolution container that can hold several sizes (16x16, 32x32, 48x48) in a single file. It's still useful for legacy browsers and tools that look for /favicon.ico at the root. Favicon PNGs are modern single-resolution files referenced via <link rel="icon"> tags. The recommended setup is to ship both: favicon.ico at the root for fallbacks, plus PNGs declared in your HTML for modern browsers.

Do I need a separate apple-touch-icon?

Yes. iOS uses the apple-touch-icon (180x180 PNG, no transparency) when a user adds your site to their home screen. Without it, iOS may pick a blurry screenshot or default icon. Add <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> in your HTML head, and make sure the file is a flat PNG with no alpha channel so iOS doesn't add an unintended white background behind transparent areas.

Free Favicon Generator (Image to Favicon, All Sizes)