What size should a logo be for a website?
A website needs a logo in three forms, and size is the wrong question for the first of them. The header logo should be a vector file, which has no fixed size and stays sharp at any. The browser and Google need a small square icon. Links shared on social media need a wide image. One logo file cannot do all three jobs.
Each sounding opens its section
- 01 The header logo: a vector, not a size 105 words
- 02 The icon: small and square 81 words
- 03 The sharing image: wide 61 words
- 04 Why a logo looks blurry 50 words
- 05 The files to ask your designer for 62 words
- 06 Questions people ask 121 words
- 07 Free competitor gap report 101 words
- 08 More guides 35 words
- Words
- 616
- Site 366–1,117 · median 749.5
- Sections (H2)
- 8
- Site 3–14 · median 9
- Internal links
- 9
- Site 1–36 · median 19
- File
- 69.3 kB
- HTML, uncompressed · of 83.6 kB budget · 0 scripts
The header logo: a vector, not a size
The logo at the top of each page should be an SVG file. A vector image is drawn from shapes and not from pixels, so it is sharp on a phone, a laptop and a large screen, and the file is usually small. Its displayed size is set by the page, not by the file.
If an SVG is not available, use a PNG with a transparent background, made at twice the size it will be shown. A logo shown 200 pixels wide needs a file 400 pixels wide, so that it stays sharp on high-resolution screens.
The icon: small and square
The browser tab, bookmarks and Google’s search results use a small square icon, the favicon. A wide logo does not fit the shape. Most identities have a square mark or an initial for the purpose.
Google’s rules for showing a favicon in search results are that it is square and at least 8 by 8 pixels, and it recommends larger than 48 by 48. Our guide to a favicon not showing in Google covers the rest.
The sharing image: wide
When a link to the site is posted in a message or on social media, the preview shows an image. That image is wide, about twice as wide as it is tall, and a logo alone looks lost in it. A sharing image usually carries the logo with a line of text on the brand’s background colour.
Why a logo looks blurry
Three faults cause nearly every blurry logo.
- A small image file stretched to fill a larger space.
- An image made at exactly the displayed size, shown on a screen with twice the pixels.
- A JPEG, which smears fine edges and cannot have a transparent background.
The files to ask your designer for
A complete set avoids all of this.
- The logo as an SVG, in full colour, in black and in white.
- A square icon version, as SVG and PNG.
- PNG exports of each with transparent backgrounds.
- A sharing image.
Our guide to what a brand identity should include lists everything else that belongs in the pack.
Questions people ask
Why does my logo look blurry on my website?
Because it is a small image being stretched, or an image shown on a high-resolution screen at its original size. Use a vector file, or an image twice as large as the space it fills.
What format should a website logo be?
SVG for the logo in the header, because it is a vector format and stays sharp at every size. PNG with a transparent background is the fallback. JPEG is the wrong choice, because it cannot be transparent.
What size should a favicon be?
Square. Google requires at least 8 by 8 pixels for a favicon in its search results and recommends one larger than 48 by 48.
Free competitor gap report
How a business looks is judged beside its competitors. Name up to three and we measure your site against theirs, then send you where they present themselves more clearly and where they are found and you are not.
- Speed and technical health, side by side
- On-page SEO and site structure
- The content they are found for and you are not
- Who holds the searches that matter in your market
- A prioritised list of what to fix first
Request your free report by email
- Address
- contact@hadalmedusa.com
- Include
- your site; up to three competitors; where you compete