You've generated your favicon files — now what? A favicon doesn't show up automatically just because the file exists on your server. Your website's HTML needs to explicitly point to it. Here's exactly what to paste and where.
1. Upload Your Favicon Files
Place your generated favicon files (16×16, 32×32, 180×180, 512×512, etc.) in your website's root folder, or a dedicated /images/ or /favicon/ folder — either works, as long as your HTML paths match where you put them.
2. Add These Tags to Your <head>
Paste this block inside the <head> section of every page — or just your main template/layout file if your site uses one:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png"><link rel="manifest" href="/site.webmanifest"><meta name="theme-color" content="#ffffff">
💡 Quick tip: Our Favicon Generator gives you this exact snippet, pre-filled with the right filenames, via the "Copy Snippet" button after you generate.
3. Clear the Cache to See It
Browsers cache favicons aggressively — sometimes for days. If your new favicon doesn't show up right away, do a hard refresh (Ctrl+Shift+R / Cmd+Shift+R), or open the site in a private/incognito window to confirm it's actually working before assuming something is broken.
4. Don't Forget the Web Manifest
If you referenced site.webmanifest above, you'll need a small JSON file by that name in your root folder listing your icon sizes and app name — this is what powers "Add to Home Screen" on Android and PWA installs. If you don't need PWA support, you can safely drop that one line.
Haven't generated your favicon files yet? Our free Favicon Generator creates every size and gives you this exact code snippet.
✦ Generate Favicons Free