Mar
What Is A Favicon And Why Use One
by admin
What Is A Favicon?
Visit almost any popular website and have a look in the address bar. To the left of the URL you will see a 16×16 pixel image or icon. If you then bookmark or favorite it you will see that icon when you scroll through the list. If your browser supports tabs you will also see the icon in the tab. In most cases the icon is a static image unless you use Firefox or Flock.
By default it has an .ico extension, but, depending on the browser, you can use gif, jpg or png format files. If you haven’t created a favicon, each browser will provide a default one for you.
Browser Support
- Internet Explorer (version 5 or later)
- Firefox/Flock
- Netscape (version 7 or later)
- Konqueror
- Firebird
- Opera (version 7 or later)
Why You Should Use A Favicon
Because your favicon is shown in the address bar, bookmark/favorite list and tabs the visitor will associate it with your site. This will help your branding and will make finding your site either amongst the tabs or in the favorite/bookmark list easier for the visitor.
At each page request most web servers also look for the favicon. If it is not present a 404 error is recorded in the error log, so by creating the favicon your error log will be shorter and it will be easier to find the real errors.
How To Make A Favicon
As I mentioned earlier, a favicon is a 16×16 image, this could be created in any image application, but it has to be saved in an icon format with an extension of ico. If you own either PhotoShop or PaintShop Pro you can download a free plugin from http://www.telegraphics.com.au/sw/. To create your favicon, I suggest that you create it in a 64×64 document and then when you have finished reduce it to 16×16.
For those of you that do not have either of these applications, you can go online to http://www.favicon.cc/ This is a rudimentary online editor but it gets the job done and is free to use.
Once you have created the icon you upload it to the root directory of your site. To make it visible, add the following code in the head section in the header.php file:
<link rel="icon" href="/favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
Plug-ins For WordPress
Favicon Head: If you don’t want to manually edit your header.php, this plugin will make the changes for you.
Favicon Manager WordPress: This is like Favicon Head but you can also have the image included in your RSS2 and Atom feeds. There is an Option Menu in WordPress’s Admin Panel for easy configuration.
Tags: branding, browser, favicon, icon, web server, wordpress
Category wordpress |
Print This Post
|
Thank you for posting this very helpful information. Making a favicon for my website has been on my “To Do” list for a while now.
Lane of VeganBits.com
I like the use of a Favicon as it personalises the website. The other day for the 1st time ever I say one that was animated? Need to dig out that site to see how it was done
Although I have had a favicon for a while, I didn’t even think about having one for the RSS feeds etc.
So that’s a good suggestion which I will be implementing later. Also like the idea of the animated versions which the above users pointed out.
There is never a stupid question right? Where is my root directory?
ETTAROSE> It seems you have a Blogspot Blog, which likely means you will not have access to your root directory as your service is hosted.
The above method is aimed at self hosted solutions like Wordpress.org for example (not the free wordpress.com version)
With self hosted sites, you have access to the whole server and in this case ROOT is simply the upper most level of directory. It’s like your C drive. ROOT is your C Drive, then you have folders within that. ROOT is where it all happens for the most part.
If you try this link: favicon for your blogger blog
this details some methods for installing it on BLogger, I am unfamiliar with Blogger personally. Failing that, just google for ‘favicon for blogger’, there are many posts on how to do it.
Hope that helps.
G
I just want to know where this was two weeks ago when I spent an evening putting two favicons together for our blogs.
thx Graham, talk amongst yourselves guys
Ha ha.
YEah, who are you? The cheek of it, frankly im disgusted with the utter rudeness of it all.
Pah.
Colin,
Thanks for this helpful article. I created a favicon for my site a few months ago. The template that I am using used a php script to access the icon that was buried several folders below the ROOT. This worked for a while and then it just quit. I’m guessing this was related to some type of update (wordpress, host, browser, etc…).
At any rate, I moved my icon to my images folder, used your script and voila. My favicon is displaying again.
This article solved a problem for me, so I thought it warranted a tip. I was more than happy to send you a tip through Scratchback.
Thank you,
Wayne Gilchrist
@Graham: Who am I??? man, that’s deep… I’ll meditate on that
@Wayne: Glad to be of service
I prefer to stick it in the root as that makes for less typing in the head. This in turn leads to a slightly smaller file size. If you have 11,000 or more pageviews a month those few bytes can make a heck of a difference on the bandwidth. And thx for the SB tip, much appreciated 
I like using a favicon. It does give the site a bit of an additional individual touch. Plus its so easy, why wouldn’t you have one?