Your favicon – short for "favorite icon" – image may be small, but it shows up in a number of different places on the web!

Visitors browsing your site may see the favicon in several areas:

  • In the browser address bar
  • Next to the page name on its tab
  • 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 be sure to keep it simple!

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"

Note: If the graphics program 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!

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"

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"

Summary 🚩

Favicons may be teeny tiny, but they pack a big punch! Having a unique favicon will help you stand out, and make it easier for shoppers to make it back to your store.

Did this answer your question?