Many of you will be familiar with a Favicon. Favicon (short for Favorites Icon) is a feature that makes it possible to associate a special logo or other small graphic with a web page. If you visit my home page you can see an icon of my face in the browser address bar!
If you’re familiar with graphics packages and editing WordPress template files then creating a Favicon is a fairly easy task. But what about the rest of us who are non-coders, who don’t know how to modify template files and want an easier way of doing things?
Here are my 3 simple steps to follow that will get a Favicon up and running on your web site in minutes. These steps are aimed at WordPress users but could be modified to cater for other blogging platforms.
Create your Favicon
1. Visit Favicon from Pics. Favicon from Pics is an online tool that can generate a Favicon from a picture, logo or other graphic of any size/resolution. When you visit this web site you will the following section.
You simply click the browse button, find a suitable image on your hard drive, and then click the ‘Generate Favicon.ico’ button. You will then be prompted to save a zip file containing the Favicon to your hard drive.
Upload your Favicon
2. Unzip the Favicon zip file and copy the Favicon.ico file to the root directory of your WordPress installation. The root folder is the directory which contains folders like \wp-content and \wp-admin, etc.
Activate your Favicon
3. Install the Favicon Head WordPress plugin. Favicon Head is a simple way to automatically include a favicon in your blog. No template file editing is required, you only have to upload the plugin file to your WordPress plugin directory and activate it. The default favicon location is favicon.ico, but can be changed through the plugin options page.
Voila! Click the refresh button on your browser and you should now have a Favicon appearing on your web site.
- Leave a comment
- Subscribe
- FREE Newsletter
- del.icio.us
- Stumble it!
- Digg It
5 responses so far ↓
1 Daniel // Jun 12, 2007 at 9:13 pm
Nice article for wordpress, but most browsers don’t need the meta includer, they just fetch the favicon.ico in the root directory.
I also wrote something similar a bit more tech-savvy maybe http://www.tutorial5.com/content/view/88/52/
2 Chris Rohde // Jun 12, 2007 at 11:07 pm
Dean,
Nice one, I’ve been having random favicon issues myself, so I will give this a shot when I am home and have access to gimp and inkscape (total noob with them anyway).
Chris
3 Pete // Jun 18, 2007 at 11:39 am
Hi,
If you navigate to http://www.easitill.co.uk, you can see a favicon in place. However, on the http://www.easitillweb10.co.uk/easitill (which is my companies new website) the favicon does not appear!
They are both the same icon, and both at the root level, any ideas??
Thanks,
Pete.
4 Dean // Jun 18, 2007 at 5:06 pm
I notice that the address of your new website ends with “/easitill”.
I’m not sure the internal structure of your web site but if you have a folder in root called easitill then you could try placing the favicon in the easitill folder rather than the root folder?
5 Sam // Sep 5, 2008 at 5:55 am
Hey good advice. I use SM Favicon Generator. This one works great and its fast.
Leave a Comment