Favicon Image

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 in their cluttered bookmarks!

Adding a favicon to your Volusion site is simple:

  1. In your Admin Area, go to Design > Logos.
  2. Expand the More Logos section and locate the Favicon Logo heading.
  3. 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.

How to Create a Favicon

To create a favicon, you will need a graphics editing application (for example, Adobe Photoshop). The most challenging part of creating a favicon is coming up with a very small – 16 x 16 pixels – square graphic that identifies or represents your store. Some people use the initial letter or letters of their store name in the colors, font and/or style of the logo. Others create a graphic icon that visually captures the look of the store. The possibilities are endless – just keep it simple.

If your graphics application allows it, you can use a transparent background – the ICO format permits transparent pixels and lets the browser background colors show through when uploaded.  

Using a 16 x 16 grid

  1. Open your graphics application and create a new 16 x 16 pixel graphic.
  2. Zoom in to about 1600%.
  3. If necessary select "pixel grid" or create a grid with 1 x 1 pixel spacing.
  4. Start drawing your icon! Remember to check at 100% zoom to see what the finished icon will look like.
  5. Save the final icon with the name "favicon.ico". As long as your application can save files as .ico files, you're finished. Otherwise you’ll need to save it in some other format and convert it to .ico. See Converting graphic files to .ico below for information.

Using a larger grid

  1. Open your graphic application and create a new square graphic, for example. 64 x 64 or 128 x 128 pixels.
  2. Zoom in as needed.
  3. Start drawing your icon. You may want to zoom out for an idea of what the image will look like at 16 x 16 size.
  4. Resize (or scale) your image to 16 x 16 pixels. You may want to experiment with the quality/interpolation/resampling settings.
  5. Save the final icon with the name "favicon.ico". As long as your application can save files as .ico files, you're finished. Otherwise you’ll need to save it in some other format and convert it to .ico. See Converting graphic files to .ico below for information.

Using an existing image

  1. Open the image you want to use in your graphic application.
  2. Select and crop to the square area you want to use.
  3. You may want to increase the contrast or adjust the color levels at this point.
  4. Resize or scale your image to 16 x 16. You may need to return to the previous step and make adjustments if the image at this size is unclear or unsatisfactory. This will be a trial and error process and depend on your graphic and your application.
  5. Save the final icon with the name "favicon.ico". As long as your application can save files as .ico files, you're finished. Otherwise you’ll need to save it in some other format and convert it to .ico. See Converting graphic files to .ico below for information.

Converting other file formats to .ico

If the graphic application you use does not support the .ico format, you can either download a graphics converter or use an online converter. You can also use a favicon generator to create icons from existing images.