Here’s a Quick Way to Add A Favicon to your Site
This is the first of four posts this week about Favicons and their uses.
A favicon is the small image or button that appears in the tab of a tabbed browser, or next to your web address in a browser history. This hint explains a very quick way to create a FavIcon and add it to your site. Here goes:
Choose a picture. Make it square, make it simple, and ideally make it a GIF or PNG file.
1 - Visit the Favicon from Pics website.
2 - Follow the steps there:
-
Select the file.
-
Generate the icon.
-
Preview the icon.
-
Save the icon to your PC (Check that the file is small - less than 4k).
3 - Put the favicon.ico file in the root directory of your domain.
4 - Add a line like this (inserting your own domain name) to the header of your web page template:
<link rel=”shortcut icon” href=”http://www.mattwardman.com/favicon.ico” type=”image/x-icon”/>
5 - Go and view your website. The icon should now appear in your broswer. You may need to do a hard refresh on the webpage to make sure you see the updated version - press <CTRL-F5> in most web browsers.
All done. Did you make it in 5 minutes?
Further Reference
-
The W3C have a guide here.
-
Shankar has some thoughts here.
-
But watch your bandwidth - Scott Hanselman used 27Gb of bandwidth with his favicon.
To come
I’ll be posting 3 more articles on this week:
- How to add a Favicon to Blogger (which is a little more complicated) and
- What to think about when you design your favicon.
- Tips and Tricks for favicons - some things you may not have thought about.
Tags: Create a favicon, how do I make a favicon, favicon generator, favicon from pics, Add a Favicon to your Site
[tags]Create a favicon, how do I make a favicon, favicon generator, favicon from pics, Add a Favicon to your Site[/tags]
Article Series - Favicons
- Here’s a Quick Way to Add A Favicon to your Site
- How to Make Your Blog Stand out - add a Favicon to Blogger
- How to design a great favicon to publicise your blog
[...] procedure is as described in my last article, except for the one step. With blogger you cannot store your favicon picture file in the same place [...]
[...] Here’s a quick way to add a favicon to your site [...]
[...] The first article in the series explains the basics about favicon and how to add a favicon to your web page. [...]