What size should a favicon actually be?

Most modern browsers use a 32x32 pixel version, though it's worth generating a few sizes (16x16, 32x32, and a larger one for Apple devices) to cover everything properly.

Website Design Tools

Favicon & Social Preview Generator

Upload your logo, and get back a proper favicon and a correctly sized social preview image, ready to drop straight into your website.

Upload Your Logo Or Icon PNG, JPEG, WebP or SVG. Nothing is uploaded anywhere — everything happens in your browser.

Favicon

Shown small, so keep it simple — a mark or a single letter tends to read better than a full, detailed logo.

Your Page Title

16×16

Your Page Title

32×32

180×180 (Apple Touch Icon)

Social Preview Image (1200×630)

What shows up when this page is shared on Facebook, LinkedIn or WhatsApp.

Two small details, both easy to overlook, both noticed constantly. Your favicon is the little icon sitting in a browser tab, and it’s one of the first things a visitor sees if they’ve got multiple tabs open, or if they’re trying to find your site again in their history. Your social preview image is what shows up when someone shares your link on Facebook, LinkedIn, or WhatsApp. Get either one wrong, a blank grey square, a stretched logo, a broken image icon, and it quietly makes a business look less finished than it actually is.

How to use it

Upload your logo or icon
Generate your favicon, sized correctly for browser tabs and bookmarks
Generate your social preview image, sized correctly for Facebook, LinkedIn and Twitter/X
Download both and add them to your website

Why these two things need different files, not just one resized logo

A favicon is tiny, often shown at just 16 or 32 pixels, so anything with fine detail or small text simply disappears. A simple icon or a single letter tends to work far better than a full logo. A social preview image is the opposite problem, it’s large and wide, roughly 1200 by 630 pixels, so a small logo just dropped onto a plain background looks lost and unfinished. Each one needs its own proper design, not the same file resized and hoped for the best.

What tends to go wrong without one of these

No favicon at all, so a generic blank page icon shows up in every tab
A full, detailed logo squashed into a 16-pixel favicon, unreadable
No social preview set up, so shared links show a random image pulled from the page, or nothing at all
A social image that’s technically there but stretched or cropped oddly because it was never sized correctly to begin with

Getting it built into your site properly

Generating the files is the easy part. Getting them correctly linked in your site’s code, and making sure every page has the right social preview rather than one generic image for the whole site, is where this usually goes wrong. If you’d like this set up properly as part of a wider build, our website development team handles this as standard on every project.

FAQ

Most modern browsers use a 32×32 pixel version, though it’s worth generating a few sizes (16×16, 32×32, and a larger one for Apple devices) to cover everything properly.

This usually means there’s no social preview image set up in your page’s code, so the platform is guessing and pulling in whatever image it finds first, sometimes the correct one, often not.

One is enough to start with, but individual images for key pages, particularly your homepage and any pages you expect people to share, tend to look far more professional and get more attention when shared.