How to Add a Favicon to Your Website — Step by Step
Generate Your Favicon Files
Start by creating your favicon in all required sizes. Upload your logo or image to FreeFaviconGen and download the generated favicon pack. You'll get files in multiple sizes including 16×16 for browser tabs, 32×32 for bookmarks, and 180×180 for Apple devices.
Adding to HTML
Place your favicon files in your website's root directory, then add these link tags to your HTML `<head>`: `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` and `<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>`. For PWAs, also reference icons in your `manifest.json` with the 512×512 version.
Framework-Specific Setup
In **Next.js**, place `favicon.ico` in the `app/` directory — it's automatically served. For additional sizes, use the metadata API. In **React** (CRA), place favicons in the `public/` folder and update `index.html`. In **WordPress**, go to Appearance → Customize → Site Identity → Site Icon and upload your 512×512 icon.
Testing Your Favicon
After adding your favicon, clear your browser cache (favicons are aggressively cached) and reload your site. Check that it appears in the browser tab, bookmarks bar, and when you save the page to your home screen on mobile. Use Chrome DevTools → Application → Manifest to verify PWA icons are loading correctly.