Favicon Generator

Turn one image or SVG into a complete favicon set, including a real multi-size favicon.ico, a maskable Android icon and the matching <head> markup.

  • Generators
  • Free
  • No sign-up
Choose an image

Click to choose a file, or drop one here

PNG, JPG, WebP or SVG. Square and 512 px or larger works best.

Free · Private · Runs in your browser

Why use it

  • The complete set

    A real multi-size favicon.ico, Apple touch icon, Android and maskable icons, plus the manifest.

  • Live previews

    Adjust colours, fit, padding and shape and see the result in tabs and home screens.

  • Paste-ready markup

    Download one zip and paste the generated <head> HTML.

Great for

  • Launching a new website or web app
  • Making a PWA installable with proper icons
  • Refreshing a brand's icon across every device

How to use

  1. Choose a PNG, JPG, WebP or SVG. A square image of 512 px or more works best.
  2. Set the app name, colours, fit, padding and shape. The previews update live.
  3. Download all (.zip) and upload the files to your site, in the folder you set.
  4. Paste the HTML into your <head>. The site.webmanifest is already in the zip.

The set follows current practice. A real favicon.ico covers legacy browsers,favicon.svg (from SVG sources) stays sharp at any size, the apple-touch-icon has a solid background because iOS renders transparency black, and the maskable icon keeps your logo inside Android's safe zone.

More

External links

Questions

How do I create a favicon for my website?
Upload a square image (512 px or more works best), adjust the colours and shape, then download the zip. Upload the files to the root of your website and paste the generated HTML into the <head> of your pages.
What files do I get?
A favicon.ico with 16, 32 and 48 px layers, a 96 px PNG, a 180 px apple-touch-icon, 192 and 512 px Android icons, a 512 px maskable icon and a site.webmanifest. An SVG source is also included as favicon.svg. Older sets add separate 16, 48 and 128 px PNGs; browsers take those sizes from the ICO, so they aren't needed.
Does my image leave the browser?
No. Every size is drawn on a canvas locally and zipped in your browser.
What source image works best?
An SVG, or a square PNG of 512 px or more. Images that aren't square are never stretched. Contain fits the whole image with transparent margins, and Cover fills the icon and crops the edges.
What is a maskable icon?
Android crops home-screen icons to its own shape, such as a circle or a squircle. A maskable icon fills the square with your background colour and keeps your logo inside the central safe zone, so the crop never cuts into it.
Why does the Apple icon have a background?
iOS shows transparent pixels in an apple-touch-icon as black, so that icon is always filled with your background colour.

29 more free tools, no sign-up

Encoders, generators, media and marketing tools — all right in your browser.

Browse all tools