Website Icon Design: Sizes, Formats and Adaptation Rules
You have a logo that looks sharp on your homepage, and it turns to mush the moment it appears in a browser tab. Website icon design fails at small sizes for predictable reasons: wrong dimensions, wrong format, or one file asked to do too many jobs. This guide covers the sizes you actually need, which format belongs where, and how to adapt one mark across favicons, app icons and social previews without redrawing it five times.
What a website icon actually is
A website icon is the small square image a browser, operating system or platform pulls from your site to represent it. That includes the favicon in a browser tab, the icon saved when someone bookmarks your page, the tile on a phone home screen, and the thumbnail in a chat app link preview.
These are not the same asset. They are served from different places, at different sizes, and they get cropped differently. Treating them as one file is the most common reason a site looks unpolished outside its own pages.
Favicons are usually 16x16 or 32x32 pixels. Home screen icons start at 180x180 on phones and go up. Social preview images are wide rectangles, not squares. One image cannot serve all three well.
A favicon is not a logo. It is a logo reduced to the smallest shape that still reads as yours.
Website icon sizes you need
Start with pixels, because that constraint drives every other decision.
- 16x16 — browser tab, the smallest realistic target
- 32x32 — taskbar and high-density tab displays
- 48x48 — desktop shortcuts on some systems
- 180x180 — phone home screen icon
- 192x192 and 512x512 — installable web app icons
- 1200x630 — social sharing preview, a wide format
You do not need to hand-draw each one. You need to supply the largest clean source and let each platform downscale, plus check the smallest size by eye.
That last step matters more than the rest. A mark that survives at 512x512 can still collapse at 16x16.
Which format to use for a favicon
Format choices come down to three: SVG, PNG and ICO.
SVG is a vector format, meaning it is stored as shapes and maths rather than pixels. It scales to any size without blurring and often weighs less than a PNG. Use it as your primary source when the mark is simple.
PNG is a raster format, stored as a grid of pixels. It handles transparency reliably and is the safest fallback when a platform does not accept SVG. Export it at exact target sizes.
ICO is an older container format that can hold several sizes in one file. Some older browsers still request it. Many modern setups no longer need it, but keeping one does no harm.
A practical set: SVG as the master, PNG at 32x32, 180x180, 192x192 and 512x512, and an ICO containing 16x16 and 32x32.
How to design and export a website icon
Follow the order below. Skipping step two is what produces icons that look fine in a design tool and wrong everywhere else.
- Draw the mark on a square canvas. Use a 512x512 artboard with the shape centred. Keep at least 10 percent padding on every side so the icon does not touch the edge when a platform rounds the corners.
- Test at 16x16 before you commit. Shrink the canvas and look at it. If details disappear, remove them. At this size you have room for roughly one shape and one colour contrast.
- Simplify for the small version. Drop thin strokes, small text and fine gradients. Text almost never works in a favicon. If your logo is a wordmark, extract a single letter or an abstract shape from it.
- Export the size set. Produce SVG plus PNGs at 32, 180, 192 and 512 pixels. Name the files clearly so you know which is which later.
- Check transparency. Icons sit on light and dark browser chrome. A mark with a transparent background needs enough contrast to survive both. If it does not, add a solid background shape.
- Wire the files into your pages. Reference them in your site's head section, then load the site and confirm each one appears. Caching means you may need a hard refresh to see changes.
- Verify on real devices. Check a browser tab, a bookmark, a phone home screen and a shared link. Each one pulls a different file.
If you only have a raster logo and need a specific pixel size fast, a browser-based image resizing tool can produce exact dimensions without installing anything, though it cannot invent detail that was never in the source.
How do you make an icon readable at 16x16 pixels?
A 16x16 icon is readable when it contains one recognisable shape, strong contrast against both light and dark backgrounds, and no detail finer than about two pixels. Remove text, thin lines and subtle gradients. If the mark still fails, use a simplified variant for small sizes rather than shrinking the full logo.
That is the whole rule. Everything else is refinement.
Adapting one mark across platforms
Adaptation is where most inconsistency creeps in. Each surface crops differently, so plan for it.
Browser tabs show a tiny square, sometimes with rounded corners applied by the browser. Keep the mark centred and small.
Home screens apply their own masking. On many phones the icon is placed inside a shape, so artwork near the edges gets cut. Keep important elements inside a safe zone of roughly the middle 80 percent.
Bookmarks and history lists often show the icon next to text, so it needs to read against whatever background the browser uses.
Social previews are wide, not square. They usually want a separate image with the mark and some context, not a stretched square.
Dark mode matters more than it used to. A black mark on a transparent background vanishes in a dark tab bar. Either design for both, or include a background shape that gives the mark its own contrast.
Test each surface rather than assuming. It takes minutes and catches problems you would otherwise ship.
Common website icon mistakes
- Using a full wordmark. It becomes an unreadable smear below 64 pixels.
- Exporting one size. Browsers then scale it themselves, often badly.
- Ignoring transparency. A white background block looks broken on a dark interface.
- Forgetting the social preview. Shared links show a blank or cropped image.
- Never checking the result. The file works in the design tool and fails in the tab.
- Overwriting without a version change. Cached icons can persist for a long time, so a filename or query change forces a refresh.
FAQ
#### Do I need a favicon for my website?
Yes. Browsers request one automatically, and without it you get a generic placeholder in tabs, bookmarks and history. It also appears in search results and link previews on some platforms. A missing icon does not break your site, but it makes it look unfinished next to others in the same list.
#### What size should a favicon be?
Supply 16x16 and 32x32 for browser tabs, 180x180 for phone home screens, and 192x192 plus 512x512 if your site can be installed as an app. Providing several sizes lets each platform pick the right one instead of scaling a single file and blurring it.
#### Should I use SVG or PNG for my icon?
Use SVG when your mark is simple and you want one file that scales cleanly. Use PNG when you need exact pixel dimensions or the platform does not accept vector files. Many sites ship both: SVG as the primary and PNG as a dependable fallback.
#### Why does my icon look blurry?
Blur usually means a small raster file is being stretched. A 32x32 PNG displayed at 180x180 will look soft no matter how clean the original was. Export at the larger size, or switch to SVG so the browser renders the shape at whatever resolution the screen supports.
#### Can I use the same image for my favicon and social preview?
No. Favicons are square and tiny; social previews are wide and large. A square image placed in a wide slot gets cropped or letterboxed. Create a separate wide image for sharing, and keep the square mark for tabs and home screens.
Conclusion
Website icon design is a sizing and format problem before it is a design problem. Get the pixel set right, pick SVG or PNG for the right job, and adapt the mark for tabs, home screens and previews instead of forcing one file to cover everything. Do that, and your site looks deliberate everywhere it appears — not just on its own pages. If you need to produce exact dimensions quickly, the free utilities in our online tool collection run entirely in your browser, with no upload and no account. Just remember that a resizing tool can only work with the detail already in your file; simplification is a design decision, not something a converter can make for you.