Favicon Generator From Image

Convert PNG, SVG, JPG, or JPEG images into necessary favicon files.

For the browser using HTML copy this


<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!--last one only if you have svg-->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

If you’re making a PWA, also add this to the HTML:


<link rel="manifest" href="/manifest.webmanifest">

And a file with the web app manifest:


// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Maskable icons should have bigger paddings. The safe zone is a 409×409 circle. Use maskable.app to check your icon. Read more in an article about favicons design.