> What size and format a logo should be for a website: a vector file for the header, a square icon for the browser and for Google, and an image for sharing. - Canonical: https://hadalmedusa.com/guides/what-size-should-a-logo-be-for-a-website/ --- # 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. Updated 6 October 2026 ## 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](https://hadalmedusa.com/guides/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](https://hadalmedusa.com/guides/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. 1. Speed and technical health, side by side 2. On-page SEO and site structure 3. The content they are found for and you are not 4. Who holds the searches that matter in your market 5. A prioritised list of what to fix first [Request your free report by email](mailto:contact@hadalmedusa.com?subject=Competitor%20gap%20report%3A%20Guide%3A%20What%20size%20should%20a%20logo%20be%20for%20a%20website%3F&body=Website%3A%0D%0A%0D%0AWhere%20you%20compete%20(area%2C%20country%20or%20countries)%3A%0D%0A%0D%0ACompetitors%20to%20compare%20against%20(up%20to%20three)%3A%0D%0A%0D%0AAnything%20else%20we%20should%20know%3A%0D%0A%0D%0A) - **Address** — contact@hadalmedusa.com - **Include** — your site; up to three competitors; where you compete ## More guides - [What a brand identity should include](https://hadalmedusa.com/guides/what-a-brand-identity-should-include/) - [Why your favicon is not showing in Google search](https://hadalmedusa.com/guides/favicon-not-showing-in-google/) - [Why a competitor outranks you, and how to check](https://hadalmedusa.com/guides/why-a-competitor-outranks-you/) - [All guides](https://hadalmedusa.com/guides/) - [Brand and graphics: what the service includes](https://hadalmedusa.com/services/brand-and-graphics/)