Almost every favicon generator asks you to upload your logo to a server, waits, and hands back a zip containing twenty files, most of them for browsers that no longer exist. This one does not upload anything. Your browser decodes the image, draws it to a canvas at each size, and assembles the .ico container and the zip archive in JavaScript on your machine. You can disconnect from the internet after the page loads and it still works.
You get the five files that actually matter in 2026, a site.webmanifest with your name and theme colour already filled in, and the four lines of HTML to paste into your head. Do not have a logo ready? Type a letter or two, pick a colour, and you have a perfectly respectable favicon in about fifteen seconds.
- A real multi-size favicon.ico
- apple-touch-icon.png at 180px
- Android icons at 192 and 512
- site.webmanifest, written for you
- Live tab, iPhone and Android previews
- Letters, an image or an emoji as the source
- The whole pack as one zip
- Nothing uploaded, no signup
What does a complete favicon set look like in 2026?
Five files, not twenty. favicon.ico at the root of your domain containing 16, 32 and 48 pixel frames, because a long tail of software still requests that exact path without asking your HTML first. apple-touch-icon.png at 180 pixels for iOS home screens. icon-192.png and icon-512.png for Android and progressive web apps. And a site.webmanifest pointing at the last two. The huge packs you see elsewhere are still generating Windows tile images and Safari pinned-tab masks for browsers that stopped mattering years ago.
Why does my logo look terrible at 16 pixels?
Because it is a logo, not an icon. At 16 pixels square you have 256 pixels in total to work with, and after antialiasing the effective detail is far less than that. A wordmark becomes a grey smear. A thin line-art symbol loses its lines entirely. This is not a problem you can solve by exporting more carefully; it is a design problem, and the answer is a separate, simpler mark. Take one letter, or the single most recognisable shape in your logo, weight it up, and give it a solid background so it holds an edge against any browser theme.
Does the favicon matter for Google?
It is not a ranking factor, but Google displays it next to your result in mobile search, which makes it a click-through factor in a list where every other result has one. Google publishes requirements for the icon it will show: it needs to be square and a multiple of 48 pixels, it needs to live at a URL that does not change, and the file needs to be crawlable rather than blocked in robots.txt. A site with no favicon gets a generic globe, which reads as abandoned.
Why is this generator entirely in your browser?
Because there is no reason for it not to be, and every reason for it to be. Uploading a logo to a stranger's server to have it resized is a slightly absurd thing to do, and it is what almost every favicon tool asks you to accept. Your browser can already decode an image, draw it to a canvas at any size, and export a PNG. The only pieces that were genuinely missing were the .ico container and the zip archive, both of which are simple binary formats we write in JavaScript. The result never touches a network, which is faster for you and costs us nothing to run.
How do I install the files once I have them?
Unzip the pack, drop every file in the root directory of your website next to your home page, and paste the four lines of HTML into the <head> of your site template. Then hard-refresh, because browsers cache favicons aggressively and will happily show you the old one for days. If it still looks wrong, open yourdomain.com/favicon.ico directly: if that shows the new icon, your HTML is fine and you are looking at a cache.
Which file does what
Five files cover everything that still matters. Here is what each one is for.
| File | Size | Where it shows up | Skip it? |
|---|---|---|---|
| favicon.ico | 16, 32, 48 | Browser tabs, bookmarks, anything requesting the root path | Never |
| apple-touch-icon.png | 180 | iPhone and iPad home screens, Safari shortcuts | Only if nobody uses iOS |
| icon-192.png | 192 | Android home screens and app switchers | No |
| icon-512.png | 512 | Progressive web app splash screens | Only if you will never be installable |
| favicon-96.png | 96 | Google search results and some feed readers | Optional but cheap |
| site.webmanifest | JSON | Tells Android which icons, name and theme colour to use | Only if you skip both Android icons |
How to add a favicon to your website
-
1
Design for 16 pixels, not for your letterhead
Use one letter, a monogram, or the single most recognisable shape in your logo. Detail disappears at this size no matter how carefully you export.
-
2
Give it a background
A transparent icon vanishes against a dark browser theme. A solid or gradient panel behind the mark means it reads the same everywhere.
-
3
Download the pack
Seven files and the HTML snippet, built in your browser and zipped without anything being uploaded.
-
4
Put the files in your site root
Every file goes in the top-level directory next to your home page, so favicon.ico sits at yourdomain.com/favicon.ico.
-
5
Paste four lines into your head
One line each for the ico, the Android icon, the Apple touch icon and the manifest. Put them in your site-wide template, not one page.
-
6
Hard refresh, then check the file directly
Browsers cache favicons for days. If yourdomain.com/favicon.ico shows the new icon, your HTML is fine and you are looking at a cache.
Fair questions.
Do I still need a favicon.ico file?
Yes, and it is the one file you cannot skip. Browsers, feed readers, link previews and a long tail of older software request /favicon.ico from the root of your domain whether or not you have declared anything in your HTML. If it is not there you get a 404 on every page load and a blank icon in some clients. Everything else in the pack is an enhancement; favicon.ico at the root is the baseline.
What sizes do I actually need in 2026?
Fewer than the twenty-file packs suggest. A favicon.ico containing 16, 32 and 48 pixel versions, a 180 pixel apple-touch-icon for iPhone and iPad home screens, and 192 and 512 pixel PNGs for Android and progressive web apps. That is five files and it covers essentially everything. The enormous packs are catering to browsers that no longer exist.
Why does my favicon look like mush at 16 pixels?
Because a logo designed at 400 pixels has detail that physically cannot survive being scaled to 16. Thin strokes disappear, gaps close up, and text becomes noise. The fix is not a better resizer, it is a different artwork: use a single letter, a monogram, or the one distinctive shape from your logo, drawn heavier than feels right. Look at any favicon you can actually recognise in a crowded tab bar and you will find it is simpler than the logo it came from.
Is my image uploaded anywhere?
No. There is no server in this at all. Your file is read by your own browser, drawn to a canvas, and the .ico and .zip are assembled in JavaScript on your machine. You can open your network tab and watch nothing happen, or turn off your wifi after the page loads and it will still work.
Should the favicon have a background or be transparent?
Give it a background. A transparent favicon disappears against a dark browser theme or a dark home screen, and Safari in particular will render it as a grey smudge. A solid or gradient panel behind the mark means it reads the same everywhere. The one exception is a pinned Safari tab icon, which is a monochrome SVG and a separate thing entirely.
What is the site.webmanifest for?
It tells Android and progressive web apps which icons to use when someone adds your site to their home screen, along with the name and theme colour to show while it loads. Without it Android will scrape something from your page and usually pick badly. The generator writes one for you with the icon paths already filled in.
Does a favicon affect SEO?
Not as a ranking factor, but Google does show it beside your result on mobile search, which makes it a click-through factor. A missing or unreadable favicon in a list of ten results is a small, constant tax on your traffic. Google also has requirements for the one it displays: it must be a multiple of 48 pixels square, reachable at a stable URL, and crawlable.
Can I use an emoji as my favicon?
Yes, and it is a perfectly good answer for a side project or a landing page. Pick one in the generator and it is drawn to canvas and exported like any other artwork, so it works everywhere rather than only in browsers that support inline SVG favicons. For a real business, a letter in your brand colour reads better and is not going to be redrawn by the next OS update.
Go and make a favicon.
Fifteen seconds if you use letters, a minute if you have a logo. Nothing is uploaded either way.
Open the generatorWant more? There is a gradient generator, a glassmorphism generator and hundreds of click-to-copy CSS components in our resources library.