Guide · 8 min read · free tool
Favicons: A Letter, a Color, and the Tiny Icon a Tab Actually Shows
Sep 3, 2026 · Zelpura Editorial · All guides
Tabs, bookmarks and home screens do not show your wordmark. They show a tiny square, and if that square is a shrunken logo, it becomes a smudge. A favicon designed as a favicon is usually one letter or one simple shape, in colors that survive a dark tab bar and a light one. This page makes that set from a letter and colors, in the browser, and packs the sizes a site actually needs. It does not upload your brand to a generator that keeps the zip. It is a letter and a download.
The inputs are the job, not a formality. Type one or two characters. One is more readable at 16 pixels. Two can work if they are bold and you accept that they will feel tight. Background and text color need contrast in both themes if you can manage it. A white letter on a yellow background looks cheerful on a slide and disappears on a white browser chrome. Preview small. The large preview is for your ego. The small one is the product. If your brand color fails at small size, this is the moment to pick a favicon color that is related to the brand rather than identical to the lightest tint in the palette.
A letter Z on a deep green, almost white letter, exported as the set. Drop the files where your site expects them and add the link tags if they are not already there. Hard-refresh. A favicon cache is stubborn. If you still see the old icon, the generator did not fail. The browser is loyal to the previous file. Clear the cache or change the query string. Then check a phone home screen if you added a touch icon. The home screen is a different size and a different mood. A mark that works in a desktop tab can look lost on a phone if the padding is wrong. Look at both before you call it done.
The miss is uploading a detailed logo and expecting a miracle at 16 pixels. Simplify first. The second miss is forgetting the HTML link, so the beautiful file sits in a folder no browser requested. The third miss is using a letter that is not your name, because it was available, and training people to look for the wrong mark. A favicon is wayfinding. Wayfinding that points at a clever joke will fail the user who has twelve tabs open and wants yours. Be obvious. Obvious is the design.
Pick the letter a stranger would use to find you in a tab strip. Set colors. Download. Install the files. Hard-refresh. Check dark mode if your browser has it. Then stop tweaking. A favicon is done when it is recognizable, not when it is perfect. Perfect is how a one-hour task becomes a brand project. You can revisit it next season. This season, the tab should show the right mark instead of a generic document icon, which is what visitors see when you postpone the file.
This is a local generator for simple letter marks. It is not a full identity system, and it will not trace a complex logo into a perfect tiny icon. Do not use it to imitate another site's favicon. A confusingly similar tab icon is a bad user experience and can be a trademark problem. Nothing here hosts the file for you. You still have to put it on your server and reference it. A zip on your laptop is not a favicon. A linked file is.
Keep the zip with the site's other brand files, named with the date, so a redesign does not start from a mystery PNG in a downloads folder. When you change the mark, change the file name or the cache will keep the old one in the one browser you forgot to check. Write down the colors you used. Next time you make a social avatar, you will want the same two colors, or the brand will drift one pastel at a time until nobody recognizes the tab. Drift is slow. A note is cheap.
Read the result back before you act. Shrink the preview until it is the size of a tab. If you cannot tell the letter, it is not done, no matter how nice the large version looks.
A maskable icon for Android home screens wants the important pixels in a safe center, because the system may clip the corners into a circle or a squircle. If you only design to the square, a letter near the edge gets cropped on some phones. Keep the mark centered and padded. The page's padding is a start. The phone in your pocket is the test. Spend the extra minute. It is the minute that separates a favicon from a cropped accident. Check the icon in a bookmark bar too, not only in a tab. Bookmark bars are where cramped letters fail first.
Related: Palette · QR codes · Mockups · All 93 tools