Favicon Generator: Create All Sizes from One Image (ICO, PNG, SVG)

That tiny icon next to your page title in the browser tab? It seems insignificant, but a missing or broken favicon makes your site look unfinished. Worse, some browsers show a generic globe icon or a blank space, which undermines trust.

The problem is that "favicon" is not one image. It is a set of images in different formats and sizes, served to different browsers, operating systems, and devices. Chrome uses a 32x32 PNG. Safari on iOS wants a 180x180 Apple Touch Icon. Windows uses different sizes for pinned tiles. Android uses yet another set of sizes for home screen shortcuts.

The Favicon Generator takes a single source image and produces every size and format you need, with the HTML markup ready to paste into your tag.

Every Favicon Size You Need (and Why)

Here is the complete list of favicon sizes and their purposes in 2026:

favicon.ico (16x16 and 32x32, bundled in one ICO file): The legacy format. Still needed for older browsers and some bookmark managers. The ICO format can contain multiple sizes in a single file.

favicon-32x32.png: Chrome, Firefox, and Edge use this in the browser tab.

favicon-16x16.png: Some browsers and contexts still request this smaller size.

apple-touch-icon.png (180x180): Safari on iOS uses this when users add your site to their home screen. iOS applies its own rounded corner mask, so your icon should be a full square without rounded corners.

android-chrome-192x192.png and android-chrome-512x512.png: Used by Chrome on Android for the "Add to Home Screen" feature and in the splash screen. Referenced in the web manifest file.

mstile-150x150.png: Windows uses this for pinned tiles in the Start menu.

safari-pinned-tab.svg: A monochrome SVG used in Safari's pinned tab feature. Should be a single-color silhouette of your logo.

site.webmanifest: Not an image, but a JSON file that references the Android icons and defines the app name and theme color.

The Favicon Generator produces all of these from one source image. Upload a square image (ideally 512x512 or larger) and download the complete package.

Choosing the Right Source Image

Your favicon needs to be recognizable at 16x16 pixels. That is tiny. Most logos do not work at that size because they have too much detail.

Guidelines for a good favicon source:

Use a symbol, not a wordmark. The letter "G" in Google's favicon is recognizable at 16px. The full word "Google" would not be. If your logo is text-based, use the first letter or a simplified version.

Keep it simple. Three or fewer shapes. Two or fewer colors. No fine lines or small text. At 16x16, detail becomes noise.

Use the full square. Favicons are displayed at edge to edge. Do not include padding in your source image. The browser provides its own padding if needed.

Start at 512x512 or larger. The generator needs to scale down, not up. Starting with a small image produces blurry results at larger sizes (like the 180px Apple Touch Icon).

Test at target sizes. Before finalizing, scale your source image to 16x16 and 32x32 in an image editor and look at it at 100% zoom. If it is unrecognizable, simplify further.

The Image Resizer can help you preview your source image at different sizes before you generate the full favicon set. The Image Converter can convert your source to PNG if it is in another format.

Adding Favicons to Your HTML

Once you have generated all the files, add this markup to the section of every page:

`html `

Place all favicon files in the root directory of your site (not in a subdirectory). Browsers look for favicon.ico at the root by default, and some older browsers ignore the tags entirely and just check for /favicon.ico.

The site.webmanifest file should contain:

`json { "name": "Your Site Name", "short_name": "Site", "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" } `

In Next.js, Nuxt, or other frameworks with a public directory, drop all files in public/ and the paths work automatically.

SVG Favicons: The Modern Approach

Modern browsers (Chrome 80+, Firefox 63+, Edge 80+) support SVG favicons. The advantage is that SVG scales perfectly to any size, supports dark mode adaptation, and produces a smaller file size.

`html `

The browser uses the SVG if it supports it and falls back to ICO otherwise.

The real power of SVG favicons is dark mode support:

`svg `

This SVG shows a dark icon on light backgrounds and a light icon on dark backgrounds. No other favicon format can do this. It is a small detail, but on sites used by developers and designers (who frequently use dark mode), it shows attention to craft.

Note that Safari on iOS does not support SVG favicons. You still need the apple-touch-icon.png for iOS.

Framework-Specific Setup

Next.js (App Router): Place favicon.ico in the app/ directory. Next.js serves it automatically. For additional icon files, use the metadata API in your root layout.tsx:

`typescript export const metadata = { icons: { icon: ['/favicon-32x32.png', '/favicon-16x16.png'], apple: '/apple-touch-icon.png', }, } `

WordPress: Upload your favicon through Appearance > Customize > Site Identity > Site Icon. WordPress generates all sizes from a 512x512 source image.

Gatsby: Install gatsby-plugin-manifest and configure it in gatsby-config.js. It generates all favicon sizes and the web manifest during the build.

Static sites: Drop all favicon files in your root directory and add the tags to every HTML page. If you use a static site generator (Hugo, Jekyll, Eleventy), add the tags to your base template.

Vercel, Netlify, Cloudflare Pages: These hosting platforms serve static files from the public/root directory without additional configuration. Drop the files, reference them in HTML, done.

Test your favicon setup with a browser's DevTools (check the Network tab for 404s on icon files) and with online tools like realfavicongenerator.net's checker.

FAQ

What image format is best for a favicon source?

PNG is the best format for source images because it supports transparency and lossless quality. SVG is even better if your icon is vector-based (logos created in Illustrator or Figma). Do not use JPEG because it does not support transparency and introduces compression artifacts at small sizes.

Do I really need all these favicon sizes?

The minimum viable set is favicon.ico (for legacy browsers) and apple-touch-icon.png (for iOS). But missing sizes mean missing icons in specific contexts: Android home screen shortcuts, Windows pinned tiles, and bookmark managers. The complete set takes 2 minutes to generate and covers every case.

Why does my favicon not show up after deploying?

The most common reason is browser caching. Clear your cache or open the site in an incognito window. The second most common reason is an incorrect path. Check the browser DevTools Network tab for 404 errors on favicon requests.

Can I use an animated GIF as a favicon?

Firefox supports animated GIF favicons. Chrome and other browsers show only the first frame. It is a fun trick but not reliable across browsers. For a consistent experience, use static PNG or SVG.