Favicon Generator

What a favicon is and why it matters

The favicon is the tiny icon shown in a browser tab, in bookmarks, and on a phone home screen when someone saves your site. It is small, but it is one of the most repeated pieces of branding you have; every visitor with several tabs open finds your site by that icon rather than by reading text. A site without one shows a blank or generic page symbol, which quietly signals that the site is unfinished.

Why several sizes are needed

Different places use different sizes. Browser tabs use small 16 and 32 pixel versions, Windows shortcuts prefer 48 pixels, Apple devices use a 180 pixel touch icon for the home screen, and Android uses 192 pixels. Supplying only one size means the system has to scale it, which usually looks blurry. Generating the full set once means your icon looks crisp everywhere.

Designing an icon that works at 16 pixels

• Use a square image; anything else gets squashed or cropped.
• Keep it simple. A single letter, symbol or mark reads far better than a detailed logo.
• Use strong contrast so the shape is visible against both light and dark tab bars.
• Avoid small text; it turns into an unreadable smudge at 16 pixels.
• Leave a little padding so the mark does not touch the edges.

Using your files

Download the PNG sizes and the .ico file, put them in your site's root folder, and reference them in the page head. Most modern frameworks pick up a favicon automatically if you place it in the expected location. Everything here is generated in your browser, free, with no signup and no watermark.