How to Install a Favicon - Step-by-Step Guide (2025)

Learn how to install favicons on HTML, WordPress, and Next.js sites. Get your favicon working in 5 minutes with our free Image Converter tool.

You've generated your favicon package—now let's get it on your website. This guide walks you through installing favicons on static HTML sites, WordPress, and Next.js. It takes about 5-10 minutes.

We'll start with the basics (uploading files and adding HTML code) and then cover platform-specific steps. If you haven't created your favicon yet, use our Image Converter to generate all 31 files you need.

What you'll need

A favicon package (ZIP file) from our Image Converter, Text Generator, Emoji tool, or Logo Creator
Access to upload files to your website (FTP, hosting panel, or Git)
Ability to edit your site's <head> section (HTML, theme editor, or layout file)

Step 1: Generate your favicon package

If you haven't already, go to our Image Converter and upload your logo (PNG, JPG, or SVG). The tool generates 31 favicon files in different sizes—16×16 for browser tabs, 180×180 for iOS, 512×512 for Android, and more.

Click "Download ZIP" to get your package. Inside you'll find an /icons/ folder with all the PNG files, plus an HTML snippet (html-code.txt) with the <link> tags you need to copy.

Unzip the package on your computer. Keep the /icons/ folder and html-code.txt handy—you'll need them in the next steps.

Step 2: Install on a static HTML site

For a plain HTML site, upload the /icons/ folder to your website's root directory (same folder as index.html). You can use FTP, your hosting control panel's file manager, or Git.

Open html-code.txt from the ZIP package. Copy all the <link> and <meta> tags. Paste them inside the <head> section of your HTML files (between <head> and </head>).

If you put the /icons/ folder somewhere else (like /assets/icons/), update the href paths in the HTML code to match. Save your files and upload them to your server.

<!-- Example: include in your <head> -->
<link rel="icon" href="/icons/favicon-32x32.png" sizes="32x32" type="image/png" />
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />

Step 3: Install in WordPress

The easiest way: Go to Appearance → Customize → Site Identity in your WordPress admin. Upload your main favicon image (any size works—WordPress will resize it). This works for 90% of themes.

If your theme doesn't have that option, use a plugin like "Insert Headers and Footers" or "Simple Custom CSS and JS". Paste the HTML code from html-code.txt into the header section. Then upload the /icons/ folder to your theme directory via FTP or the file manager.

After saving, clear your caching plugin (WP Super Cache, W3 Total Cache, etc.) so browsers load the new favicon. Test in an incognito window to make sure it's working.

Step 4: Install in Next.js

In a Next.js project (App Router or Pages Router), put the /icons/ folder inside the public/ directory. For example: public/icons/favicon-32x32.png.

Open your root layout file (app/layout.tsx for App Router, or pages/_document.tsx for Pages Router). Add the <link> and <meta> tags from html-code.txt inside the <head> element. Make sure the paths start with /icons/ (not public/icons/).

Commit the changes and deploy. Next.js will serve the files from the public/ folder automatically. No extra configuration needed.

Step 5: Test your favicon

Open your site in an incognito/private window (Ctrl+Shift+N or Cmd+Shift+N). Check the browser tab—you should see your new favicon. If you see the old one, hard refresh (Ctrl+F5 or Cmd+Shift+R).

Test on mobile: On iOS, tap Share → Add to Home Screen. On Android, tap the menu → Add to Home Screen. Check if the icon looks right on your home screen.

Still seeing the old icon? Clear your browser cache completely (Ctrl+Shift+Delete or Cmd+Shift+Delete). Some browsers cache favicons aggressively. If that doesn't work, check our Troubleshooting tutorial.

What's next?

Your favicon is installed! Now you can test it across browsers and platforms, or dive into advanced topics like PWA manifests and dynamic favicons.