With so many different devices and browsers all having different approaches, needs, and requirements for favicons, sometimes it can be a little confusing to figure out all the different files and meta tags necessary to make your favicon work everywhere.

Luckily, there are services out there that make this easier for skin developers, such as http://realfavicongenerator.net/

Here is a guide to get your favicon into your skin (and we do recommend you keep the favicon skin-relevant).

Getting your favicon package

1. Create your favicon, or obtain a square .png, .jpg, or .svg of it from your web designer.
2. Visit http://realfavicongenerator.net/, click the "Select your favicon picture" button.
   Note: If a modal pops up telling you about your image resolution being bad, make sure your starting image is big enough. Also, sometimes it pops up telling you the image isn't square -- you can use it anyway and it will be centered in a square.
3. Configure your settings for the various platforms, using custom images where necessary (though I don't often end up needing to).
   Note: When you reach the settings for Android Chrome, make sure you set your "App Name" to your website's name.
4. Once you're done with platform settings, configure the generator settings (at the bottom, under "Favicon Generator Options").
   • Under "path" check the box labeled "I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here:"
   • Enter the path (from your skin root) to the place where you intend to keep your favicons (example: "img/favicons/").
5. Click the "Generate your favicons and html code" button.
6. Click "Favicon Package" button on the following page to begin downloading your files.
7. Copy the code provided on this page as well.

Adding the favicon to your skin

1. Open the layout.Master file in your skin and find the <portal:MetaContent /> tag, it's usually near the top of the file.
2. Paste the code provided on the favicon generator's download page, and paste it immediately above the <portal:MetaContent /> tag you just located.
3. Next, copy all of the files included in the favicon package you downloaded into your skin in the location you specified, from the skin root (example: "img/favicons/").
4. Refresh your site and you're done!

A note about the cache: Sometimes even after you've updated your favicon properly, you won't be able to see the change in your browser. Clearing your browser cache may or may not help, and there are no sure-fire ways to clear the favicon cache that I know of, so I recommend testing the change on a browser or device that you have never visited your site in before.