What is a favicon — and which files do you actually need?
A favicon is the small icon that identifies your site in browser tabs, bookmarks, history, home-screen shortcuts and — increasingly important — next to your pages in Google’s mobile search results. Over the years generators have produced dozens of sizes, but current browsers need only a handful of files: a favicon.ico for legacy and tool support, an optional scalable icon.svg, a 180 × 180 apple-touch-icon.png for iOS, and 192 and 512 px PNGs listed in a web app manifest for Android and installable web apps.
This generator produces exactly that set from one image. It draws each size on a canvas in your browser — with optional background, padding and rounded corners — and builds a genuine multi-resolution favicon.ico containing 16, 32 and 48 px images. It also writes the <link> tags for your <head> and a site.webmanifest, and packs everything into a single ZIP. Your image never leaves your device.
Start from a square image of at least 512 px, or better, an SVG. Favicons are tiny, so simplify: a bold letter or symbol with strong contrast reads far better at 16 px than a detailed logo with thin lines or small text.
How to use the Favicon Generator
- Choose or drop a PNG, JPG, WebP or SVG image. Square images of 512 px or more give the sharpest results.
- Adjust padding, corner radius, background and fit, and check the previews — especially the 16 and 32 px versions.
- Download
favicons.zip(or individual files) and upload the contents to the root of your website. - Fill in the app name and colours, then paste the generated HTML into your site’s
<head>. The manifest in the ZIP already matches your settings.
Example
The recommended modern markup, served from the site root:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#4f46e5">Favicons in WordPress
WordPress has a built-in Site Icon setting. In classic themes it is under Appearance → Customize → Site Identity; in block themes, add or edit the Site Logo block in the Site Editor and enable “Use as site icon”. Upload a square image of at least 512 × 512 px and WordPress generates the 32, 180, 192 and 270 px versions and prints the <link> tags automatically.
Use the files from this generator instead when you need a real favicon.ico at the site root (some tools, RSS readers and old browsers request it directly), an SVG favicon, or a full web app manifest. Upload them to the root folder, add the HTML through your theme or a header-code plugin, and remove the Site Icon so the two sets do not conflict.
Why sizes="32x32" on favicon.ico?
Chrome can prefer the ICO over the SVG unless the ICO declares a specific pixel size (sizes="any" triggers this). Declaring sizes="32x32" lets browsers that support SVG favicons choose icon.svg, while older browsers still use the ICO. The ICO file itself contains 16, 32 and 48 px images, and the browser picks the best match.
Frequently Asked Questions
Does Google show my favicon in search results?
Yes, on mobile and desktop. Google needs a square icon (at least 8 × 8 px, ideally larger than 48 × 48 px) referenced with a rel="icon" link on your home page, and both the page and the icon must be crawlable by Googlebot. The files from this generator meet those requirements. It can take days or weeks for a new icon to appear.
Why does my new favicon not show up?
Browsers cache favicons aggressively, often separately from the page cache. Open the icon URL directly (e.g. /favicon.ico) and hard-refresh, try a private window, or temporarily add a version query such as ?v=2 to the href values.
Why is the Apple touch icon not transparent or rounded?
iOS applies its own rounded mask to home-screen icons and fills transparent pixels with black. The generator therefore gives the 180 px icon square corners and a solid background (white unless you choose a colour), which is what Apple expects.
Can I make the SVG favicon adapt to dark mode?
Yes. An SVG favicon can contain a <style> block with @media (prefers-color-scheme: dark) to change its colours. Edit your SVG before uploading it; the generator includes your original SVG file unchanged as icon.svg.
What is the web manifest for?
The site.webmanifest tells Android and desktop browsers which name, icons and colours to use when someone installs your site or adds it to the home screen. Combine it with correct meta tags and Open Graph tags so your site is presented consistently everywhere.