Helpful Guide

Developer Tools

Favicon Generator

A favicon is the small icon shown in browser tabs, bookmarks and, at larger sizes, on phone home screens. Modern sites need several sizes rather than a single file.

Upload a square image to generate every size you need along with the markup to reference them.

Drag an image here

A square PNG or SVG-exported PNG of at least 512×512 px works best

How to use this tool

  1. 1Add a square source image, ideally 512×512 or larger.
  2. 2Review the generated sizes in the preview.
  3. 3Download the icons you want to publish.
  4. 4Copy the HTML snippet into the head of your pages.

Which sizes matter

16×16 and 32×32 cover browser tabs and bookmark bars. 180×180 is the Apple touch icon used when a site is saved to an iOS home screen. 192×192 and 512×512 are referenced from a web app manifest for Android and installable web apps. Producing all of them from one source keeps the branding consistent.

Designing for 16 pixels

At tab size there is room for one shape or one letter, nothing more. Full logos with wordmarks turn into an unreadable smudge. Take the strongest element of your brand — a monogram, a symbol — and give it high contrast against the background. Test it at actual size before committing.

Transparent or solid

A transparent background adapts to light and dark browser interfaces, but a thin dark logo can vanish against a dark tab bar. A solid, brand-coloured background is safer and reads consistently everywhere.

Frequently Asked Questions

Do I still need favicon.ico?

Rarely. Current browsers read PNG icons from link tags. Keeping a small .ico at the site root only helps very old clients.

Should the source be square?

Yes. A non-square image is fitted into a square frame, which can crop or pad it in ways you did not intend.

Where do the files go?

Usually the site root or a dedicated icons folder. Make sure the paths in the HTML snippet match where you actually upload them.

Why is my new favicon not showing?

Browsers cache favicons aggressively. Force a reload, or open the icon URL directly to confirm it is being served.