Adding a Custom Favicon to Your Magento Store

Adding-a-Custom-Favicon

Favicons are the small icons used to represent website and web pages in multiple locations. The word favicon is an abbreviation of “favorite icon”.

Normally you’ll see favicons in:

  • The URL in your browser’s address bar.
  • A list of bookmarks next to a website’s name.
  • The page title name in browsers that utilize tabbed browsing.
  • Desktop icons for site-specific browsers.

Favicons are a great contribution to the overall look and feel of your brand. They create instant recognition and help your website stand out from rows of standard icons. Favicons also contribute to the professionalism of your store, adding polish and flair.

In Magento stores favicons are normally set to the Magento logo. Though, if you’ve used a theme on your store, another sample favicon might be loaded.

Favicons are super tiny, normally no more than 16×16 or 32×32 pixels in size. With Magento you can use .ico, .png, .jpg, .jpeg, .png, and .svg file types for your favicon. However, not all browsers are going to support all those file types. It’s commonly agreed upon that the best file format for favicons is .ico. Magento won’t convert your image, so you want to make sure that any conversions are done before uploading the favicon to your store.

What design should you use for your favicon?

  • Your logo, or a simplified part of it
  • The first letter of your business name (possibly stylized)
  • An image that represents what you do

Are you looking for inspiration? Here’s a list with examples of some Fantastic Favicons.

The good news is that Magento makes setting your own custom favicon very simple.

  • In the back end of your store, navigate to System > Configuration > General > Design.

Favicon 1

    • Click on the HTML Head panel to expand it
    • Click the Browse button next to the Favicon Icon field. Select your favicon file.
  • When finished, don’t forget to Save Config! When you save, your favicon will appear beside the Browse button.

Favicon 2

Once the favicon is uploaded, you should be able to view it in on the front end of your site. Type the address of your site into the address bar and hit enter. Your new favicon should show up. If you don’t see it, then refresh the page. If it still isn’t showing up, then you’ll want to clear your browser and Magento cache to view changes.

Favicon 3

Sarah has been with coolblueweb since 2012. She enjoys dance, movies and laughing at inappropriate times.

Leave A Comment?