Favicon Generator
Runs entirely in your browser. Your files and data never leave your device.
16×16favicon-16x16.png
32×32favicon-32x32.png
48×48favicon-48x48.png
180×180apple-touch-icon.png
192×192icon-192.png
512×512icon-512.png
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
About this tool
Drop in a logo or any square-ish picture and the page draws it at the six sizes a website needs: 16, 32 and 48 pixels for browser tabs, 180 for the icon iOS saves to the home screen, and 192 and 512 for Android. The download is a single ZIP with those PNGs, a favicon.ico, a site.webmanifest and a copy of the HTML you need in your <head>.
What is in the ZIP?
Six PNGs (favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, icon-192.png and icon-512.png), plus favicon.ico holding the 16, 32 and 48 pixel versions in one file. The ICO format has allowed PNG-compressed images inside it since Windows Vista, so the file stays small while old browsers that only look for /favicon.ico still find something to show.
site.webmanifest lists the 192 and 512 pixel icons and carries the app name you type in the settings menu, along with a short_name cut to 12 characters, which is roughly what Android shows under a home screen icon. Leave the field empty and it says “My site”. The last file, favicon.html, is the same five <link> tags the copy button puts on your clipboard.
Are my images uploaded anywhere?
No. Your picture is drawn onto a canvas element in the page and encoded to PNG by the browser itself, then zipped in the same tab. Nothing is sent to a server, so an unreleased logo or a client’s brand mark never leaves your machine. You can open the page, pull the network cable, and everything still works.
What should I feed it?
PNG, JPEG, WebP and SVG files are accepted. A square source works best because the image is scaled to fit and centred, so a wide banner ends up with transparent bands above and below it. SVG is the nicest input for a logo, since every size is drawn from the vector rather than from a resized bitmap. Whatever you upload, remember that 16 pixels is tiny: a full wordmark turns to mush at that size, and a single letter or symbol reads much better.
Once the files are in place, browsers cache favicons for a long time, so a hard refresh may be needed before you see the new icon. The MDN page on link types explains what each tag in the snippet does.