✓
Generate name and short_name
site.webmanifest
site.webmanifest Generator
The manifest file tells browsers your site name, icons, theme color, and installed display behavior.
✓
Configure 192x192 and 512x512 icons
✓
Generate theme_color and background_color
HTML Code example
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<!-- Windows Tiles -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="msapplication-config" content="/browserconfig.xml">FAQ
Where should the manifest file go?
It is usually placed at the site root and referenced from the head as /site.webmanifest.
Does every website need a manifest?
It is not required for non-PWA sites, but it is useful in a complete favicon package.
Related reading
PWA Icons
PWA Icon Generator
PWA icons are usually declared in site.webmanifest for install prompts, launch screens, and device shortcuts.
HTML Code
Favicon HTML Code Example
Copy the generated HTML Code into your website head to connect favicons and app icons.
Website Favicon
Complete Website Favicon Guide
A professional website needs more than favicon.ico: mobile, PWA, and system shortcuts all use different icon assets.