Place all files into the root of your website. The provided HTML snippet and site.webmanifest reference files at the root (e.g., /favicon.png).
Preview
favicon.png
(48×48)
(scalable)
(180×180)
icon-512.png (512×512)
For full functionality, open this page in a web browser. Due to OS limitations, icons may not display outside the browser — on mobile devices, open them directly from the archive.
If you’ve set up a dark theme version of your SVG icon, viewing the dark or light variant depends on your device’s theme settings. To see how the icon looks in each mode, switch your device between light and dark themes as desired.
Insert into <head>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
If you use a different folder for icons
If you decide to use a dedicated folder for icons, move the files there and update the paths in html_code.html, site.webmanifest and in the HTML <head> snippet. Alternatively, set the path prefix in the generator.
Note: If some images are not displayed when viewing this file directly from the ZIP, try extracting the archive first and then open the file again.