When you visit certain websites you may notice a new icon appear in the address bar of the site. I never really wanted one. But by default, when you add a site to the homepage of your iPhone (click on the plus sign in Safari and then click on Add to Home Screen), it will use that icon. Why do I care? I mean it’s not like anyone is likely to actually add this site to their home screen. But juuuuuust in case, I wanted it to have my spiffy new icon. You know, the one I spent at least 15 minutes building. Otherwise, when you add a page to your homescreen it will pull another image; possibly one you don’t want it to use…
I’m not sure why this was such a challenge for me. Maybe I’m just challenged (ok, so not maybe – definitely)… Basically, if you look up in your address bar, you should see my new icon that was generated for the redesign of the site. I wanted to call that file krypted.ico because, well, that’s kinda’ how I roll. But, it seemed like no matter how hard I tried, when I regression tested against different browsers on different platforms it would break. Until that is, I changed the icon name to favicon.ico. Even if you reference it by another name in the code, it seems to still really, really want to be called favicon.ico instead of krypted.ico. I guess a favicon by any other name is, well, dysfunctional.
Now that I’ve related my icon dramedy to you let’s look at how to actually do this. It’s going to take far less time than the rant I just completed. To add an icon to your site, you would add a very small snippet of code into the header. The code will set a “Shortcut Icon” and associate it with a .ico file. In the following example, that file is on the root of the site, although you can nest or bury it as deep as you like. The code:
<link rel=”Shortcut Icon” href=”<?php echo get_settings(’home’);?>/favicon.ico” type=”image/x-icon” />
For example, I pasted the above code, absolutely unaltered into my header.php, in the very last line before the end of the header, which looks as follows:
</head>
The result was something similar to the following
<head>
<all the other stuff after the head but before the end of the header>
<link rel=”Shortcut Icon” href=”<?php echo get_settings(’home’);?>/favicon.ico” type=”image/x-icon” />
</head>
Keep in mind that when you are doing these kind of things, you may have to wait a second for the icon to show up on the home screen of your iPod Touch or iPhone, you may need to remove and recreate the icon if it was previously there. If you are using an actual computer (who uses those any more) then you may need to reset Safari or trash your cache and reopen your browser to test.
As for the icon itself, there are a lot of ways to create .ico files. There are fat clients for Mac OS X that will create the icon files:
There are sites that will generate the files such as the following:
Overall, if you are concerned about the appearance of your site on those mobile devices and you want a little extra flair (deliberate jab at myself btw) for the address bar then this is a simple, fast and easy way to go about it.