Your Website’s Identity

Your website needs an identity, and you can give it an identity in seconds. Now you are probably thinking what do I mean by identity. Well, when you go to an airport the first thing the guy checks is your passport and before reading everything else, he sees your picture to match you, so on the passport your picture is your identity, and on your website your Favicon is your identity. What is a favicon? Favicon is an icon associated with a particular website or webpage which is shown next to the url in the url bar in the browser. It is also known as website icon, page icon, and/or url icon.

It is very easy to make and if you get a custom designer you should ask your designer upon the completion of the project for a small favor and that is to make a favicon for you. (Alright designers don’t kill me for making your customers a pain) but fellas you can ask for it and it doesn’t take long for a designer to make a 16 x 16 .ico file for you. But many of you should know how to do this on your own so you are not dependant on anyone else.

First of all you need to open a designing software (Adobe Photoshop if you have it), or get a 16 x 16 png for your website your logo or some icon that represents you, and then you can convert it using one of the online converters.

Auto Favicon from Images
Convert Icon

If you don’t have Adobe Photoshop or you don’t want to use online converter GIMP is your best option. Download Gimp it is free. Adobe Photoshop cost money and doesn’t let you save as .ico (But i still love Photoshop). Well Download Gimp and use that. I prefer using GIMP because the size of the favicon is much smaller in GIMP rather than a converted file. I am speaking from experience. GIMP is better in optimizing images.

You want to make sure that your final outcome file is named favicon.ico << Now it comes time for you to put it on your website. Upload favicon in your root directory. (public_html or www)

Now in your index file or for wordpress bloggers in your header.php right before the code ends you need to put

 

Now favicons are very weird. They won’t show up on the same type of browser for different people. So while you may see it and your friend may see it, but your girlfriend doesn’t. That is because their cache is not cleared up and sometimes it just is that way. Now for those of you who are thinking that you want to be smart and put the favicon.ico file in your template folder. Don’t be a smart alec and put it in your root directory because there are limitations on this function as it takes the favicon and relates it to a specific html or xhtml document. To avoid this the favicon.ico must be in the root folder.Therefore follow the direction. If you email me with a question and you didn’t follow the directions i’ll just angry. (Nah just kidding, but seriously follow the directions)

While the above code for the head area should work fine, but if you want to be extra secure and make sure that your icon is displayed to everyone.

It is suggested you add these two codes

< link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" >

< link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" >

Remove the spaces in these … i had to add it because wordpress would make these code disappear even when i used the raw html plugin.

Now give your website an identity today. If you are looking for some inspiration then check the few below.

Why is it important. because everyone knows when they see that Y next to the url it is Yahoo. Same with Technorati. It just adds to the brand and gives identity to your website. I hope you are working on getting your own right now. Hope this small tutorial helped. If this did then show off your favicons in the comment area