how do i add my logo to my website without it looking wrong

design · 2026-10-02 · 3 min

the short answer: put it in the header, top left, on every page, as a transparent svg or a png exported at the size it will be shown. then look at it on a phone before you call it done. the rest decides whether it reads as a logo or as a file someone dragged into place.

the file matters more than the position

a logo exported at 2000 pixels and displayed at 160 is a 300 kb image doing a 6 kb job, and it delays the first thing a visitor sees. if the logo is vector, export an svg: it stays sharp at any size and weighs almost nothing. if you only have a png, export it at roughly twice the display width — 320 pixels for a 160 pixel slot — with a transparent background.

keep two versions, one for light headers and one for dark. a logo built for a white header disappears the moment someone changes the colour, and that change will happen.

where it goes in the common tools

in wordpress, the site logo block lives in the site editor: appearance, editor, open the header template and drop the logo block in. in wix the header is edited from the design panel. shopify has it under online store, themes, customize, header.

if you write html by hand, put the image inside a link to the home page and set width and height so the header does not jump while it loads. an image without dimensions is the most common cause of layout shift.

the mistakes that show

do not stretch it: keep the proportions, even if the slot has a different shape. do not put it on top of a photo unless the photo was chosen for that. and do not use it as the page's main heading — the heading is the sentence that says what you do.

and add a favicon while you are in there: a square version, 512 pixels, uploaded in the same settings screen. it is the small icon in the browser tab, and its absence is noticed more than its presence.

faq

what size should my logo be?

wide enough to read, small enough not to dominate: typically 120 to 200 pixels in a desktop header, less on a phone. what matters is exporting the file at that size instead of scaling a huge one down.

should the logo link to the home page?

yes. it is one of the few conventions visitors still rely on. link it to the home page of the same language, and give the image an alt text with the business name.

do i need a different logo for mobile?

usually just a smaller one. if the full logo has a tagline that becomes unreadable at 100 pixels, use a compact version with the name only.