Favicon Generator

A favicon is the small icon that stands for your website. It appears in browser tabs, bookmarks and history, on phone home screens when someone adds your site, and next to your site’s name in Google search results. Without one, browsers show a plain placeholder.

Every icon is square. The ICO is a real multi-size icon file, not a renamed PNG, and transparent areas of your image stay transparent in every file except the Apple touch icon.

Upload the files to the root folder of your site, so they open at addresses like yoursite.com/favicon.ico. In projects with a public folder, such as Vite, Next.js or Astro, put them there. Then paste these lines into the head of every page, or your shared header template:

<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">

There’s no line for favicon.ico: browsers and other apps look for it at the root by themselves, so it only works if it’s there.

If your site lives in a subfolder, change the paths in the HTML and in site.webmanifest to match. The manifest is plain text, so you can edit its name and colours (white by default) in any text editor; the Color Palette Extractor can find your brand colour’s hex code.

WordPress has its own Site Icon setting, so there’s no need to upload files or edit your theme. Since WordPress 6.5 it’s in Settings > General; in older versions it’s under Appearance > Customize > Site Identity. In a block theme, the Site Logo block in the Site Editor can also set your logo as the site icon. Wording varies with themes and plugins.

WordPress wants a square image of at least 512 × 512 pixels, and android-chrome-512x512.png from the ZIP is exactly that. WordPress makes the smaller sizes and adds the HTML itself, so don’t paste the snippet into your theme as well.

A favicon is mostly seen at 16 or 32 pixels. What reads well that small:

• One simple shape: a letter, a symbol or the mark from your logo. A full logo with words becomes a smudge.
• Strong contrast that works on light and dark browser tabs.
• A square source of at least 512 pixels, or an SVG. Smaller images are enlarged for the bigger icons and look soft, and the generator warns you when that will happen, naming the icons affected. SVGs stay sharp at every size.
• Fill the square. Images that aren’t square get transparent space at the sides, so the icon comes out smaller. Crop to 1:1 first, or remove empty edges with the Image Trimmer.
• A transparent background, so the tab colour shows through.

The exception is the Apple touch icon: iPhones and iPads show transparent areas of a home-screen icon as black. So the generator fills apple-touch-icon.png with a solid colour, white unless you pick another under iPhone icon background. If your logo is white, choose your brand colour instead.

Browsers keep favicons for a long time, so a new icon can take a while to appear. To see it straight away:

• Open your site in a private window or another browser.
• Open the icon file itself, refresh it, then reload your page.
• Clear any caching plugin or CDN cache so visitors get the new files.
• Add a version to the paths in your HTML, such as /favicon-32x32.png?v=2, so browsers fetch it again.
• For a home-screen icon, remove the shortcut and add the site again.

Google refreshes favicons on its own schedule, which can take days or weeks.

Every file is made by your browser, on your own device, so your image is never uploaded. That matters when it’s an unreleased logo or a client’s brand.

You can check this yourself: open your browser’s developer tools, watch the Network tab and generate your icons. The only requests are anonymous page-view counts, described in our privacy policy. After your first visit, the generator works offline too.