icongen - Web and App icons and PNG favicons

Generate Web and App Icons from a single source image locally in your browser. Ideally use an SVG image (needs a set width and height in SVG).
icongen@github.

Icons to generate

Image (SVG preferred) and target path


Example HTML <head> to use icons

Use the given source SVG as favicon.svg. Add favicon.ico to website root but do not add to HTML

<link rel="icon" href="/iconx/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/iconx/apple-touch-icon.png"/>
<link rel="manifest" href="/iconx/manifest.json" />

SVG with dark mode option example

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: #fff } 
    }
  </style>
  <path class="icon" fill="#000" … />
</svg>

PWA manifest.json icons section

…
"icons": [
  {
      "src": "/iconx/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
  },
  {
      "src": "/iconx/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
  },
  {
    "src": "/iconx/android-chrome-maskable-192x192.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "maskable"
  },
  {
    "src": "/iconx/android-chrome-maskable-512x512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "maskable"
  }
], 
…

legacy browserconfig.xml for Edge (Windows 10)

<?xml version="1.0" encoding="utf-8" ?>
<browserconfig>
  <msapplication>
    <tile>
    <square70x70logo src="/iconx/tile70x70.png" />
    <square150x150logo src="/iconx/tile150x150.png" />
    <wide310x150logo src="/iconx/tile310x150.png" />
    <square310x310logo src="/iconx/tile310x310.png" />
    <tilecolor>transparent</tilecolor>
    </tile>
  </msapplication>
</browserconfig>
    


Background info how and when to use icons

Definitive edition of "How to Favicon in 2021" favicons, touch icons, pinned sites or look at alternatives like realfavicongenerator.net developer.apple.com Touch Icons, Firefox docs etc.

Thanks to MrColes for the .ico generation code.