Favicon Generator
Upload an image or type a letter or emoji. Everything is rendered in your browser — no upload, no waiting queue.
Drop an image here or click to choose
Square PNG or SVG works best — at least 512×512
Preview
HTML to add to your <head>
Which favicon files do you actually need?
The classic advice was to generate 20 files for every device ever made. Modern browsers made most of that unnecessary. A practical, complete set in 2026 is four files:
| File | Size | Used by |
|---|---|---|
favicon.ico | 32×32 | Legacy browsers and some feed readers that request the root path directly |
favicon.svg | vector | Every current browser — scales perfectly and can adapt to dark mode |
apple-touch-icon.png | 180×180 | iOS home-screen bookmarks |
icon-512.png | 512×512 | Android home screen and PWA install prompts, via the web manifest |
The HTML
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Design rules for something 16 pixels wide
- One idea only. A favicon is smaller than a word. A single letter, a simple mark or a bold silhouette — never a full logo with text.
- High contrast. It sits on both light and dark browser chrome. Test against both.
- No thin lines. Anything under about 1/16th of the width disappears at 16 px.
- Fill the canvas. Browsers add their own padding; built-in margin makes the icon look small and timid.
- Check it at 16 px. Not at 512. The preview row above shows the real sizes.
Dark mode favicons
An SVG favicon can carry a media query inside it, so the icon recolours with the user's theme:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #111 }
@media (prefers-color-scheme: dark) { path { fill: #fff } }
</style>
<path d="…"/>
</svg>Why the browser ignores your new favicon
Favicons are cached aggressively — often beyond a normal hard refresh. To check a change, open the icon URL directly and reload it there, or append a query string such as /favicon.svg?v=2 in your link tag.
Frequently asked questions
Do I still need favicon.ico?
Only for the long tail. Some crawlers, feed readers and older browsers request /favicon.ico from the site root regardless of your HTML, so a 32×32 file there is cheap insurance.
What size should a favicon be?
Design at 512×512 and let it scale down. Ship an SVG for modern browsers, a 180×180 PNG for iOS and a 32×32 ICO for legacy clients.
Are my images uploaded?
No. Rendering and resizing happen on a canvas in your browser, so brand assets never leave your machine.
Why does my favicon look blurry?
Usually a small source image scaled up, or fine detail that cannot survive 16 pixels. Start from a vector or a 512 px original and simplify the artwork.
Can I use an emoji as a favicon?
Yes — switch to text mode and paste one. Note that the emoji renders with your operating system’s font, so it will look slightly different on other platforms.
Does a favicon affect SEO?
Indirectly. Google shows favicons next to mobile search results, so a clear, recognisable icon can improve click-through even though it is not a ranking factor.