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
- 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.
- If you imported an image, crop it to the square area you want to use.
- Switch between the 64x64, 32x32, 24x24 and 16x16 tabs and adjust each one so the design stays legible at every size.
- Click Preview to see how your favicon will actually look before exporting.
- 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.