Favicon Design: How to Turn Your Logo into a Browser Icon
Quick Answer
A favicon is the small icon a browser shows next to a page title in tabs, bookmarks, and on mobile home screens. To make one from your logo, isolate the icon mark or first letter, redraw it to stay legible at 16×16 pixels, and export PNGs at 32×32, 180×180, and 192×192 plus a favicon.ico at the site root. Shrinking the full logo lockup almost never works at this size.
Every time someone opens your website, your favicon is right there next to the page title. Most business owners upload a shrunken version of their full logo and end up with a smudge. Spending 20 minutes on a dedicated favicon fixes it.
What is a favicon
A favicon (short for "favorite icon") is the small image browsers display in the tab bar and bookmarks. It also becomes the home-screen icon when someone saves your site as a shortcut on a phone, and Google sometimes shows it next to your URL in search results.
Why shrinking your full logo doesn't work
A typical logo is drawn for display at 200–600px wide. Squeeze that into a 32×32 box and a wordmark becomes gray noise; thin strokes disappear; complex marks lose their silhouette. Browsers downsample aggressively, and there is no rescuing the file once that has happened. You need a separate asset designed at the size you actually need.
What to use
The rule of thumb: use whatever piece of your logo is still recognizable at the size of a fingernail.
If your logo includes a standalone icon or symbol, use that. A clean mark with a clear silhouette holds up at 32×32 better than anything else.
If your logo is text-only, use the first letter of the brand name in your logo's typeface. Make it bold and high-contrast, and put it on a solid square background if the letterform alone reads thinly.
If neither works (a long wordmark with no symbol and a fussy first letter), grab a simple geometric shape in one of your brand colors and treat it as a placeholder until you have a proper icon mark.
What you should not do is paste in the full wordmark. Even one short word becomes unreadable below about 40px wide.
Sizes to prepare
| Size | Use |
|---|---|
| 16×16 px | Browser tab (legacy), bookmarks bar |
| 32×32 px | Browser tab (standard), taskbar pinning |
| 64×64 px | Windows site icon |
| 180×180 px | Apple Touch Icon (iOS home screen) |
| 192×192 px | Android home screen, PWA |
| 512×512 px | Android splash screen, PWA manifest |
If you are short on time, the three you can't skip are 32×32 (browser tab), 180×180 (iOS), and 192×192 (Android). The rest are nice to have.
File formats
.ico is the original favicon format. It is a single file that can embed multiple sizes (16, 32, 48px), every browser supports it, and it lives at your site root as favicon.ico.
.png works in every modern browser and compresses well at the larger sizes, so it is what you want for the 180×180 and 192×192 icons.
.svg is the modern option. It scales to any size without pixelation, and Chrome, Firefox, and Edge all support it. Safari still does not as of early 2026, which is why you can't rely on SVG alone yet. Ship one if you can, but keep the PNGs and the .ico alongside it.
How to make one from your logo
Open your logo in a vector editor (Figma, Illustrator, or Inkscape all work). Select only the icon mark or single letter you decided to use earlier and delete the rest. Resize the artboard to a square and leave 10–15% padding around the artwork so it does not get clipped when a platform applies its own corner radius or background tile.
Now zoom out until the icon appears at roughly 32 pixels on your screen. If you can't tell what it is, the design is too detailed. Bump up stroke weights, drop the thin lines, and try again. This step is the one most people skip, and it is the difference between a sharp favicon and a smudge.
Export PNGs at 32×32, 64×64, 180×180, and 192×192, and keep the SVG source. Drop the largest PNG into a favicon generator (any of the well-known ones will do) and let it bundle the small sizes into a single favicon.ico. The generators handle the multi-size packing for you, which is genuinely tedious to do by hand.
Adding it to your site
On plain HTML, three lines in <head> cover most cases:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
If you are on a hosted platform, the upload field is buried in different places depending on the platform. WordPress puts it under Appearance → Customize → Site Identity → Site Icon, and wants a square PNG of at least 512×512. Shopify keeps the favicon under Online Store → Themes → Customize → Logo, and accepts PNG or JPG. Squarespace calls it "Browser Icon" and lives in Design. Webflow has a Favicon section under Project Settings; upload one PNG and it generates the smaller sizes for you.
The single most common way this goes wrong is uploading the full logo rectangle to one of these fields. The platform will center-crop and compress it, and the result is a sliver of your brand name floating on an odd background. Crop to a square yourself before uploading, then open your site in an actual browser tab to confirm it reads.
If your logo came from Brandize, the SVG is already separated into layers, so you can hide everything except the icon mark and export from there.
Ready to create your logo?
Generate a professional SVG + PNG logo in under 30 seconds.
