WordPress favicon generator

How to use the WordPress favicon generator

  1. Upload a square source image — 512×512 or larger gives the cleanest downscales. A transparent PNG works best, since favicons sit on browser chrome of varying colours.
  2. Review the nine generated sizes. They cover browser tabs (16, 32), Windows site icons (48, 64), Google TV (96), Android Chrome (128, 192, 512) and the Apple touch icon (180).
  3. Deselect any sizes you do not need — most sites are fine with 16, 32, 180 and 512, but the full set costs nothing to ship.
  4. Download the generated files. They use the conventional filenames (favicon-32x32.png, apple-touch-icon.png, android-chrome-512x512.png) that WordPress themes and plugins expect.
  5. Install using one of the three methods shown on the page: the WordPress Customizer, uploading to your theme's images folder, or a functions.php hook.

When to use it

Use this when you want a complete favicon set with the filenames WordPress and mobile browsers actually look for, rather than a single favicon.ico. WordPress's built-in Site Icon feature in the Customizer accepts one square image and generates its own sizes, which is fine for a basic site — but it does not give you the files to commit to a theme, and it will not produce an apple-touch-icon or the Android Chrome splash sizes for a headless or custom setup. If you only need one icon and you are happy managing it through the WordPress admin, the Customizer alone is enough. Reach for this tool when you want the files themselves.

Example

If you install by editing theme files rather than using the Customizer, the head markup looks like this:

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

The 192 and 512 Android Chrome sizes are referenced from site.webmanifest rather than a link tag — that is what supplies the icon when someone adds your site to their home screen.

Frequently asked questions

Why not just use the WordPress Site Icon feature?
You can, and for many sites it is the right answer — the Customizer's Site Icon accepts one square image and generates sizes automatically. This tool exists for the cases it does not cover: getting the actual files to commit into a theme or version control, producing an apple-touch-icon and Android splash sizes for a headless or decoupled setup, or generating icons without logging into WordPress at all.
What size should the source image be?
512×512 or larger, and square. Every output is a downscale, so the source sets the ceiling on quality. Upscaling a 64×64 image to 512 produces a soft, blurry result at the large sizes that are used for Android splash screens and home-screen icons.
Do I need all nine sizes?
No. 16 and 32 cover browser tabs, 180 covers iOS home screens, and 512 covers Android splash. The remaining sizes (48, 64, 96, 128, 192) cover Windows site tiles, Google TV, and older Android Chrome. They are small files and shipping all of them avoids a browser falling back to a poorly scaled icon, but a minimal set of four is perfectly reasonable.
Does it generate a favicon.ico file?
The tool outputs PNGs at each size. Modern browsers have supported PNG favicons for well over a decade and prefer them, so a .ico is rarely needed. If you specifically need .ico for a legacy requirement, convert the 32×32 PNG afterwards.
Why does my favicon still show the old icon after installing?
Favicons are cached aggressively — by the browser, and often by a CDN or a WordPress caching plugin as well. Hard-refresh the page, clear your site cache, and if you use Cloudflare or similar, purge the cached favicon URL. It is also worth opening the favicon file's URL directly to confirm the new file is actually being served.
Is the image uploaded to a server?
No. The resizing happens in your browser using a canvas element. The image never leaves your machine, which also means the tool works on a logo you have not published yet.

Related tools

Last updated: 2026-07-26