There is no single required logo size. Most site headers show the logo roughly 32 to 60 CSS pixels tall on desktop and a little smaller on phones, with the width following the logo's shape. Use an SVG if you can; otherwise export a PNG at twice the display size so it stays sharp on high-density screens.
| Where | Size | Source |
|---|---|---|
| Website header | About 32 to 60 px tall on desktop (our rule of thumb) | Design convention, not a standard |
| Favicon | Square, at least 8x8 px; larger than 48x48 px recommended | Google Search Central |
| Apple touch icon | 180x180 px for iPhone retina in Apple's example | Apple Safari web content guide |
| Link share image (og:image) | At least 1200 x 630 px recommended | Meta for Developers |
| Logo in Google structured data | At least 112x112 px | Google Search Central |
| Google Business Profile photos | 720 x 720 px recommended, 250 x 250 px minimum, JPG or PNG | Google Business Profile Help |
Updated
Logo size questions usually come from a blurry or tiny logo after the site goes live. The fix is to think in two numbers: the size it shows at, measured in CSS pixels, and the size of the file, which should be bigger. Upload your own logo below to see both, in a desktop and a phone header, without anything leaving your computer.
Your logo file
Showing a sample logo until you pick a file.
Logo height in the header: 44 px
Desktop header
Menu
Phone header (35 px tall)
SVG scales without blurring at any height.
.site-logo { height: 44px; width: auto; }Your file is read only by your browser and never uploaded.
Height comes from CSS; width follows the logo's shape. The width and height attributes reserve space while it loads.
<header style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e5e7eb">
<a href="/"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='48'%3E%3Crect y='6' width='36' height='36' rx='8' fill='%234F98FB'/%3E%3Ctext x='46' y='33' font-size='24' font-family='Georgia'%3EHarbor Bakery%3C/text%3E%3C/svg%3E"
width="200" height="48" alt="Harbor Bakery" style="height:44px;width:auto;display:block"></a>
<nav style="font:14px system-ui">Menu</nav>
</header>logo.png is 44 px tall, [email protected] is 88 px tall. The browser picks the 2x file on high-density screens.
<img src="/logo.png" srcset="/[email protected] 2x" width="183" height="44" alt="Harbor Bakery">A favicon, an Apple touch icon and a share image, each made from your square logo version.
<link rel="icon" href="/favicon-96.png" sizes="96x96" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta property="og:image" content="https://example.com/share-1200x630.png">A CSS pixel is the unit you write in your stylesheet. On a standard screen it matches one physical pixel; on a phone or a high-density laptop it can cover two or three. That is why a 40 px logo file looks soft on a modern phone: it is being stretched.
So decide the display height first, then export the file at twice that height (or three times for very sharp phone screens), or use SVG and skip the maths.
A wide wordmark can look large at a modest height, so cap its width on phones with max-width so it does not push the menu button off screen.
A square or round mark needs a bit more height to read well, but it leaves room beside it for the business name in text, which is also easier for search engines and screen readers.
No standard sets it. As a rough guide, most headers show the logo about 32 to 60 CSS pixels tall on desktop and around 28 to 44 on phones. A long wordmark can sit shorter than a compact square mark. Use the preview above to judge your own.
SVG is a vector format, so it stays sharp at any size and is often tiny in file size. Use PNG when the logo contains photographic detail or your platform does not accept SVG, and export it at two times the display size.
High-density screens use more than one device pixel per CSS pixel. A logo shown 40 px tall looks sharp on a 2x screen when the file is at least 80 px tall. With the img srcset attribute you can offer a 1x file and a 2x file and let the browser choose.
Google says a favicon must be square and at least 8x8 px, and recommends one larger than 48x48 px. Our favicon sizes guide lists the common files and the HTML to link them.
Google's photo guidelines for Business Profile give JPG or PNG, 10 KB to 5 MB, 720 x 720 px recommended and 250 x 250 px minimum. The help page does not list separate logo dimensions, so a square logo at 720 x 720 px is a safe choice.
Related: Favicon sizes, Favicon generator, Social media image sizes, How to change a favicon.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.