Table of Contents

Web-Ready Logo Guidelines

  • Updated Aug 2023

Preparing Brand Assets for Web Deployment

In order to maintain agency standards for design and performance, a suite of web-ready brand assets should be provided or created to the specifications outlined in this guide. These variations should be available before the project is handed off to the designer.

Exporting Instructions

Before you begin, see this video and our Guide for Exporting Web-Ready SVG Files from Illustrator

Web-Ready Logo Variations

  1. Full Color Logo (.svg)
  2. Login Logo (.svg)
  3. Monochrome White Logo (.svg)
  4. Inverted Logo (.svg)
  5. Logo Mark (.svg)
  6. Favicon (.svg or .png)
  7. Meta Logo (.jpg)
  8. Open Graph Image (.jpg)

Quality Requirements

Under no circumstances will low-quality logos or brand assets be acceptable for use on a website built by New Urban Media. In the event that logo files are not provided in an acceptable quality and format, a logo re-build can be performed (for an additional fee) or live text will be used as an alternative until an acceptable replacement is provided.

File Naming Conventions

In order to maintain consistency and to make the file variations easy to find and identify in the media library, the files should be named using the following conventions:

  • [Brand Name] logo full color.svg
  • login-logo.svg
  • [Brand Name] logo mono white.svg
  • [Brand Name] logo inverted.svg
  • [Brand Name] logo mark.svg
  • [Brand Name] favicon.svg
  • [Brand Name] logo meta.jpg
  • [Brand Name] og image.jpg

Alternative Variations

Additional file formats or logo variations can be used if deemed necessary by the designer, but any alternatives or substitutions for the required formats listed below must be approved by the project manager before being uploaded to the media library.

DetailDescription

Full Color Logo

The full color logo is typically used in the global site header. For optimal visibility and spacing, the horizontal version of a logo is usually the best option, especially for horizontal headers. To ensure quality and performance on all screen sizes, the header logo should be rendered in vector format (.svg). For accessibility and SEO, the file name and alt tag should begin with the brand name and end with "Logo". Example: New Urban Media Full Color Logo
VariationFull Color Logo
File TypeVector
File Format.svg
Color ModeRGB (Full Color)
BackgroundTransparent
Widthn/a
Heightn/a
Resolutionn/a
Alt TagBrand Name Logo
File Name[Brand Name] Full Color logo.svg

DetailDescription

Login Logo

The logo for the login page is typically identical to the full color logo. However, due to the method in which it has to be deployed, the naming convention is particularly important. In most cases, you can simply clone the full color logo and rename the file: "login-logo.svg"
VariationLogin Logo
File TypeVector
File Format.svg
Color ModeRGB (Full Color)
BackgroundTransparent
Widthn/a
Heightn/a
Resolutionn/a
Alt TagBrand Name Logo
File Namelogin-logo.svg

DetailDescription

Monochrome White Logo
For use on color backgrounds or on top of heavily saturated image backgrounds, an all-white monochrome color logo variation must be available.
VariationAll white
File TypeVector
File Format.svg
Color ModeRGB
BackgroundTransparent
Widthn/a
Heightn/a
Resolutionn/a
Alt TagBrand Name Logo
File Name[Brand Name] mono white logo.svg

DetailDescription

Inverted Logo
An inverted variation of the full color logo should be available for use on dark backgrounds. (Applicable only for logos with color brand marks)
VariationHeader Logo
File TypeVector
File Format.svg
Color Moden/a
BackgroundTransparent
Widthn/a
Heightn/a
Resolutionn/a
Alt TagBrand Name Logo
File Name[Brand Name] logo inverted.svg

DetailDescription

Logo Mark

The brand mark or "brand icon" (if one exists) is sometimes used on the forward-facing areas of the website (at the discretion of the designer).
VariationHeader Logo
File TypeVector
File Format.svg
Color ModeRGB (Full Color)
BackgroundTransparent
Widthn/a
Heightn/a
Resolutionn/a
Alt TagBrand Name Brand Mark
File Name[Brand Name] logo mark.svg

DetailDescription

Favicon
The favicon (similar to the Brand Mark but with a different filename format) appears in browser tabs and can also appear in other places, like bookmark icons on mobile devices, etc.

NOTE: If a brand mark does not exist, a suitable alternative must be created that is consistent with the organization’s branding.
VariationFavicon
File TypeVector
File Format.svg
Color ModeRGB (Full Color)
BackgroundTransparent
Widthn/a
Heightn/a
Resolutionn/a
Alt TagBrand Name Logo
File Name[Brand Name] favicon.svg

DetailDescription

Meta Logo
The meta logo is a version of the logo (or brand icon) that sits inside a square container (1:1 Ratio), but is aligned to fit into a round container without clipping any part of the artwork. (Most often seen on social media, search engines, business listings, etc.). While this version of the logo is not usually displayed on the front-end of the website, it is referenced in the code (via schema markup) as the "official" logo in the preferred format for search engines.

Template: Meta Logo Template
VariationMeta Logo
File TypeRaster
File Format.jpg
Color ModeRGB (Full Color)
BackgroundWhite
Width1000px
Height1000px
Resolution72dpi
Alt TagBrand Name Meta Logo
File Name[Brand Name] logo meta.jpg

DetailDescription

Open Graph Image
The Open Graph Image (or Open Graph Thumbnail) is a 16:9 variation of the logo intended for use as a fallback featured image. If no featured image is assigned to a page or post, the Open Graph Image will be used as a substitute.

Template: Open Graph Image Template
VariationOpen Graph Image
File TypeRaster
File Format.jpg
Color ModeRGB (Full Color)
BackgroundWhite or Black
Width1920px
Height1080px
Resolution72dpi
Alt TagBrand Name Open Graph Image
File Name[Brand Name] OG Image.jpg