How to Add a Favicon to Your Website (HTML, WordPress, Shopify, Next.js)
Adding a favicon in 2026 takes two files and two lines of HTML. The twenty-file bundles that old favicon generators still produce, with a manifest, six Apple sizes, and Microsoft tile configs, are mostly cruft you don't need. Here's the minimal set that works everywhere, then the exact steps for the four platforms most people are on.
The modern baseline is one PNG (or SVG) for browsers and search, plus one apple-touch-icon for iOS home screens:
<link rel="icon" href="/favicon.png" sizes="96x96" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Both tags go in the <head>. If you also want an SVG that adapts to light and dark browser themes, add <link rel="icon" href="/favicon.svg" type="image/svg+xml"> before the PNG line and browsers that support it will prefer it. That's the whole file set for most sites. To generate the actual image files at the right sizes, including the apple-touch-icon, use our favicon generator, which outputs the minimal set rather than the bloated one.
If you're deciding between PNG, ICO, and SVG for the source, the favicon format guide covers the tradeoffs. This post assumes you've got an image and just need it installed correctly.
The two sizes that matter
You need the icon at two effective sizes: 96x96 (or larger, a multiple of 48px so Google will use it in search) for browsers and results, and 180x180 for the apple-touch-icon, which iOS uses when someone adds your site to their home screen. A single 512x512 master PNG downscales cleanly to both, so you can often ship one large PNG and one apple-touch file and be done.
Skip the favicon.ico unless you specifically support Internet Explorer or very old browsers. Modern browsers all read PNG and SVG icons.
Plain HTML
If you control the HTML directly, this is the whole job:
- Put
favicon.png(96x96 or larger) andapple-touch-icon.png(180x180) in your site root or an/assetsfolder. - Add the two link tags to the
<head>of every page. If you use a shared header include, add them once there. - Deploy, then hard-refresh (Cmd/Ctrl+Shift+R) because browsers cache favicons aggressively.
That's it. Reference the icon with a root-relative path (/favicon.png) so it resolves the same on every page regardless of URL depth.
WordPress
WordPress calls the favicon the "Site Icon" and handles the tags for you:
- Go to Appearance > Customize > Site Identity (or Settings > General in some newer setups).
- Under Site Icon, click Select site icon and upload a square image at least 512x512.
- Crop if prompted, publish, and WordPress injects the icon and apple-touch tags into your theme head automatically.
If you don't see a favicon after that, a caching plugin or your CDN is usually holding the old version; purge both. Avoid hardcoding <link rel="icon"> into your theme header on top of the Site Icon setting, or you'll ship two competing tags.
Shopify
Shopify themes expose the favicon in the theme editor:
- In your admin, go to Online Store > Themes > Customize.
- Open Theme settings (the gear icon at the bottom of the left panel), then Favicon.
- Upload a square image; Shopify recommends 32x32 but upload larger (at least 96x96) so it holds up in Google's results, and Shopify downscales as needed.
- Save. The theme's
theme.liquidalready contains thefavicon_urlfilter that renders the tag, so you don't touch code.
If your theme is older and has no favicon setting, add the link tag manually in theme.liquid inside <head>, using an image you've uploaded to Settings > Files for the href.
Next.js
The Next.js App Router handles favicons through the file system, which trips people up because there are no manual link tags:
- Drop
icon.png(oricon.svg) into yourapp/directory. Next.js detects it and generates the<link rel="icon">automatically, hashing the URL for cache-busting. - For the iOS icon, add
apple-icon.png(180x180) toapp/as well. - That's the whole setup for App Router. Don't also add manual tags in a custom head, or you'll double up.
For the older Pages Router, put favicon.ico in /public and add the link tags to _document.js yourself, since the file-based magic is App Router only. Either way, because Next.js hashes the icon URL, confirm the generated tag points at a stable path if you care about Google's favicon caching.
When you actually need more than two files
The minimal two-file setup covers browsers, Google search, and iOS home screens, which is what most sites need. There are two cases where a few more files earn their place.
The first is a web app manifest. If your site is a progressive web app that people install to their phone or desktop, you want a manifest.webmanifest with 192x192 and 512x512 icons, because that's what the install prompt and the installed app icon use. If you're not building an installable app, skip the manifest entirely; it does nothing for a normal website.
The second is theme-aware icons. An SVG favicon can respond to the browser's light and dark mode using a prefers-color-scheme media query inside the SVG, so a dark logo doesn't disappear against a dark browser chrome. That's a nice touch for a brand that cares about the detail, and it's one extra file. Everything beyond these two cases, the Microsoft tile configs and the six legacy Apple sizes old generators emit, you can delete without consequence.
When the favicon just won't update
The most common post-install complaint is that the old icon won't go away, and it's almost always caching, not a code problem. Browsers cache favicons harder than almost any other asset. Work through this in order: hard-refresh the page, then purge any CDN or caching plugin, then test in a private window to rule out your own browser cache, and finally check that you're not shipping two competing <link rel="icon"> tags (a theme setting plus a hardcoded one, say), because the browser's choice between them is unpredictable. If the tab is right but Google still shows a globe, that's a different problem entirely, covered below.
Verify it actually works
After installing, do two checks. First, load your site and confirm the tab shows the icon (hard-refresh past the cache). Second, and more important for SEO, confirm Googlebot can fetch it: run the homepage through our favicon checker to see the icon at the size Google would use. If the browser tab is right but search still shows a globe, the issue is crawlability or size, not installation, and the favicon troubleshooting guide walks through every cause.
Frequently Asked Questions
What is the minimum favicon setup I need?
One PNG (or SVG) icon at 96x96 or larger, referenced with <link rel="icon">, plus one 180x180 apple-touch-icon for iOS. That covers browsers, Google search, and home-screen bookmarks. The larger multi-file bundles old generators produce are mostly unnecessary now.
Where do I put the favicon file?
In your site root or an assets folder, referenced with a root-relative path like /favicon.png so it resolves on every page. In WordPress and Shopify you upload it through the admin instead. In the Next.js App Router you place icon.png in the app/ directory and the framework wires it up.
Why isn't my new favicon showing in the browser?
Browsers cache favicons hard. Do a hard refresh (Cmd/Ctrl+Shift+R), and if you use a caching plugin or CDN, purge those too. The old icon can persist for a while even after the file is replaced.
Do I still need a favicon.ico file?
Only if you support Internet Explorer or very old browsers. Every modern browser reads PNG and SVG favicons, so a single PNG plus an apple-touch-icon is enough. Next.js Pages Router is the one common case where a favicon.ico in /public is still the simplest path.
What size favicon does Shopify or WordPress want?
Both let you upload a large square image and downscale it. Upload at least 512x512 so the platform can generate every size it needs, including the version Google uses in search, which must be a multiple of 48px.