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.
- Getting Started
- Adding a Text Logo
- Adding a Graphic Logo
- Adding an Email / Invoice Logo
- Adding a Mobile Storefront Logo
- Adding a Favicon
- Tips and Special Settings
Adding a Text Logo
To add a text-based logo, do the following:
- On the Logos page, select Text under Website Logo.
- Enter the exact text – up to 255 characters – as it should appear on your storefront.
- 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:
- On the Logos page, select Graphic under Website Logo.
- 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.
- 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. Also note that you cannot delete a logo image; you can only replace it. If you do not add a new image of your own, a default image displays. If you don't want to display a logo image at all, we recommend using the text logo option instead (see previous section for details).
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:
- Expand the More Logos section and locate the Invoice Logo heading.
- 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.
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.
Adding a Mobile Storefront Logo
Please be aware that this section only applies to stores using the Mobile Commerce feature in conjunction with a legacy non-responsive template. For mobile optimization, we recommend using a responsive template, which renders the Mobile Commerce feature obsolete.
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:
- Expand the More Logos section and locate the Mobile Logo heading.
- 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.
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:
- Expand the More Logos section and locate the Favicon Logo heading.
- 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.
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.
Bear in mind that the logo display area of your template is controlled by its underlying code, and the designer who originally created the template specified the default logo size for optimum appearance. This is particularly important for responsive templates, which automatically adjust in display size, shape, and style to different viewing devices. To change the default display dimensions, you must edit your template code.
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.