Where do favicon files go on my website?

On a plain HTML site, place the favicon files in your site's root folder (or an /icons folder) and reference them with link tags in the . WordPress and Shopify have a built-in setting where you upload one image. Next.js auto-serves an icon if you put favicon.ico or icon.png in the app directory. The exact location depends on your platform.

Why isn't my favicon showing up?

The most common reason is browser caching — browsers cache favicons aggressively, so do a hard refresh or test in a private window. Other causes: the file path in your link tag is wrong, the file isn't actually in the root, or the icon is the wrong format. Give it a few minutes and clear the cache before assuming it's broken.

Do I need all the favicon sizes or just one?

A single favicon.ico will work for basic browser tabs, but for a polished result across devices you want the full set: the .ico for tabs, a 180x180 Apple touch icon for iOS home screens, and 192x192 plus 512x512 PNGs in a web manifest for Android and PWAs. Generate them all at once, then reference each.

Is the favicon generator free?

Yes. QuickWand's favicon generator is free with no sign-up or watermark and runs entirely in your browser, so your logo is never uploaded anywhere.

June 6, 2026

How to Add a Favicon to Your Website (WordPress, Shopify, Next.js)

You have your favicon files ready — the small .ico, the Apple touch icon, the manifest PNGs. Now comes the part that trips people up: where do they actually go? The answer depends on your platform, so here is each of the common ones.

If you haven't made the files yet, start with the free favicon generator — it builds every size in your browser, then come back here.

How to add a favicon, by platform

Plain HTML site

Upload the favicon files to your site's root folder (or an /icons folder).
Add these tags inside the <head> of your pages:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest"> — the manifest lists your 192×192 and 512×512 PNGs.

WordPress

You don't touch any files. Go to Appearance → Customize → Site Identity, find Site Icon, and upload a single square image (512×512 is ideal). WordPress generates and serves the necessary sizes for you. Some themes and SEO plugins offer the same setting in their own panels.

Shopify

Also no file uploads to your server. In your admin, open Online Store → Themes → Customize, then go to Theme settings → Favicon and upload one square image. Shopify resizes it and serves it across the store.

Next.js

This version of Next.js uses file-based metadata. Place your icon files directly in the app directory and the framework wires up the correct <link> tags automatically:

app/favicon.ico— the browser-tab icon.
app/icon.png — a larger PNG icon (you can add icon1.png, icon2.png for multiple sizes).
app/apple-icon.png— the Apple touch icon, ideally 180×180.

For PWA icons, add a manifestentry that points to your 192×192 and 512×512 PNGs. Conventions differ between Next.js versions — always check the metadata-files guide in your installed version's docs before wiring it up.

Favicon not showing up? Read this first

By far the most common complaint is “I added it but nothing changed.” Before assuming it's broken:

Clear the cache. Browsers cache favicons aggressively. Do a hard refresh or open the site in a private window.
Check the path. Visit the file directly, e.g. yoursite.com/favicon.ico. If it 404s, the file isn't where your tag says it is.
Confirm the format. Tabs expect an .ico or PNG; an SVG or WebP may not display in every browser.
Give it a minute. Some platforms and CDNs take a short while to propagate the new icon.

Need to adjust the source image first?

If your logo isn't square, crop it to a square with the free crop tool before generating, and use the image resizer if you need to scale it to a clean 512×512 first. Then run it through the favicon generator and drop the files into the right place for your platform.