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.
<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 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>
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" } ], …
<?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>
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.