How do I add a favicon to my website?

Generate a complete icon set, upload the files (favicon.ico, the PNGs, the apple-touch-icon, and the web manifest) to your site root, then paste the matching tags into your . Hard-refresh to confirm it shows.

Where do I put the favicon files?

At the root of your site, so favicon.ico resolves at /favicon.ico. Browsers request that path automatically. The other PNGs, the apple-touch-icon, and the manifest also live at the root and are referenced by absolute paths starting with a slash.

Why isn't my new favicon showing?

Browsers and CDNs cache favicons aggressively, often for days. Hard-refresh, test in a private window, and consider versioning the filename (for example favicon-32x32.v2.png) so the new icon is fetched immediately instead of after the old one expires.

Do I need more than a favicon.ico?

For a modern site, yes. Add PNG favicons for crisp high-DPI tabs, a 180x180 apple-touch-icon for iOS, and 192/512 icons plus a maskable variant in a web manifest for Android and installable PWAs.

Back to generator

How to Add a Favicon to Your Website

To add a favicon, do four things: generate a complete icon set, upload the files to your site root, paste the <link> tags into your <head>, and verify it renders. The steps are the same everywhere - only where you paste the tags differs by platform. This is the umbrella how-to, with links to the exact instructions for your stack.

Last updated: 13 June 2026

The universal four steps

Every "how to add a favicon" tutorial - for any CMS, framework, or hand-built site - is a variation on the same four steps. Learn them once and the platform-specific guides become trivial.

Generate a complete icon set. Start from one square logo (512x512 or larger). Generate a full set: a multi-resolution favicon.ico, PNG favicons (16, 32, 48), a 180x180 apple-touch-icon, 192x192 and 512x512 PWA icons, a maskable 512, and a web manifest.
Upload the files to your site root. Copy favicon.ico, the PNG icons, the apple-touch-icon, and the site.webmanifest to the root of your site (the same level your homepage is served from), so they resolve at paths like /favicon.ico.
Paste the link tags into your <head>. Add the <link> and <meta> tags that reference your icons and manifest into the <head> of every page, usually via your site's shared template or layout.
Verify across browsers and devices. Hard-refresh a tab, open a private window, add the site to a phone home screen, and check the manifest loads in DevTools without warnings. Favicons cache hard, so test in a fresh session.

The tags to paste

A complete, modern set of <head> tags looks like this:

<link rel="icon" href="/favicon.ico" sizes="any">
<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="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#111317">

Add a favicon on your platform

The four steps stay the same; only where you upload files and paste tags changes. Pick your stack for exact menu paths and code:

CMS & website builders

WordPress - via the Site Icon customizer or a manual set.
Shopify- through the theme editor's favicon setting.
Squarespace - in the browser icon / favicon panel.
Wix - via the site favicon setting.
Webflow- in project settings under Favicon & Webclip.
Framer and Notion - in site/page settings.
Ghost - via Publication icon in settings.

Frameworks & static-site generators

Next.js - file conventions or the metadata object.
React, Vue, and Angular- in the app's HTML shell.
Astro, SvelteKit, and Gatsby - in the layout or head component.
Vite, Hugo, Eleventy, and plain HTML.
Laravel and Django - in the base template.

See the full list on the favicon by platform hub.

Adding from a specific file type

Starting from an existing image? The convert to favicon hub turns a PNG, SVG, JPG, or logo into a complete set, and can produce a real PNG to ICO, Apple touch icon, or maskable icon.

Frequently asked questions

How do I add a favicon to my website?: Generate a complete icon set, upload the files (favicon.ico, the PNGs, the apple-touch-icon, and the web manifest) to your site root, then paste the matching <link> tags into your <head>. Hard-refresh to confirm it shows.
Where do I put the favicon files?: At the root of your site, so favicon.ico resolves at /favicon.ico. Browsers request that path automatically. The other PNGs, the apple-touch-icon, and the manifest also live at the root and are referenced by absolute paths starting with a slash.
Why isn't my new favicon showing?: Browsers and CDNs cache favicons aggressively, often for days. Hard-refresh, test in a private window, and consider versioning the filename (for example favicon-32x32.v2.png) so the new icon is fetched immediately instead of after the old one expires.
Do I need more than a favicon.ico?: For a modern site, yes. Add PNG favicons for crisp high-DPI tabs, a 180x180 apple-touch-icon for iOS, and 192/512 icons plus a maskable variant in a web manifest for Android and installable PWAs.

Start with step one

The whole process begins with a clean icon set. Drop your logo into the Logo2Favicon generator and download every file you need - favicon.ico, the PNG sizes, the apple-touch-icon, the Android and maskable icons, the manifest, and the exact <head> snippet to paste - generated privately in your browser, free, with nothing uploaded.

New to all this? Read what a favicon is, then the complete favicon guide. Need the right dimensions? The favicon sizes guide and icon size cheatsheet have you covered.