✓
Put icon files in public or the site root
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.
✓
Copy HTML Code into the head
✓
Clear browser cache and verify the result
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
Why did my favicon not update?
Browsers cache favicons aggressively. Clear cache or test in a private window.
How do I add a favicon in Nuxt?
Configure it in app.head.link in nuxt.config.ts or place the files in the public root.
Related reading
HTML Code
Favicon HTML Code Example
Copy the generated HTML Code into your website head to connect favicons and app icons.
Favicon Generator
Favicon Generator
Generate the essential favicon files and integration code your website needs from one source image.
Website Favicon
Complete Website Favicon Guide
A professional website needs more than favicon.ico: mobile, PWA, and system shortcuts all use different icon assets.