Step 3 of 8

Create your logo

Every website needs a brand — in the header, on social media and as the little icon in a browser tab. You don’t need to be a designer to get a decent one.

About 30 minutes Updated 1 November 2026By Ian F. Cliffen

First, a confession. I class myself as design dyslexic — my own invention of an undiagnosed condition. In other words, I have no design sense or taste (just ask my wife!).

For this site’s first logo I used a free online logo maker, in the hope of cobbling together something that didn’t poke you in the eye. Many of these services are free to try and charge for high-resolution files. My plan was to start free and rebrand properly later if the site took off — which is exactly what happened in this 2026 redesign.

What to ask for

Logo services offer a bundle of files for different jobs. The more you get, the easier your life becomes. Make sure you have:

  • An SVG. A vector file that stays sharp at any size and is tiny to download. Ideal for your website header.
  • A PNG with a transparent background. Has tons of uses — it sits cleanly on any colour.
  • A square version (just the symbol, no words) for profile pictures and your favicon.
  • A light version for dark backgrounds, if your main logo is dark.

You can resize images with the most basic software or a free web tool. Smaller files load faster — none of us like waiting for a page — but an image shrunk too far looks fuzzy (“pixelated”) on large, high-resolution screens. A good rule: save a PNG at twice the size it will be shown on the page.

Image sizes you’ll need

WhereWhatSize (pixels, width × height)
Your websiteHeader logoSVG, or a PNG at twice its display size (for example 320 × 80 for a 160 × 40 logo)
Your websiteFaviconSee step 4
Link previewsShare image (Open Graph) used by Facebook, LinkedIn, X, WhatsApp and others1200 × 630
Every networkProfile pictureSquare, at least 400 × 400 — most crop it to a circle
FacebookPage cover851 × 315 (shown smaller on phones)
LinkedInCompany page cover1128 × 191
X (Twitter)Header1500 × 500
InstagramPost / story or reel1080 × 1080 or 1080 × 1350 / 1080 × 1920
YouTubeChannel banner / video thumbnail2560 × 1440 (keep text inside the centre 1546 × 423) / 1280 × 720
PinterestPin1000 × 1500
Social networks change their sizes from time to time, so check each one’s help pages before you design anything elaborate.

Responsive images

A term you’ll come across often is RWD (responsive web design): a page that rearranges itself to look right on phones, tablets and big screens. You have no control over who looks at your site or on what device, so your images must look good on all of them. Sometimes you can simply let an image shrink on small screens; other times it’s better to give the browser a choice of sizes and let it pick:

Sharp on high-resolution screens
<img src="/images/logo-320.png"
     srcset="/images/logo-320.png 1x, /images/logo-640.png 2x"
     width="160" height="40" alt="Your Business Name">

Always include width and height. They let the browser reserve the right space before the image arrives, so the page doesn’t jump about as it loads (Google measures this as part of its Core Web Vitals).

Choosing a logo maker

There are plenty of logo design companies charging premium prices for all-singing, all-dancing packages. What we want is a budget option you can upgrade once the site is up and running.

Reader-voted logo makers

Ranked by readers’ votes. Tried one? Vote it up or down to help the next person.

The reader-voted list is being refreshed. Please check back soon.

Ready to build? Every guide on this site was written and tested on OnPoint Hosts — UK cPanel hosting with free SSL and a free first-year domain, from £4.25 a month.

Get hosting