Favicon Generator
Every favicon size, a real multi-size .ico and a web manifest from one image. Everything runs locally with zero file uploads.
- In
- PNG · JPEG · WebP · SVG
- Out
- ICO · PNG · webmanifest · ZIP
Drop your logo
PNG, JPEG, WebP or SVG. Square and at least 512 × 512 px works best. You can also paste an image.
Every favicon file from one image
This favicon generator turns a single logo into the complete set a website needs today: a favicon.ico with 16, 32 and 48 pixel icons inside, sharp PNGs from 16 to 512 pixels, the Apple touch icon, the Android Chrome icons, a site.webmanifest and the HTML tags to paste into your page. Square the artwork, add padding, round the corners or put it on a solid tile, then download everything as one ZIP. The resizing and the ZIP are done on your device, so your logo is never uploaded anywhere.
How to make a favicon
- Drop a PNG, JPEG, WebP or SVG onto the page, or paste one. A square logo of at least 512 × 512 pixels, or an SVG, gives the sharpest result.
- Choose Fit to keep the whole image with space around it, or Fill to crop it to a square. Add padding and a corner radius if you want a rounded tile.
- Pick a background colour, or keep it transparent. The Apple touch icon always gets a solid background, because iOS paints transparency black.
- Fill in the app name and colours for the web manifest, then press Download ZIP, or download single files from the preview.
- Upload the files to the root of your site and paste the HTML tags into the
<head>of every page.
Which favicon files do modern browsers actually need?
Favicon advice is full of leftovers from 2012: dozens of sizes, Windows tile XML and Safari pinned-tab masks. Browsers today look for far less. Four files cover practically every browser, phone and operating system in use.
Everything else in the ZIP is there for completeness: the 16, 32 and 48 pixel PNGs for tools and CMSs that ask for them by name, and an optional 150 × 150 Windows tile for legacy pinned sites. Extra files do no harm, but you do not need to link them all.
- favicon.ico
- The universal fallback. Browsers request /favicon.ico on their own even if no tag points to it, and so do RSS readers, bookmark managers and crawlers. One file holds 16, 32 and 48 pixel versions, and each is a PNG inside the ICO container, which every browser since Windows Vista reads.
- icon.svg
- A vector favicon that is sharp at every size and zoom level. Chrome, Edge, Firefox and recent versions of Safari use it when it is linked. You only get one if you start from an SVG; a raster image cannot become a real vector.
- apple-touch-icon.png
- A 180 × 180 opaque PNG that iPhones and iPads show when someone adds your site to the home screen. iOS applies its own rounded mask, so the corners should be square and the background solid.
- Manifest icons
- The 192 and 512 pixel PNGs listed in site.webmanifest. Android uses them for the home-screen shortcut and the splash screen of an installed web app, and Chrome checks for them before offering to install a site.
The HTML tags to paste
The snippet links the ICO with sizes="32x32" rather than sizes="any". With "any", Chrome prefers the ICO even when an SVG is available. When you upload an SVG, the snippet links it as well, so browsers that support SVG favicons use it and the rest fall back to the ICO. Without an SVG, the 32 and 16 pixel PNGs are linked instead.
The theme-color meta tag tints the browser toolbar on Android and in Safari, and site.webmanifest carries your app name, colours and the large icons. Keep the file names as they are and place every file at the root of your domain, or change the paths in the snippet to match where you put them.
Designing a favicon that survives 16 pixels
- Simplify. A 16 × 16 icon is 256 pixels in total. Wordmarks and fine lines turn to mush; a single letter, a symbol or the logo mark without its text reads far better.
- Use contrast that works on both tab colours. Browser tabs are light or dark depending on the theme. The preview shows every size on a white and a near-black tile, so you can spot a dark logo that vanishes in dark mode before you ship it.
- Give it a tile when in doubt. A solid background with a little padding and a corner radius keeps a thin or transparent logo visible on any tab and looks deliberate on the home screen.
- Start big. Images are scaled down in halving steps for clean edges, but nothing can add detail that is not in the source. Give it 512 pixels or more, or an SVG.
- Check the colours. If your brand colour is too faint against a white or dark tab, test it with the contrast checker, or convert a value you were given in another notation with the color converter.
Why there is no upload
Most favicon generators send your logo to a server to be resized. This one draws every size on a canvas in your browser, writes the ICO file byte by byte in JavaScript and builds the ZIP with a small WebAssembly module, so the image never leaves your device and the tool keeps working offline once the page has loaded. That matters for an unreleased brand or a client's logo you are not meant to share yet.
Frequently asked questions
- What size should a favicon be?
- Browser tabs show favicons at 16 × 16 CSS pixels, which is 32 × 32 on high-density screens, so the ICO contains 16, 32 and 48 pixel versions. Add a 180 × 180 Apple touch icon and 192 and 512 pixel icons for the web manifest and you have covered every common case. Start from an image of at least 512 × 512 pixels.
- Do I still need a favicon.ico file?
- Yes. Browsers, feed readers and crawlers request /favicon.ico automatically even when no tag points to it, and older browsers only understand ICO. Keep one at the root of your site alongside the SVG and PNG icons.
- Can I use an SVG as a favicon?
- Yes. Chrome, Edge, Firefox and recent Safari support SVG favicons through a link tag with type="image/svg+xml". Upload an SVG here and it is included as icon.svg next to the ICO fallback, and the HTML snippet links both.
- What is an apple-touch-icon?
- It is the 180 × 180 pixel PNG an iPhone or iPad uses when someone adds your website to the home screen. It should have a solid background and square corners, because iOS rounds the corners itself and turns transparent areas black.
- Why is my favicon not showing?
- Browsers cache favicons aggressively, often for days. Check the file is reachable at the path in your link tag, then hard-refresh or open the site in a private window. Renaming the file or adding a version query such as favicon.ico?v=2 forces a fresh download.
- How do I convert a PNG to ICO?
- Drop the PNG onto this page and download favicon.ico. The generator resizes it to 16, 32 and 48 pixels and packs all three into one ICO file, with each size stored as a PNG inside the container.
- What is site.webmanifest for?
- It is a small JSON file that tells Android and Chrome your site's name, theme colour, background colour and the 192 and 512 pixel icons to use when the site is added to the home screen or installed as an app.
- Is my logo uploaded to a server?
- No. Every icon is drawn and encoded in your browser and the ZIP is built on your device. Nothing is sent anywhere, and the page keeps working offline once loaded.