Logos, Fonts and Brand Files a Web Team Needs

Logo files: vector first

The most useful logo file is the original vector, the file your designer drew it in. A vector stores the logo as shapes rather than pixels, so it stays sharp at any size. On the web, the vector format is SVG. MDN's image file type guide describes SVG as "ideal for user interface elements, icons, diagrams, etc.", and an "ideal choice" when "the size at which the image will be rendered is unknown or may vary, since SVG will smoothly scale to the desired size".

Some places do not accept SVG, so keep PNG copies as well. MDN says PNG "is preferred over JPEG for more precise reproduction of source images, or when transparency is needed". Export PNGs from the vector at a generous size, rather than enlarging a small one.

If all you have is a small image from an email signature, ask whoever designed the logo for the original files. Our website content checklist covers the rest of what to gather before a build, and our guide to image optimization explains when to use each format for photos and graphics.

The logo versions a site uses

A header, a phone menu, a dark footer and a favicon need different shapes. A useful set:

• Full logo, horizontal: the symbol and name side by side, for the site header.
• Stacked or compact version: for narrow spaces such as a phone screen.
• Symbol only: the mark without the name, for icons and avatars.
• Light and dark versions: one for light backgrounds, one for dark ones.
• One-colour version: all black and all white, for places where colour is not possible.

If your brand guidelines set a minimum size or clear space around the logo, include them; the web team will follow them.

Favicons and site icons

A favicon is the small icon in the browser tab and bookmarks, and Google can also show it next to your site in search results. Google's favicon guidelines set out the rules:

• The favicon "must be a square (1:1 aspect ratio) that's at least 8x8px", and Google recommends one "larger than 48x48px so that it looks good on various surfaces".
• It is declared with a <link rel="icon"> tag in the header of your home page.
• Google Search lists the supported formats as "BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF".
• The favicon URL "must be stable (don't change the URL frequently)", and Google and its image crawler must be able to fetch both the favicon and the home page.

A full logo with small text becomes unreadable at this size, so use the symbol-only version.

If people can install your site on their phone, as with a progressive web app, it also needs larger icons listed in a web app manifest. web.dev's guide to adding a web app manifest says that "for Chromium, you must provide at least a 192x192 pixel icon and a 512x512 pixel icon". MDN's reference for manifest icons describes a "maskable" icon as one designed with a safe zone, so "any part of the image outside the safe zone can be ignored and masked away" when the phone crops it into a circle or rounded square. Keep the important part of the symbol well inside the edges.

The image shown when someone shares a link on social media is separate again; see our guide to link previews and Open Graph tags.

App icons

A mobile app needs its own icon artwork. On Android, Google's guide to adaptive icons says you "must provide two layers for the color version of the icon: one for the foreground, and one for the background". The guide says to size all layers to 108x108 dp, and explains that only the inner 66x66 dp is "never clipped" by the shape a phone maker applies.

Apple's Human Interface Guidelines for app icons also recommend designing in layers, which designers combine in Apple's Icon Composer tool. Apple advises a simple design "with a minimal number of shapes", says to "prefer vector graphics" when bringing layers into Icon Composer, and to "include text only when it's essential to your experience or brand". The store submission itself is covered in our guide to publishing an app to the App Store and Google Play.

Fonts and their licences

Fonts are software, and each one comes with a licence. Before a brand font goes on a website, check that its licence allows that use.

Many web fonts use the SIL Open Font License (OFL), which describes itself as a "free, libre, and open source license specifically designed for fonts". The OFL FAQ says you may use OFL fonts "to create logos or other graphics" with "no additional license or permission" required. The conditions apply "when you redistribute, bundle or modify the font itself". The FAQ also notes that a font "optimized" for a website, for example cut down to fewer characters, counts as a Modified Version and must follow the OFL's renaming rules.

The Google Fonts repository says "most of the fonts in the collection use the SIL Open Font License, v1.1", some use the Apache 2 license, and the Ubuntu fonts use their own licence. It adds: "It is important to always read the license for every font that you use."

Commercial fonts are licensed by the foundry that sells them, and terms vary. A licence to install a font on your office computers does not necessarily cover serving it on a website or including it in an app. Check the licence or ask the foundry. If the brand font cannot be used online, choose a close open-licensed alternative together.

Brand colours and contrast

Send your brand colours as exact codes, such as hex values (#1A4D8F), not as a description or a screenshot. A colour that works in a logo can be hard to read as body text.

WCAG 2.2 success criterion 1.4.3, explained in the W3C's Understanding Contrast (Minimum), requires text to have "a contrast ratio of at least 4.5:1" against its background, or at least 3:1 for large text (18 point, or 14 point bold). Two points matter for brands:

• "Text that is part of a logo or brand name has no contrast requirement."
• But "text that has insufficient contrast due to corporate identity or brand guidelines is not exempted". A pale brand colour can stay in the logo, but may need a darker shade for headings, links and buttons.

For buttons, form fields and focus outlines, success criterion 1.4.11, Non-text Contrast, asks for at least 3:1 against adjacent colours. A common answer is a slightly extended palette: the brand colours, plus a darker and a lighter shade of each, agreed with whoever owns the brand. Our website accessibility guide covers the other checks.

Keeping the files in one place

Put every brand file in one shared folder your business controls, and name the files plainly, such as logo-horizontal-dark.svg or logo-symbol-white.png. Add a short text or PDF page with the colour codes, font names and where each licence is kept. The next designer or developer then gets one link. Keep photo licences and releases there too, as our guide to website photos and image licences explains.

A checklist

• The logo as an original vector file and as SVG, plus transparent PNG exports.
• Horizontal, compact and symbol-only versions, each in light, dark and one-colour.
• A square favicon larger than 48x48 pixels, made from the symbol.
• 192 and 512 pixel icons, with a maskable version, if the site can be installed.
• Layered app icon artwork that fits Android's safe zone and Apple's guidelines, if you have an app.
• Font names, files and licences that cover web (and app) use.
• Brand colours as exact codes, with text and button shades that meet WCAG contrast.

Frequently asked questions

What logo file format does a website need?

Ideally the original vector file and an SVG, which MDN describes as ideal for icons and user interface elements because it scales to any size. Keep transparent PNG copies too, for places that do not accept SVG.

What size should a favicon be?

Google requires a square favicon of at least 8x8 pixels and recommends one larger than 48x48 pixels. Sites that can be installed on a phone also need 192x192 and 512x512 pixel icons in the web app manifest.

Can we use Google Fonts on a business website?

Most fonts in the Google Fonts collection use the SIL Open Font License, which allows commercial use, including in logos, without extra permission. Some use other licences, so read the licence for each font you use.

Does our logo have to meet colour contrast rules?

No. WCAG says text that is part of a logo or brand name has no contrast requirement. Brand colours used for ordinary text, links and buttons are not exempt, and need 4.5:1 for normal text or 3:1 for large text and controls.

Do we need separate artwork for app icons?

Usually yes. Android adaptive icons use separate foreground and background layers with a safe zone, and Apple recommends layered, simple artwork with text only when it is essential. A symbol-only vector logo is the usual starting point.

Planning a new website? Bring your logo, brand colours and fonts, if you have them. We design the main pages in your brand, reviewed on phone and desktop, and check colour contrast and other accessibility basics against the W3C WCAG guidelines before launch. See our website development service and all our services, or email [email protected].