A logo that works on a shop sign and as a favicon

A small business logo doesn't live only on the website. It sits in the browser tab at 16 and 32 pixels, on the phone's home screen and inside the round profile picture on Facebook and Instagram. It is printed on invoices and on till receipts from a thermal printer that only does black. It goes on the delivery van and lights up on the sign above the shop.

Each place has its own limits. At 16 pixels, thin lines and small lettering vanish. On a van, a passing driver has a few seconds to read it. On a shop sign, people see it from across the street.

So we design a small system rather than a single logo, with a job for each version:

• Full logo: symbol, name and, where useful, a descriptor such as "Family bakery since 1985". For the shop sign, the website header and printed material.
• Compact mark: symbol and name without the descriptor, in a horizontal or stacked layout. For mobile screens, email signatures and rubber stamps.
• Icon: the symbol alone, or a single initial. For the favicon, the app icon and the profile picture.

All three should look like one family: someone who sees the icon on their phone and later the sign on the street should recognise the same business.

Simplicity is a question of durability, not taste. A detailed mark can look impressive at 1,000 pixels on a designer's screen and turn into a blurry dot in a browser tab. The tests are straightforward:

• Silhouette: fill the mark with solid black. If it is recognisable by its outline alone, it has a sound foundation.
• Small size: look at it at 16 and 32 pixels, in a real browser tab rather than zoomed in.
• Distance: print it on A4, stick it on a wall and step back a few metres. Or simply squint.
• Cheap printing: photocopy, till receipt, rubber stamp. If the gaps inside the letters fill in, the mark needs more room to breathe.

Whatever fails gets simplified: fewer lines, heavier strokes, no gradients or shadows in the core mark. The large sign is rarely the problem. The small size almost always is.

A logo that exists only in its brand colours will eventually land on the wrong background. So we design in black on white first and add colour afterwards. You need at least:

• Full colour for white or light backgrounds.
• One colour, black only, for receipts, stamps, embroidery, engraving or single-colour vinyl.
• Reversed, white on a dark background, for the website footer, dark packaging or lettering on the shop window.
• On photos: plain white or black, depending on the image, so it stays legible on a social post or a banner.

Each colour also needs the right codes: HEX and RGB for screens, CMYK for the printer, and a Pantone reference when a colour has to stay consistent across materials. Without them, the same green comes out as three different shades on a business card, a sticker and a screen.

A producer in Thrace who also sells abroad may write the name in Greek on the shop sign and in Latin letters on the domain, on Instagram and on export packaging. If the logo contains lettering, decide early which script leads and whether a second version is needed.

Worth checking:

• Does the typeface have proper Greek? Many typefaces were drawn for Latin, with Greek added later or missing altogether. Letters such as Σ, Ω and Ψ quickly show whether they belong with the rest.
• Do both versions carry the same weight? The Greek and Latin versions should share height, stroke and tone, even when one name is longer, so neither looks like a translation of the other.
• Accents in capitals: Greek words set entirely in capitals take no accent marks. An accented "ΚΑΦΈ" on a logo is a mistake that ends up on hundreds of cards.
• Licence: the font licence must allow use in a logo, in print and on the web.

The same applies to a bilingual website such as the carpebo catalogue: visitors switch language, but they should see the same business.

The logo is yours, and its files should be in your hands, not just on the designer's computer. When the printer, the sign maker or your next developer asks for "the logo in high resolution", you should have it ready. Ask for:

• SVG for every version and colour. It is vector, scales without loss of quality and weighs very little on a website, which matters for page speed.
• Vector PDF or EPS for printers and sign makers.
• PNG with a transparent background in a few widths, for emails, Word documents and presentations.
• Favicon set: favicon.ico, 16×16 and 32×32 PNG, 180×180 for the iPhone home screen, 192×192 and 512×512 for Android.
• Profile picture: square, with the icon centred so the circular crop doesn't cut into it.
• Brand sheet: colours with all their codes, typeface names, minimum size, clear space around the mark and examples of incorrect use.

At Devebo, our logo and print design service includes a usage guide, so anyone who works with your mark later doesn't have to guess.

Can my current logo be adapted without starting over?

Yes, if the mark already has something recognisable. We simplify it and build the compact and icon versions without losing its character. If it fails every small-size test, a rebrand may be the better route.

Is a large, high-resolution PNG enough?

No. A PNG blurs when enlarged for a sign or a vehicle, and its colours are hard to change. You need the vector file (SVG, PDF or EPS) as the source for everything else.

Why does my favicon look blurry?

Usually because it is the full logo shrunk to 16 pixels. A favicon needs the icon version, designed and checked at that size, not a miniature of the full logo.