Today I feel bored and kinda stuck writing so I decide to have some fun with Photoshop and make favicon for my blogs. But what is favicon by the way? Favicon is a little icon that appear next to the web address at the top of your browser. Here are some of them if you are not sure what I’m talking about.
Why should you make favicon for your blog? You don’t have to if you don’t like the idea but I like my blogs to be unique and easy to find especially when I’m working with multiple tabs on my Firefox browser. I can have more than 20 tabs running at the same time and this tiny icons help me quickly identify my blogs.
How to make a favicon for your blog? If you like to design your logo or icon from scratch using the Photoshop software you will need to download the ICO / Favicon plugin for Photoshop because the software doesn’t recognize this .ico format. Note that there are some versions available depending on what platform you are working with. For Windows users the plugin is called ICOFormat.8bi. After you extract the zipped file you have to move this
ICOFormat.8bi file into the “File Formats” folder inside your Photoshop Plugins folder. Quit and relaunch the Photoshop if it’s already running.
It is recommended to make favicon on bigger canvas because it will be easier for you to draw the details, however if you don’t like to mess around with the design there are some websites that can create the favicon for you, one of them is Dynamic Drive Favicon Generator. What you need to do is pick up your image (it could be your blog logo for example) from your hard drive and upload it. Careful though with your selection because this icon will be very small in size, it’s only 16 X 16 pixels so simple pictures or logos will look better when converted into favicon compared to the complicated ones.
Here is the real dimension of a favicon compared to the source’s dimension:
After your favicon.ico is ready you need to upload it to yourdomain.com/ and verify it by typing http://yourdomain.com/favicon.ico in the browser’s location.
Finally insert the following code in your HEADER.php file:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
That’s all! Note that your favicon may take a few days to appear after you’ve completed the above steps. In fact in IE sometimes the favicon will disappear from time to time due to a browser bug.
- Rudi
Related posts:
Hello from Russia!
Can I quote a post in your blog with the link to you?
Hi Polprav,
no problem. Thanks for contacting me in advance!
-Rudi