What is a FAVICON? Favicon is a mini icon graphic that you see on the top of your browser or next to the Navigation bar on the left side. Favicon also being use in your live bookmark or in your easy live web feed folder. For me, a blog that doesn’t have favicon look like a naked blog. Favicon also being well known as the blog identity. To create a favicon wasn’t that really hard. It is so easy. Here i show you some quick way to create your own blog Favicon.
The first alterantive is, we need to have a graphic to be use for your Favicon. You can use photoshop to create the icon woth 32x32px size and save it in .png format. After that, we gonna convert and resize the png image into .ico file and make it smaller to fit the browser.
To convert the .png image file, I use Favicon.cc. It is one of my favourite online favicon maker. At the left bar, select import image and select the image file that you want to convert into ico file. There’s also several options for you to select. Just experiment with it to suit your own.
After that, you can edit it (sometimes it do pixelated and you need to fix it manually). After that download the icon to your computer.
Then, host the favicon.ico file to your server or any image hosting. For example, im using Ripway.com here since it support to hosting .ico file. You also can host this file to your root folder. But for other bloggers that doesn’t have blog hosting (especially blogspot user) you can use ripway.com anyway. All you have to do is upload the favicon file and then get the URLfor the favicon.
Now, lets insert the Favicon to your blog. For wordpress user (self-hosting only), open your current theme folder and select the header.php file.
Insert the following HTML tag inside the <head>...</head> section of your web page:
Now, copy the below code. Just replace the URL with your own Favicon.ico URL.
<link rel="shortcut icon" href="favicon.ico">
And paste it anywhere between the head tag. Save it and your done!
For blogspot user, go to Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-
<title><data:blog.pageTitle/></title>
Copy and insert the following code below the line:-
<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Remember to type in the “URL of your icon file“.
Save the template. When you refresh your blog site, you should see your nice little Favicon next to the blog address.
If you are looking for more inspirations for your Favicon graphics, SmashingMagazine.com have listed several good looking favicon from all over the web. You can take a look on this 50 Remarkable Favicons
listed by SmashingMagazine.
8 Comments
favicon ni walaupun kecik dan nampak macam tak penting tapi sebenarnya menarik kan. hehe
bagi aku, favicon ni adalah identiti bagi sesebuah blog.
walaupun dia tak secantik yg lain, but its make your blog RARE dude! haha
where to put the on the ?
umm, put what?
im sorry the link ref code?
and why is it not workin on me?
i mean it does not appear syuxx
umm, you mean for the blogspot one?
can you give me your blog URL? let me see first.
or just follow this simple tutorial from jackbook:
http://jackbook.com/blogger-hack-blogspot-hack-blogger-templates-customizing/favicon-how-to-change-or-create-it/
hoho..its nice tutorial. :)
A SUPPORTED BY THE DEVELOPER TOOLS? It was interesting. You seem very knowledgeable in ypour field.
rH3uYcBX