pngw.net

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).

Icons to generate

Image and target path

Example HTML <head> to use icons

<link rel="icon" type="image/png" href="/iconx/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/iconx/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/iconx/android-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/iconx/apple-touch-icon-180x180.png" sizes="180x180">
<meta name="msapplication-config" content="/iconx/browserconfig.xml">

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

favicons, touch icons, pinned sites or look at alternatives like realfavicongenerator.net developer.apple.com Touch Icons, Firefox docs etc.