Logo, Favicon and Brand Basics for Your Website
Brand basics every business website needs: logo files and formats, favicon and app icons, colours, fonts, social share images and consistency, explained for business owners.
On this page
- Have SVG, PNG and icon versions of your logo, plus light and dark variants.
- Define a small colour palette and one or two fonts, used consistently.
- Set branded share images and keep brand details consistent everywhere.
A consistent brand makes a small business look established and trustworthy. Your website is often where people see your brand most, so it's worth getting the basics right before and during a website project.
Logo files you need
- SVG version: sharp at any size and tiny in file size, ideal for websites
- Transparent PNG: for places that don't support SVG
- Horizontal and stacked versions: for headers vs square spaces
- Icon-only mark: for favicons and social profiles
- Light and dark versions: for different backgrounds
If you only have a logo as a JPEG or inside a document, ask your designer for the original files.
Favicon and app icons
The favicon is the small icon in browser tabs and bookmarks. You'll also want icons for phones when people save your site to their home screen. Use a simple, recognisable mark, because detailed logos become unreadable at 16–32 pixels.
Colours and fonts
- Define a small palette: primary, secondary, text, background and accent colours
- Check text contrast for readability; see accessibility basics
- Choose one or two fonts, ideally web fonts that load quickly
- Use them consistently as global styles on the website
Choosing a palette and fonts? See how to choose website colours and fonts.
Social share images
When someone shares your page on WhatsApp, LinkedIn or Facebook, a preview image appears. Set a branded default share image, and ideally unique images for key pages and articles, so links look professional when shared.
Consistency everywhere
Use the same name, logo, colours and description across your website, Google Business Profile, social profiles and printed materials. Consistency builds recognition and trust, and consistent business information also helps search engines.
Photography and imagery
Real photos of your team, work and premises reinforce your brand far better than generic stock images. Keep a consistent style for lighting, backgrounds and editing.
Before your website project
- Gather logo files (SVG, PNG, icon)
- Note brand colours (hex codes) and fonts
- Collect real photos
- Share brand guidelines or examples you like
Include these in your website brief. If you have designs in Figma, see Figma to WordPress.
Need help with your website?
I'm Sameer, a freelance WordPress developer building fast, SEO-friendly websites since 2020. Tell me what you need and I'll reply with a plan and a fixed quote within 24 hours.
Freelance WordPress developer and founder of Samverse, building websites for clinics, manufacturers, agencies and online stores since 2020.
More about me
