How to Add a Favicon to Your Website
A favicon is the small icon shown in browser tabs, bookmarks, history and search results. Modern support is not a single tag: different browsers and platforms look for different files. Set the folder your icons live in and your theme colour, and this generator writes the complete, current set of tags to paste into your page's <head>.
The generator writes the HTML only. You still need the image files themselves at the paths it references — the section below lists exactly which ones.
How to Use This Tool
Set the icon folder
Use / if the files sit at your site root, or a path such as /icons/ if they live in a subfolder.
Pick a theme colour
Used by some mobile browsers to tint the address bar and by installed web apps.
Copy the tags
Paste them inside the <head> of every page — usually in your site template or header file.
Upload the icon files
Create each file at the referenced path, then run the Favicon Checker to confirm they all load.
What Each Tag Is For
- favicon.ico with sizes="any" — the universal fallback every browser supports, which can contain several sizes in one file.
- icon.svg — a scalable icon that modern browsers prefer when available, sharp at any size and able to adapt to dark mode.
- 16×16 and 32×32 PNGs — classic browser tab and bookmark sizes.
- apple-touch-icon at 180×180 — used when someone adds your site to an iPhone or iPad home screen.
- site.webmanifest — tells Android and installable web apps which icons and name to use.
- theme-color — tints the browser interface on supporting mobile browsers.
The Image Files You Need
Start from a square source image at least 512×512 pixels — ideally a simplified version of your logo, since fine detail disappears at 16 pixels. Export it at each size the tags reference:
- favicon.ico — containing 16×16, 32×32 and 48×48 versions.
- icon.svg — the vector version, if you have one.
- favicon-16x16.png and favicon-32x32.png.
- apple-touch-icon.png at 180×180, with a solid background, since iOS does not handle transparency well.
- 192×192 and 512×512 PNGs, referenced from site.webmanifest rather than from the HTML.
Writing site.webmanifest
The manifest is a small JSON file you create yourself. At minimum it needs a name, a short_name, and an icons array listing the 192×192 and 512×512 PNGs with their sizes and type. Add theme_color and background_color to match your brand, and display: "standalone" if the site should open like an app when installed.
If your site will never be installed as an app, the manifest is optional, and you can delete that line from the snippet.
Favicons in Google Search
Google shows your favicon next to your results and reads it from the link tag on your homepage. It should be square, larger than 48×48 pixels by Google's recommendation, and crawlable — not blocked by robots.txt. A multi-size favicon.ico or an SVG icon satisfies that.
New or changed icons take time to appear in results, because Google recrawls them on its own schedule.
Adding the Tags in Common Platforms
- Plain HTML sites — paste the snippet into the <head> of each page or your shared header include.
- WordPress — Appearance → Customize → Site Identity sets a site icon and writes the tags for you; use the snippet only if your theme does not.
- Next.js — place icon files in the app folder using the framework's icon file conventions, or declare them in the metadata export.
- Shopify — upload a favicon in the theme editor's settings; the theme writes the tag.
- Static site generators — add the snippet to the base layout template.
Frequently Asked Questions
Do I need all of these tags?
favicon.ico alone covers most browsers. The rest improve the icon on high-resolution screens, iOS home screens and installed web apps — worth having, but not strictly required.
Where does site.webmanifest come from?
It is a small JSON file you create yourself, listing your icons and app name. This tool generates the HTML that references it, not the file's contents.
Where should favicon files go?
The site root is simplest, because browsers request /favicon.ico there by default. Any folder works as long as the paths in the tags match, which is what the folder setting controls.
Can I use a PNG instead of an ICO file?
Yes. Every modern browser accepts PNG favicons through a link tag. Keeping a favicon.ico at the root still helps, since some tools and older browsers request it without reading any tags.
Why is my new favicon not showing?
Usually browser caching. Hard-refresh the page or open the icon URL directly. If it still fails, run the Favicon Checker to confirm each file loads and is served as an image.