✓
Includes rel=icon tags
HTML Code
Favicon HTML Code Example
Copy the generated HTML Code into your website head to connect favicons and app icons.
✓
Includes apple-touch-icon tags
✓
Includes manifest and Windows Tiles meta tags
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 does the HTML Code go?
Place it inside the page head. In Nuxt, it can live in the app head configuration.
Do the paths have to be at the root?
Not strictly, but root paths are easier to maintain and reuse.
Related reading
How To
How to Add a Favicon
Adding a favicon comes down to uploading the icon files and placing the correct link tags in the head.
Favicon Generator
Favicon Generator
Generate the essential favicon files and integration code your website needs from one source image.
site.webmanifest
site.webmanifest Generator
The manifest file tells browsers your site name, icons, theme color, and installed display behavior.