What is a Favicon?
A favicon is a file containing a small icon associated with a particular website or web page. These are the small logos/icons that you often see in the address bar or browser tab when browsing the web. You can create this icon and upload it to a website, thus giving you a small but noticeable touch of branding.


How to Create a Favicon
There are some limitations on favicon files. They must be one of the following dimensions: 16×16, 32×32, 48×48, or 64×64 pixels. They can only be up to 32-bit color depth. There are several options for file types, but the one supported by the largest number of browsers is .ico. You can use any image you'd like, but we recommend using a simple logo or stylized letter that represents your site/company so it's distinguishable when very small.


Once you have the image you'd like to use for your favicon, you can convert it to a .ico file by using a site like this one. Once you've uploaded the image, chosen your dimensions, and downloaded the converted file, you're ready to install it on your site!


How to Add a Favicon to Your Site

Upload your file to the root /images directory (use FTP) , then edit the _Head.cshtml file in the /Skins/YourSkinName/Views/Shared folder and add the line below near the top of the file (usually right below other lines you'll see that start with "<meta"): 

<link rel="icon" href="/images/favicon.ico" type="image/x-icon" />


How do I set a favicon for each MoreStore in v10?


If each store has its own skin, you can follow the directions above for each skin.  To avoid name conflicts, you'll need to either give each site's favicon image a different name, or put each site's favicon.ico file in the /Skins/YourSkinName/Images folder.  Either way, you'll put the full path to the .ico file like you did above, once in each skin's _Head.cshtml file. 


The code for referencing the favicon if you moved it to your skin would be:

<link rel="icon" href="/Skins/YourSkinName/Images/store-name-favicon.ico" type="image/x-icon"/>


If you have multiple stores using the same skin, you can use a URL Rewrite Rule to tell browsers where to find the favicon image for each site.  This process is more advanced than the method above!  Be sure to have a full backup of your site's files first, and you may want to consider having one of our development partners make the change for you.

First, you need to find where your site stores rewrite rules. If you're using preFIX or one of our other always-up-to-date solutions, look for a file called RewriteRules.config in the Config folder on your site. If not, you'll want to edit the web.config file in the root of your site.

Open up the config file you found above in a text editor, and search for "<rules>” (no quotes).  You should find a list of XML nodes that look something like this:

<rule name="...">
     <match .... />
     <action .... />
</rule>


At the end of this list of rules, you'll want to add a new rule that tells browsers to look for a different .ico file depending on the domain it's hitting on your store. Those .ico files need to be named according to your domains, in the pattern of "yourdomainname.com.ico" - for example, "myfavoritestore.com.ico", "anothergreatstore.co.uk.ico", etc. Note that if you let customers hit your site at both "www.domain.com" and "domain.com", you will need to make a copy of your favicon image files for both "www.domain.com.ico" and "domain.com.ico".  Using the rule exactly as it's typed below, all of those images need to be in the root /images folder on your site.  You should end up with a rule like this in your config file, with a set of files like the one below:

<rule name="Store-Specific Favicon" enabled="true">
     <match url="^favicon.ico" />
     <action type="Redirect" url="images/{HTTP_HOST}.ico" />
</rule>