EasyFavicon

How to Install a Favicon

Once you've generated your favicon set, installation is two steps: put the files where the browser can reach them, and reference them in your page's <head>. The exact mechanics differ by stack. Below are the three most common setups.

Method 1 — Plain HTML

  1. Upload the generated files to your site's root directory so they live at /favicon.ico, /web-app-manifest-192x192.png, etc.
  2. Paste these tags inside <head>:
<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" />

The manifest declares the 192×192 and 512×512 icons for Android and PWAs. A minimal version:

{
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Method 2 — Next.js (App Router)

Next.js gives you two options. The simplest is convention-based: drop the files in the app/ directory and Next.js wires up the tags automatically.

  1. Place favicon.ico in your app/ directory. Next.js serves it and adds the link tag for you.
  2. Put apple-touch-icon.png and icon.png in app/ as well, or store the PNGs in public/ and declare them explicitly via metadata (below).
  3. Define icons in your root layout.tsx metadata export:
// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "any" },
      { url: "/favicon-32x32.png", type: "image/png", sizes: "32x32" },
    ],
    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180" }],
  },
  manifest: "/site.webmanifest",
};

Files referenced by absolute paths (e.g. /favicon-32x32.png) should live in public/. On the legacy Pages Router, add the same <link> tags inside <Head> in pages/_document.tsx instead.

Method 3 — WordPress

Pick whichever fits your access level.

  1. Built-in Site Icon. Go to Appearance → Customize → Site Identity → Site Icon and upload a 512×512 image. WordPress generates and inserts the common sizes automatically. This is the easiest route.
  2. Plugin. A favicon plugin gives you control over the full set and the manifest without editing code.
  3. Theme header. Upload the files via Media or FTP, then add the link tags to your theme's header.php inside <head>. Use a child theme so updates don't overwrite your edits.
  4. functions.php. Inject the tags via the wp_head hook:
add_action('wp_head', function () {
  echo '<link rel="icon" href="/favicon.ico" sizes="any" />';
  echo '<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />';
  echo '<link rel="manifest" href="/site.webmanifest" />';
});

Verify it worked

Favicons are cached aggressively. After deploying, do a hard refresh, or open the icon URL directly (e.g. yoursite.com/favicon.ico) to confirm it loads. If the old icon lingers, clear your browser cache or test in a private window.

Don't have your files yet? Generate a complete favicon set from one image, right in your browser.

Generate your favicons →