Nouplo

Favicon generator

One picture in; favicon.ico, apple-touch-icon, manifest icons and the tags to paste out.

Drop files here

or click to choose from your deviceAccepted: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG

Up to 3 files per runUp to 20 MB per file10 runs per dayRemove limits with Pro✓ Works offline

Your files stay on your device

This tool runs entirely in your browser. Nothing is uploaded, nothing is stored, and you can even turn off your internet connection before you start.

How it works

  1. Add your logo: a square SVG is best, otherwise a PNG or JPG of at least 512 × 512 px.
  2. Choose how it sits in the square — the whole picture with an optional margin, or filling the square — and the shape and background.
  3. Select Make favicons, then download everything at once as a ZIP.
  4. Put the files at the root of your site and paste the tags from favicon-tags.html into the <head> of your pages.

Frequently asked questions

Which files do I get, and what is each one for?
favicon.ico holds 16, 32 and 48 px in one file, for browsers and crawlers that ask for /favicon.ico. favicon-96x96.png is for search results, where Google wants a multiple of 48 px. apple-touch-icon.png (180 px) is the home-screen icon on iPhone and iPad. The two web-app-manifest PNGs and site.webmanifest are for Android and installed web apps. Starting from an SVG adds favicon.svg, and favicon-tags.html has the lines to paste into <head>.
I chose a transparent background. Why is the apple-touch-icon not transparent?
Because iOS does not show transparency on the home screen: it fills transparent pixels with black and rounds the corners itself. That one file is therefore always a full, opaque square, in the background you picked or in white. The other icons keep the transparency.
Should I start from an SVG or a PNG?
An SVG, if you have one. Each size is then drawn from the vector, so the 16 px icon is drawn at 16 px instead of being shrunk from a large bitmap, and you also get favicon.svg, which modern browsers prefer. From a PNG or JPG, use one at least 512 × 512 px; a detailed logo will not survive 16 px either way, which is what the margin and a simpler mark are for.
Why does Google show a globe instead of my icon?
Google must be able to crawl both the icon and the home page that links it, and the icon should be square with a side that is a multiple of 48 px — the 96 px file here is made for that. Once the files are live, search results can take days or weeks to pick up the change.
Is my logo uploaded?
No. Every file is drawn in this page with your browser's canvas, and the ZIP is put together here too. Nothing is sent to a server.

Related tools