How to Add Your Logo to a Website: Header, Favicon, and Footer Checklist

Uploading a logo to a website should take five minutes. It usually takes longer, because most site builders ask for one image field and expect you to already know it needs three different files at three different sizes.

The three places a logo actually goes

Export each one separately instead of resizing a single file three ways. A wordmark that reads fine in a 200px-wide header turns into a gray smear at 32x32. The favicon design guide covers why that happens and what to use instead.

Header

The header logo is the one people actually look at, so get the basics right first.

Use SVG if your site builder accepts it. It stays sharp on a phone with a high-density screen without you needing to export a 2x or 3x PNG. If SVG isn't an option, export the PNG at twice the display size, so a logo shown at 160px wide is saved at 320px.

Most headers run the logo at 120 to 200px wide. Taller logos should cap around 40 to 60px in height so they don't push the nav bar down. If your logo is a stacked mark rather than a horizontal wordmark, you may need a wider horizontal variant just for the header. Logo variations for light, dark, and transparent backgrounds covers building that second layout.

Wrap the logo in a link to the homepage. This is standard enough that visitors expect it, and skipping it is a small but real usability miss.

Set the image alt attribute to your business name, not "logo" or a blank string. Screen readers and Google both read this text, and "logo" tells neither of them anything useful.

<a href="/">
  <img src="/logo.svg" alt="Brandize" width="160" height="40">
</a>

Include width and height attributes even when using CSS to size the image. Browsers use those values to reserve space before the file loads, which stops the page from jumping around as it renders.

Favicon

The favicon is the small icon next to your page title in a browser tab, and it's also what shows up when someone bookmarks the page or saves it to a phone home screen.

At minimum, prepare:

• favicon.ico at the site root (bundles 16, 32, and 48px)
• A 32x32 PNG for modern browsers
• A 180x180 PNG for the Apple touch icon
• A 192x192 PNG for Android and installable web apps

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Your full logo almost never works as a favicon. At 32 pixels, a wordmark is illegible and a detailed icon collapses into noise. Use the single icon mark from your logo, or the first letter of your business name, redrawn so it holds up that small. The favicon design guide walks through picking and simplifying that mark.

On a hosted platform, you usually don't touch HTML at all. WordPress keeps it under Appearance → Customize → Site Identity → Site Icon. Shopify puts it under Online Store → Themes → Customize → Logo. Squarespace calls it "Browser Icon" under Design. Webflow has a Favicon field in Project Settings and generates the smaller sizes from one upload. All four want a square image, so crop before you upload rather than letting the platform crop for you.

Footer

The footer logo gets skipped most often, mostly because people assume the header logo is enough. If your footer sits on a dark or colored background, the header's full-color logo may not survive the trip.

Check contrast before you decide. If your logo has dark text or a dark icon and your footer is light, reuse the header logo. If the footer is dark, navy, or a saturated brand color, you likely need the light or reversed version instead. A logo with mixed colors, dark text plus a light icon, for instance, needs to be tested piece by piece rather than as a whole.

Footers also tend to run the logo smaller than the header, often 80 to 120px wide, sometimes paired with a tagline or contact details underneath. If your logo has a tagline, decide once whether it belongs in the footer, and skip it if the space is tight; a tagline that fits at header size can still crowd a narrow footer column.

Common mistakes

• Uploading the same 800px logo to the header, favicon, and footer fields, then letting each platform crop or squeeze it. This is the single biggest source of blurry or lopsided logos.
• Skipping the square crop before uploading a favicon. A rectangular logo dropped into a favicon field gets center-cropped automatically, and the result is usually a fragment of the wordmark floating on an odd background.
• Using the wrong version on a dark footer. A dark logo on a dark footer either disappears or gets a browser-generated outline that looks worse than a blank space.
• Leaving off width and height on the header <img> tag. That causes layout shift while the page loads, which also affects Core Web Vitals.
• Forgetting the homepage link. A logo that isn't clickable is a small thing that visitors still notice.
• Stretching a horizontal logo into a square upload field, or vice versa, which distorts the mark. Export the shape the field actually wants instead of stretching what you have.

A launch check

Before you call it done, open the live site and check:

• Does the header logo link back to the homepage?
• Is the favicon showing correctly in an actual browser tab, not just a preview thumbnail?
• Does the footer logo read clearly against its background?
• Did you set alt text with your business name, not "logo"?
• Does the page still look right on a phone, where the header has less room?

If your link previews in Slack or iMessage still show a blank card, that's a separate file, the Open Graph image, not the header logo or favicon. How to make an OG image from your logo covers that one, and the meta tags reference covers the rest of what belongs in your page head.

Start a logo on the Brandize home page and export the header, favicon, and footer versions from the same source file instead of resizing one export three different ways.