Adding Favicons to Wordpress, the Real Way.
Posted by Asuka_Aki | Posted in Wordpress | Posted on 29-05-2008 |
Tagged Under : graphics, multimedia
What Are Favicons
A favicon (short for ‘favorites icon’), also known as a website icon, page icon or urlicon, is an icon associated with a particular website or webpage. A web designer can create such icons in several ways and many recent web browsers can then make use of them. Browsers that support them may display them in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface. Some operating systems, like Windows, will also often use the favicon for Internet shortcuts to sites placed on the desktop or in other directories.
Making Favicons
Favicons can be created on the fly using online favicon generators. You can use an image from your hard drive or from the net. You then download your icons and upload them to your server.
You can also use a freeware like IconArt and create your own favicons and cursors animated or static. I make my icons in Photoshop, resize them and save them as gif files so I can open them with Icon art and create my stuff.
Displaying Favicons
First you have to know that IE does not support animated icons. In fact it only shows .ico favicons. FireFox displays the cool animated favicons.
If you upload a favicon and try bookmarking your site and still don’t see the favicon, don’t panic. Hit F5 or clear your cache from the top menu of your browser. Close your browser and open it again, your favicon show be there.
The code is placed in the <head> section, between <head> and </head>.
WordPress
Wordpress Codex suggest this line of code and placing your faviconin your theme’s root folder:
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" /> |
Animated Favicons
If you must absolutely show an animated icon (.gif) in Firfox you can also use a normal favicon in IE (.ico) So you will get a favicon in both browsers. Remeber IE does not show animated icons.
by using the following code:
<link rel="shortcut icon" href="favico.gif"> |
Code For Regular Favicons For FireFox and IE
This is the code my blog uses and as you can check my favicons show up in both browsers. This is the code I used. Another code I found by trial and error. This way the favicon shos up.
<link rel="Shortcut Icon" href="http://favicon.ico" type="image/x-icon"> |
There that’s it, have fun and don’t forget to bookmark us!
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Good post. You might also want to add a point about how different browsers work. My favicon shows up perfectly well in Firefox and SeaMonkey, but does not show up in IE.
[...] A favicon (short for ‘favorites icon’), also known as a website icon, page icon or urlicon, is an icon associated with a particular website or webpage. A web designer can create such icons in several ways and many recent web browsers can then make use of them. Browsers that support them may display them in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface. Some operating systems, like Windows, will also often use the favicon for Internet shortcuts to sites placed on the desktop or in other directories…Read more? [...]
PLace icon in theme folder and use following code:
<link rel=”shortcut icon” href=”/favicon.ico” />
<link rel=”Shortcut Icon” href=”/favicon.ico” type=”image/x-icon”>