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 on the Logos page, you can create a simple text logo, upload a graphic logo, and even upload images for your invoice logo, mobile store logo, and favicon.

Adding a Text Logo

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

  1. On the Logos page, select Text under Website Logo.
  2. Enter the exact text – up to 255 characters – as it should appear on your storefront.
  3. Click Apply.

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

Adding a Graphic Logo

To upload a graphic logo:

  1. On the Logos page, select Graphic under Website Logo.
  2. Drag an image file from your computer into the drop zone, or hover over the drop zone and click the Browse icon to find the image on your computer. Image files must be .PNG, .GIF, or .JPG format.
  3. Once you've dragged or selected an image file, click Yes if you'd like the software to resize the image for your mobile and invoice logos, or click No if you'd rather upload different images for these logos.

Once you've uploaded your logo, you can preview how it will appear on your site by clicking the View icon. If you're not satisfied with your logo, simply drag a new file into the drop zone or click the Upload icon below your existing logo to browse for a new image.

Note that the automatic resizing feature does not generate favicon images. See the Adding a Favicon section of this article for more information.  

Adding an Email / Invoice Logo

Give your invoices and emails a consistent look by adding your logo to them as well. If you chose not to generate resized images when you uploaded your main logo, your company name will display in place of a logo on invoices. You can upload a custom graphic logo for invoices by doing the following:

  1. Expand the More Logos section and locate the Invoice Logo heading.
  2. Drag an image file from your computer into the drop zone, or click Upload to browse for the image on your computer. Image files must be .PNG, .GIF, or .JPG format and use the Recommended Size listed under Invoice Logo. Show

If you're not satisfied with your invoice logo, simply drag a new file into the drop zone or click the Upload icon below your existing logo to browse for a new image. If you'd rather eliminate the invoice logo entirely, click the Delete icon.

Note that to use a graphic logo on store invoices and emails, you must enable the Graphic option under Website Logo at Design > Logos.

Adding a Mobile Storefront Logo

By default, your store's domain name displays in place of a logo at the top of your mobile storefront. If you're using a Text logo for your website, that text will appear as the mobile logo instead. To add a custom graphic logo for your mobile store:

  1. Expand the More Logos section and locate the Mobile Logo heading.
  2. Drag an image file from your computer into the drop zone, or click Upload to browse for the image on your computer. Image files must be .PNG, .GIF, or .JPG format and use the Recommended Size listed under Mobile Logo. Show

You can preview how the logo will appear by viewing your site on a web-enabled mobile device, or by clicking the View icon below the current image. If you're not satisfied with your mobile logo, simply drag a new file into the drop zone or click the Upload icon below your existing logo to browse for a new image. If you'd rather eliminate the mobile logo entirely, click the Delete icon.

Adding a Favicon

A favicon – short for favorite icon – is a small image that represents a particular website. Visitors browsing your site may see the favicon in several areas:

  • 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! Keep in mind that since favicons are small images, you should us a simple and readable image. Many companies use a variation or a small portion of their logo, rather than the full image.

Adding a favicon to your site is simple:

  1. Expand the More Logos section and locate the Favicon Logo heading.
  2. Drag an image file from your computer into the drop zone, or click Upload to browse for the image on your computer. Image files must be .ICO format and use the Recommended Size of 16 x 16px.

To remove an existing favicon or upload a new one, use the Upload and Delete icons below the current image.

Note that image editing programs such as Adobe Photoshop and Photoshop Elements have the ability to save images in .ICO format, but you can also search online for free tools to convert other file types to .ICO. For more information, see our Favicon Image article.

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 the Recommended Size guidelines listed under each logo type.

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