Generate a Favicon and Add It to Your WordPress Theme

To generate a favicon and get it showing in your WordPress theme, you need two things: a small set of correctly sized icon files, and the right <link> tags in your theme’s <head> section. Once those are in place, browsers can find your icon and display it in tabs, bookmarks and history. This guide walks you through it step by step, even if you have never edited a theme file before.

WordPress also has a built-in Site Icon feature that handles most of this for you. But if you want full control over file formats, sizes or the exact markup, adding the link tags yourself is the more reliable route. Below you will find both approaches so you can pick what fits your comfort level.

What a favicon actually needs to work

A favicon is just a tiny image that browsers request from your site. There is no single “correct” file anymore, so modern setups usually include a few formats:

• favicon.ico — the classic format, still useful as a fallback for older browsers and some feed readers.
• PNG icons — commonly at 32×32 and 16×16 pixels for browser tabs, and 180×180 for Apple touch devices.
• SVG icon — optional, but scales cleanly on modern browsers.
• site.webmanifest — a small JSON file that points Android and some desktop browsers to larger icons.

You do not need every format to get started. A 32×32 PNG plus a 180×180 Apple touch icon covers most real-world cases, and adding the rest is a nice polish step.

Step 1: Generate a favicon in the right sizes

Start with a square source image, ideally at least 512×512 pixels, so it stays sharp when scaled down. Simple shapes and high contrast read best at 16 pixels, which is roughly the size of a browser tab icon.

1. Open a favicon tool in your browser. With FaviconForge, everything runs locally in the browser — no sign-up and no uploads to a server.
2. Drop in your square logo or image.
3. Choose the output sizes you want. At minimum, pick 32×32 and 180×180.
4. Download the generated files and keep them together in one folder.

If you are working from a screenshot or a photo, crop it to a square first. A non-square image will either be stretched or letterboxed, and neither looks good in a tab.

Step 2: Upload the files to your theme or site

You have two sensible places to put the files. Choose one and stay consistent.

Option A: Inside your theme folder

Upload the icon files to your active theme’s directory, for example /wp-content/themes/your-theme/images/. You can do this with an FTP client or your host’s file manager. This keeps everything in one place, but remember that theme updates can overwrite custom files, so a child theme is safer.

Option B: In the media library or site root

Uploading to the site root (the folder where WordPress is installed) lets browsers find /favicon.ico automatically, even without a link tag. Uploading through the Media Library is easier for beginners, but the file paths will include the uploads folder, so copy the exact URL of each file.

Step 3: Add the HTML link tags to your theme

This is the part most people get stuck on. The link tags belong inside the <head> element. In WordPress, you should not paste them directly into header.php if you can avoid it, because a small plugin or a child theme function is cleaner and survives theme updates.

The link tags themselves

Here is the markup, using placeholder paths you will replace with your own file locations:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Only include the lines for files you actually created. A broken link to a missing file is worse than no link at all, because it can cause 404 errors on every page load.

Adding the tags with a small plugin or functions file

If you are comfortable with a child theme, you can hook the tags into the head with a snippet in functions.php:

add_action('wp_head', function () {
  echo '<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">';
});

Replace the path with your real file location. If editing PHP feels risky, a lightweight “insert headers and footers” plugin lets you paste the same link tags into the head without touching code. Either way, the markup is identical.

Step 4: Test that the favicon shows up

After saving your changes, open your site in a browser and look at the tab. If you see a generic globe or a blank page icon, the browser is probably showing a cached version.

• Hard-refresh the page (Ctrl+F5 on Windows, Cmd+Shift+R on Mac).
• Open the page in a private or incognito window, which starts with a clean cache.
• Visit your icon URL directly, for example yourdomain.com/images/favicon-32x32.png, to confirm the file loads.
• Check the page source and search for rel="icon" to verify the tags are actually in the head.

Favicon caches can be stubborn. If the file loads fine but the tab still looks wrong, give it some time or test in a different browser before assuming something is broken.

WordPress site icon vs. manual link tags

WordPress has a built-in option under Appearance → Customize → Site Identity called Site Icon. Upload a square image at least 512×512 pixels and WordPress generates the necessary sizes and adds the link tags for you.

If you already set a Site Icon and also add manual tags, you may end up with duplicate or conflicting links. Pick one method. If you go manual, remove the Site Icon so WordPress does not output its own tags.

Common favicon mistakes to avoid

• Using a non-square image. It will look squashed or padded at small sizes.
• Pointing to files that do not exist. Double-check every path in your link tags.
• Forgetting the Apple touch icon. iOS uses it when someone saves your site to their home screen.
• Relying only on a cached result. Always test in a fresh browser window.
• Adding tags outside the head. Browsers may ignore them entirely.

Once your files and tags are in place, you have a favicon that works across tabs, bookmarks, mobile home screens and search results. It is a small detail, but it makes your site look finished and easier to spot among a dozen open tabs.

Ready to make your icons? Generate a favicon with FaviconForge — it runs entirely in your browser, with no sign-up and no uploads, then come back and paste the link tags into your theme.