Your main logo
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
| Where | What | Size (pixels, width × height) |
|---|---|---|
| Your website | Header logo | SVG, or a PNG at twice its display size (for example 320 × 80 for a 160 × 40 logo) |
| Your website | Favicon | See step 4 |
| Link previews | Share image (Open Graph) used by Facebook, LinkedIn, X, WhatsApp and others | 1200 × 630 |
| Every network | Profile picture | Square, at least 400 × 400 — most crop it to a circle |
| Page cover | 851 × 315 (shown smaller on phones) | |
| Company page cover | 1128 × 191 | |
| X (Twitter) | Header | 1500 × 500 |
| Post / story or reel | 1080 × 1080 or 1080 × 1350 / 1080 × 1920 | |
| YouTube | Channel banner / video thumbnail | 2560 × 1440 (keep text inside the centre 1546 × 423) / 1280 × 720 |
| Pin | 1000 × 1500 |
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:
<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.