Using a Custom Icon aka favicon.ico

One of the finishing touches for a skin design is to use a custom favicon.ico file. This is the icon that appears in the web browser tab, like the on on this site as seen in Internet Explorer:

above you can see the little dog icon for my dog mojo that mojoPortal was named after. Really I'd like to make a nicer icon to replace it but I'm not very good with graphics myself.

You will see this file in your skin folder and you can replace it with a custom one of your own making. There are lots of tutorial on the net about how to make one, just search for "create a custom favicon" and you will find lots of them.

Once you create it and put it in your skin folder you need to clear your browser cache or else rename the skin to give it a new url and then it will load your new favicon.

Site Icon for iPhone/iPad

Apple's embedded Safari browser looks to the file apple-touch-icon.png in the root of your site for the icon to display. If you want to customize this, you can upload a custom version of that png file, and add this within the head block of your layout.master file:

<link rel="apple-touch-icon" href="/customIcon.png"/>

Last updated by Jamie Eubanks 2011-04-04