Logos

When you’re setting up your store, one of the first things you’ll want to do is upload your logo. A logo is as important to a website as a sign is to a brick-and-mortar store – it helps brand your business and lets your customers know they’re in the right place.

Consistent branding across all of your materials and publications is important, so Volusion makes it easy to add your logo to your store header, emails, invoices, and more.

Contents

Getting Started

To get started adding your logo to your store, go to Design > Logos. article/logos-camera show image-getting started-design logos

Once inside the Logos page, you can create a simple text logo, upload a graphic logo and favicon, and even upload an image for emails and invoices.

Adding a Text Logo

To add a text-based logo, do the following:

  1. On the Logos page, select the Text radio button in the Website Logo section.
  2. Enter the exact text – up to 30 characters – as it should appear on your storefront.  article/logos-camera show image-getting started-logo text
  3. Click Apply to Template.

By default, the text logo size, font, and color are determined by the style properties of your store template. However, you can customize these settings in the Logos page. See the Tips and Special Settings section for more information.

Adding a Graphic Logo

To upload a graphic logo:

  1. On the Logos page, select the Graphic radio button in the Website Logo section.
  2. Click Browse and find the image on your computer. Image files must be .PNG, .GIF, or .JPG format.  article/logos-camera show image-getting started-browse image
  3. Select the image and click Upload.  

Adding an Email / Invoice Logo

Give your invoices and emails a consistent look by adding your logo to them as well. By default, your text logo option settings on the Logos page are replicated for invoice and email logos, but you can upload your own custom image file easily:

  1. Click Browse under the Invoice Logo section and find the image on your computer. Image files must be .GIF format. 
  2. Select the image and click Upload.

Note that to use a graphic logo on store invoices and emails, you must enable the Graphic option within the Logo Type setting in My Logos.

All invoice logos must be .GIF file format. Since logo and invoice images will not be automatically re-sized to fit the page, you should use the Recommended Logo Size listed under File Format Specifications.

Adding a Mobile Storefront Logo

By default, your store name is displayed in place of a logo at the top of the mobile-optimized display. To create a mobile-optimized logo for your mobile site:

  1. Click Browse under the Mobile Storefront Logo section and find the image on your computer. Image files should be 320 x 80px in .JPG file format. Select the image and click Upload.
  2. Test how the logo looks by visiting your site on a suitable web-enabled mobile device or enter the address (with /mobile appended to the URL) in an iPhone-emulating website such as http://iphonetester.com/ or http://testiphone.com.

Adding a Favicon

A favicon – short for favorite icon – is a small image that represents a particular website. It appears in several places on most web browsers when a user views a page that is part of that website:

  • In the browser address bar

  • Next to the page name on its tab (unless the browser does not supports tabs)  
  • Next to the page name in the bookmark list  

Favicons help to personalize the web browsing experience – and may even help customers find your page among their cluttered bookmarks!

Adding a favicon to your site is simple:

  1. Click Browse under the Favicon Logo section and find the image on your computer. Image files should be 16 x 16px and .ICO file type. 
  2. Select the image and click Upload.

Image editors such as Adobe Photoshop and Photoshop Elements have the ability to save images in the .ICO format. Keep in mind that since favicons are small images, you should us a simple and readable image.

Tips and Special Settings

Styling a Text Logo

If you’re using a text logo for your store, the style of the text logo can be modified by changing the cascading style sheet (CSS) file properties for the store's template. This requires basic knowledge of HTML and CSS.

Graphic Logo Sizes

Having a big, bold logo can capture customers’ attention, but a logo that’s too large or too small can really detract from a site’s design.

For best results, follow these size guidelines for graphic logos:

  • Website: 300 x 120px
  • Invoice: 200 x 100px
  • Mobile: 200 x 100px
  • Favicon: 16 x 16px

If a size of 300 x 120px is recommended, for example, it should be 300 pixels wide and 120 pixels high. These size constraints can be set within a graphic editing program like Adobe Photoshop.

One of the easiest ways to ensure a custom logo image is sized correctly is to simply right-click on the default store logo, save it to your computer, and open it with an image editing program. You can create your new logo using the same file. This way, the size of the new logo will match the size of the original.

Summary

Having a logo present and visible throughout your store is one of the most effective ways to brand your business in the mind of your customers. The flexibility of your Volusion store template makes it easy for you to place your logo consistently across your storefront, emails, newsletters, and invoices.

Don’t have a logo yet? Let our designers and brand experts create one for you.

Watch the Design video series