How to Create the Perfect Favicon: A Step-by-Step Guide

A favicon is the small icon shown next to your page title in a browser tab, in bookmarks, and in history lists. It is one of the smallest pieces of a website’s design, and also one of the most visible — it is on screen every time someone has your site open. Here is how to design one that actually looks good.

1. Keep the design simple

A favicon is usually displayed at 16x16 or 32x32 pixels — smaller than your thumbnail. Fine details, thin lines and small text disappear at that size. The designs that read clearly are almost always simple: a single bold letter, a monogram, or one recognizable shape.

• Use one or two colors with strong contrast against both light and dark browser tabs.
• Avoid text longer than a single letter or initial.
• Leave a small margin around the shape so it does not feel cramped against the edges.

2. Design at full size, then check it small

It is easier to draw a clean shape at 64x64 and then check how it holds up once shrunk down, than to draw directly at 16x16. In X-Icon Editor, work on the largest resolution first, then switch to the 32x32, 24x24 and 16x16 tabs to see how the design survives at each size — and use Get from 64x64 to pull the bigger version down and touch it up rather than starting over.

3. Build it in X-Icon Editor

1. Open the editor and either draw your icon with the brush, pencil, shape or text tools, or click Import to bring in an existing logo or image.
2. If you imported an image, crop it to the square area you want to use.
3. Switch between the 64x64, 32x32, 24x24 and 16x16 tabs and adjust each one so the design stays legible at every size.
4. Click Preview to see how your favicon will actually look before exporting.
5. Click Export to download your finished .ICO file.

4. Add it to your website

Upload favicon.ico to the root of your website, then reference it in the <head> of your HTML:

<link rel="icon" href="/favicon.ico" sizes="any" />

Most browsers will also automatically look for /favicon.ico at your domain root even without this tag, but including it explicitly avoids relying on that fallback. For a look at the full range of sizes different platforms expect — including mobile home screens and PWAs — see our icon sizes cheat sheet.

5. Test it properly

• Open your site in a new tab and check the favicon at actual size, not zoomed in.
• Bookmark the page and check how the icon looks in the bookmarks bar.
• Check it on a dark-theme browser as well as a light one — some designs disappear against a dark tab background.

Common mistakes to avoid

• Using your full logo unchanged. A wordmark or detailed logo that works at 200px wide usually turns into a blur at 16px. Simplify it into a mark or initial instead.
• No margin. A shape that touches all four edges looks cramped once shrunk down.
• Relying on color alone. Add enough contrast or an outline so the icon still reads on both light and dark tab backgrounds.

Once your favicon is exported, see our guide to favicon formats for which file types to also ship for phones and PWAs, and why it might not update right away once you upload it.