Favicon Generator
Make every favicon size from one image.
Drop your logo here or click to choose
PNG, SVG, JPG, WebP or ICO. A square logo of 512 × 512 px or more works best. Files are processed in your browser and never uploaded. They stay in this browser until you remove them.
Ctrl+OchooseCtrl+Vpaste
A favicon is the small icon browsers show in tabs and bookmarks; phones use bigger versions when someone adds your site to their home screen. Drop one logo and this generator makes every file a website needs — favicon.ico, PNG favicons, the Apple touch icon, Android icons and a web manifest — with live previews and the HTML to paste into your page. It runs in your browser, so your logo never leaves your device; it's free and needs no sign-up.
How to make a favicon
- Drop your logo (PNG, SVG, JPG or WebP) anywhere on the page, paste it with Ctrl+V, or click to choose it. An image you added in another image tool is already in the list, as you left it there: click its thumbnail to use it. The sample logo lets you try it without a file.
- The logo is framed for you: the mark of a wide logo, or the logo without its empty edges. Drag the square on the logo to change it, or choose Whole logo. Pick a background (your logo's own colors come first), the padding and the shape; the previews update as you go.
- Click Download all (ZIP), put the files in your site's root folder, then click Copy HTML and paste the tags into your page's <head>.
Features
- favicon.ico with 16, 32 and 48 px icons, plus 16 and 32 px PNG favicons
- apple-touch-icon.png (180 px) and Android Chrome icons (192 and 512 px)
- site.webmanifest with your app name and theme color, and the HTML tags for your <head>
- Finds the mark of a wide logo automatically; drag the square to use another part, or fit the whole logo
- Background: transparent, your logo's own colors or any color; padding from 0 to 30%; square, rounded or circle shape
- Live previews of every size, a browser tab and a home screen, in light and dark
- Starts from PNG, SVG, JPG, WebP or ICO; every file in one ZIP
Is it private?
Yes. The icons are made in your browser by a WebAssembly image engine; your logo and the files never leave your device. The logo stays in this browser until you remove it from the list.
Frequently asked questions
Which favicon sizes do I need?
Four files cover almost everything: favicon.ico with 16, 32 and 48 px for browser tabs, bookmarks and Windows shortcuts; a 180 px apple-touch-icon.png for iPhone and iPad home screens; and 192 and 512 px PNGs, listed in site.webmanifest, for Android and installable web apps. The ZIP contains all of them, plus 16 and 32 px PNGs for browsers that prefer PNG.
How do I add the favicon to my HTML?
Put the files in your site's root folder, so that /favicon.ico opens, then click Copy HTML and paste the tags into the <head> of every page. Browsers look for /favicon.ico even without any tag; the tags add the PNG sizes, the Apple icon and the manifest.
Why does apple-touch-icon.png have a background?
Because iPhones and iPads show transparent pixels as black and round the corners themselves, so the Apple icon is always a full, opaque square: your background color, or white when the background is transparent. The other icons keep their transparency and shape.
Can I use an SVG logo?
Yes. Your browser draws the SVG at its own size, or at 1024 px when it is smaller, and every icon is made from that. An SVG that links other files (images, fonts or stylesheets) can't be drawn completely as an image, so the tool tells you instead of making incomplete icons; export it as PNG, or embed its images, first.
I replaced my favicon but the browser still shows the old one. Why?
Browsers cache favicons for a long time. Reload the page with Ctrl+F5 (Cmd+Shift+R on a Mac), or open the site in a private window, to see the new icon.