YC Documentation
Page tree
Skip to end of metadata
Go to start of metadata

Overview

 

"favicon" are small images that appear in the browser's address line and are expected to be present for each website's domain. Historically browsers would accept only "ico" format. However all modern browsers will be more than happy to render "gif" or "png". This cookbook explains how to add favicon to your shop using png image and CMS of YC. 

Adding 32x32 PNG favicon

 

We recommend using 32x32 pixels png images as these work best with modern browsers and allow to preserve maximum quality.

Shop image attribute for favicon

 

The first thing to do is to decide which shop attribute IMAGEX you want to use for your favicon. 

You might already have a number of IMAGE attributes that you are using for your shop. 

Say we want to add SHOP_IMAGE2 as the shop image attribute for favicon. Using attribute management section of YUM in the SHOP attribute group find SHOP_IMAGE0 attribute and use "Copy" button to create a new attribute. Change CODE to SHOP_IMAGE2 and name to "Shop favicon", then "save".

Upload favicon PNG

 

Go to shop management section of the shop you want to set the favicon for. Open "Attributes" tab and find SHOP_IMAGE2 attribute. Click the "..." button and upload your PNG icon. Make sure it is 32x32 pixels exactly.

Once the icon is upload you can test it in browser by crafting a URL of the form:

# format
http://[yourdomain]/imgvault/shop/[image_file_name_as_it_appears_in_attribute]
# Example
http://demo.yes-cart.com/imgvault/shop/favicon_SHOP10_c.png

 

Using CMS to add favicon

 

Default theme contains a number of placeholders where various html element can be added. In particular there is a "header_include" section which allows to add meta tags such as Google site verification meta tags and favicons

If you do not have this content element already simply create a new content element for the shop with SEO of the following format:

# Format
[SHOP_code]_header_include
# Example
SHOP10_header_include

 

In the content section add the following directive:

<link rel="shortcut icon" type="image/ico" href="/imgvault/shop/favicon_SHOP10_c.png?v=1">

 

Note that you need to do this for each language version of your site. On one hand it is a bit more work but on the other it allows you to specify different favicons and different meta tags per locale.

Note the important bits:

  1. rel="shortcut icon" - this tells the browser that this is a favicon meta tag
  2. type="image/ico" - this tells the browser that this is a normal image icon (as opposed to ico format)
  3. href - is the path to the image for the icon. Note the "?v=1" part. This is a trick to overcome excessive caching that browsers use for the icons. Sometimes it is very hard to flush this cached icon if you change it. So a better way is to add this extra parameter. SO when you reupload a new icon you change the parameter to "v=2" then "v=3" etc, so that the browsers always use the correct one.
  • No labels