Free online favicon generator (ICO, PNG, Apple & PWA)

Q: Can I use an SVG whose colors change in dark mode?

Yes. If you upload an SVG it's included as is as icon.svg, so you can edit it and add a @media (prefers-color-scheme: dark) rule inside to change its colors.

Which favicon files a website needs in 2026

For years, favicon generators produced more than 20 files: dozens of sizes for every iOS version, Windows 8 tiles, browserconfig.xml… Today most of that is unnecessary. Current browsers and operating systems are happy with five files, which is exactly what this tool generates:

File	Size	What it's for
`favicon.ico`	16, 32 and 48 px	Tabs, bookmarks, history and any tool that requests `/favicon.ico` directly
`icon.svg`	Vector	Tabs in modern browsers, sharp at any density (only if you upload an SVG)
`apple-touch-icon.png`	180 px	Icon when the site is added to the home screen on iPhone and iPad
`icon-192.png` and `icon-512.png`	192 and 512 px	PWA icons on Android, Chrome OS and desktop, plus the splash screen
`icon-maskable-512.png`	512 px	Version with a safe zone so Android can crop it into a circle, squircle or teardrop

The ZIP also includes the site.webmanifest with the name, colors and icon paths, and a favicon-32x32.png in case you don't have an SVG.

How to create your favicon step by step

Upload your logo. Ideally an SVG or a square PNG of 512 px or more. If it isn't square, it's centered and fitted without distortion.
Choose the background. Transparent looks good in tabs, but iOS and the maskable icon always need a solid background, so the tool uses white or the color you pick.
Adjust padding and corners. 5-10% padding keeps the logo off the edges. Rounded corners only apply when there's a background color.
Check the preview in the browser tab (light and dark mode) and on the iOS and Android home screens.
Download the ZIP, copy the files to your site's public folder and paste the code into the <head>.

The code you need to paste

For a regular HTML site, this is all the markup you need:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Order matters: browsers that understand SVG prefer icon.svg, and the rest use the ICO. The sizes="48x48" attribute on the ICO avoids a Chrome quirk that made it pick the ICO even when an SVG was available.

In Next.js (App Router) you have two options. The simplest is to copy favicon.ico, icon.svg and apple-icon.png (renaming apple-touch-icon.png) into the app/ folder: Next.js generates the tags automatically. The other is to keep them in /public and declare them in metadata.icons, which is the code in the generator's Next.js tab.

In WordPress, go to Appearance → Customize → Site Identity → Site Icon and upload icon-512.png; WordPress generates the other sizes.

Why each size

16 and 32 px are what you see in tabs: 16 on standard screens and 32 on Retina screens. At that size fine details vanish, so if your logo has small text, consider using just the symbol or the initial.
48 px is used by Windows for shortcuts and by Google in search results. Google asks for a favicon that's a multiple of 48 px and crawlable.
180 px is the size iOS requests for the home screen icon. iOS doesn't support transparency here: it fills it with black, which is why the tool always adds a background.
192 and 512 px are the minimums Chrome requires to consider a PWA installable. The 512 one is also used on the splash screen.
Maskable 512 px: Android applies a mask with whatever shape the manufacturer chooses. Everything important must fit inside a circle covering the central 80% of the icon, which is why this version has at least 12% padding.

Common favicon mistakes

Using a PNG renamed to .ico. Some browsers accept it and others don't. This tool's favicon.ico is a real ICO container with three PNGs inside.
An overly detailed logo. A horizontal logo with text becomes a smudge at 16 px. Design or crop a square version.
Forgetting dark mode. A black icon on a transparent background disappears in dark tabs. Check the preview in both modes, or use an SVG with @media (prefers-color-scheme: dark) inside.
Browser cache. Favicons are cached very aggressively. If you don't see the change, open /favicon.ico directly and hard-reload with Ctrl+F5, or try a private window.
Unoptimized icons. An icon-512.png exported from an editor can weigh 100 KB. The tool optimizes them losslessly with OxiPNG, usually 30-60% smaller.

Frequently asked questions

Do I still need a favicon.ico?

Yes. Although modern browsers use SVG or PNG, many tools, RSS readers and email clients request /favicon.ico directly from the domain root. It's the most compatible file.

How big should the source image be?

Ideally an SVG. If you use PNG or JPG, at least 512 × 512 px so the PWA icon isn't blurry. Images smaller than 180 px produce pixelated large icons.

Why doesn't my favicon show in Google?

Google needs the favicon to be linked from the home page, crawlable (not blocked in robots.txt), square and a multiple of 48 px. It can take days or weeks to update in the results.

What is a maskable icon?

It's a version of the icon with a safe zone so Android can crop it with each manufacturer's shape without cutting off the logo. It's declared in the manifest with "purpose": "maskable".

Is my logo uploaded to a server?

No. The icons are drawn with canvas and optimized with WebAssembly in your browser. Nothing leaves your device.

Can I use an SVG whose colors change in dark mode?

Yes. If you upload an SVG it's included as is as icon.svg, so you can edit it and add a @media (prefers-color-scheme: dark) rule inside to change its colors.

Favicon generator