How to Add a Favicon to Any Website
Raw HTML, WordPress, Shopify, Next.js, and Squarespace — all covered. Generate your favicon free, then follow the steps for your platform.
First — Create Your Favicon
Download your favicon in all required formats: SVG, PNG, ICO, Apple Touch Icon, and site.webmanifest — in one free package.
Create Favicon Free →HTML — The Complete Favicon Setup
Add these tags inside your <head> element. Place favicon files in your site root.
<!-- Primary: SVG favicon (Chrome, Firefox, Edge) --> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <!-- Fallback: PNG for Safari --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <!-- Apple Touch Icon (iOS home screen, 180x180 PNG) --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!-- PWA manifest (required for Android install & Google mobile favicons) --> <link rel="manifest" href="/site.webmanifest"> <!-- Theme colour (browser chrome tint on mobile) --> <meta name="theme-color" content="#ffffff">
favicon.ico in your HTML. Just place it in the root directory — browsers that need it (very old ones) will find it automatically at /favicon.ico without a link tag.Next.js (App Router)
Place your favicon files in the public/ directory. Next.js automatically serves the app/favicon.ico file if present. For full control, use the metadata export in your root layout:
// app/layout.tsx
export const metadata: Metadata = {
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/favicon-32x32.png', type: 'image/png', sizes: '32x32' },
],
apple: [{ url: '/apple-touch-icon.png', sizes: '180x180' }],
},
};WordPress
The easiest method: Appearance → Customize → Site Identity → Site Icon. Upload a 512×512 PNG. For SVG support or more control, see the full WordPress favicon guide →
Shopify
Go to Online Store → Themes → Customize → Theme Settings → Favicon and upload a PNG (512×512 recommended). For a detailed walkthrough, see the full Shopify favicon guide →
Squarespace
Go to Design → Browser Icon (Favicon) in your Squarespace dashboard. Upload a square PNG or ICO file (100×100 minimum, 300×300 recommended). Click Save and the favicon will update site-wide.
Squarespace does not support SVG favicons in the favicon field. Use PNG for the best result.
The Complete Favicon File Checklist (2026)
| File | Size | Purpose | Required? |
|---|---|---|---|
| favicon.svg | Any | Browser tab — Chrome, Firefox, Edge (dark mode support) | ✅ Primary |
| favicon-32x32.png | 32×32 | Browser tab fallback for Safari | ✅ Recommended |
| apple-touch-icon.png | 180×180 | iOS/macOS home screen | ✅ Recommended |
| favicon-192.png | 192×192 | Android home screen, PWA | ✅ For PWA |
| favicon-512.png | 512×512 | PWA install, Google mobile results | ✅ For PWA |
| site.webmanifest | — | PWA manifest, links to 192 and 512 PNGs | ✅ For PWA |
| favicon.ico | 48×48 | Legacy browser fallback (no link tag needed) | 📦 Optional |
FaviconStudio generates all of these in one download. Full sizes guide →