If you are using Internet Explorer 7 or above right now, you should be able to see a green icon that reads ‘o c s n’ in the tab for this page and in the address bar of that tab. This little icon is called a ‘favicon’, and it is easy to add to most websites!
Before you begin, you need to make sure you are able to add a favicon to your website. To do this, you need:
- A website or blog that allows you to edit the web page or template’s HTML.
- A web hosting or blog hosting service that allows *.ico files (where the asterisk represents a file name) to be uploaded. (This address can be different to the address you plan to apply the favicon to.)
- An icon (see below).
First you need an icon in the *.ico format. Instructions on how to do this can be found in the How To: Make Your Drive Stand Out post. This icon should be a single, 16x16 image. No alpha channel works best.
Now you need to upload your icon to the internet. It does not matter if it is uploaded to an entirely different website/hosting service to the website that you plan to apply the icon to; you just need to know the web address of the icon.
The method of adding the favicon to the website you want to apply it to is rather simple. All that is involved is adding a line of HTML to the website’s template or the web page you plan to add the icon to. Add the following code after the ‘<head>’ tag in your HTML:
<link href='(full address of icon)’ rel='icon' type='image/x-icon'/>UPDATED (24/11/2009): THIS WORKS BETTER: <link href='(full address of icon)' rel='icon' type='image/vnd.microsoft.icon'/>
Whilst you are adding lines of code to this section, you may want to add this after the above line of code:
<link href='(full address of icon)’ rel='shortcut icon' type='image/x-icon'/>UPDATED (24/11/2009): THIS WORKS BETTER: <link href='(full address of icon)' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
This second line will ensure any bookmarks to the site also show the icon.
Now save the website and it should work! NOTE: The favicon may not appear in the the address bar or the tab when the page is not loaded in Internet Explorer. In the case of Blogger, the favicon will, however, appear in links to your site in people’s profiles and the followers area no matter which browser is used.(Note: Last bit not true if updated (24/11/09) code is used, however it may take some time to show the new icon if you have loaded the page before.)
0 responses:
Post a Comment
Insulting, abusive or obscene content will be removed. Replies from non-members will be approved before being displayed.