Having Your Own Favicon
****Latest Updates**** It seems that favicon in blogger can't be read by Firefox hence some modifications made to ensure that this favicon tutorial remains relevant. Changes are made in this tutorial and once again all are fine. Happy creating.
****Updates****
There seems to have some problem with the codes that prevent it to be displayed in IE even after bookmarking it. Changes have been done and this mini-tutorial has been updated. Guaranteed to be working 100%. Tested. =p
Just completed my Favicon (pronounced as fav-eye-con) today and done installing it so that it will show in front of my blog's URL.
Basically, a Favicon is an icon that is used to make the URL looks interesting, sort of like to promote the URL/website to have better appearance.
Usually the logo of the website is used as a Favicon. Why Favicon? Personally I think it is cool to have customized icon for that extra touch. For more info, click here.
Still don't know what a Favicon is? Have a look at mine.
(If you have not noticed yet, in front of my URL)
Just completed my Favicon (pronounced as fav-eye-con) today and done installing it so that it will show in front of my blog's URL.
Basically, a Favicon is an icon that is used to make the URL looks interesting, sort of like to promote the URL/website to have better appearance.
Usually the logo of the website is used as a Favicon. Why Favicon? Personally I think it is cool to have customized icon for that extra touch. For more info, click here.
Still don't know what a Favicon is? Have a look at mine.
(If you have not noticed yet, in front of my URL)
URLAnyway, you can custom made your own Favicon or just use your picture as a Favicon for your blog or website.
If you prefer to create your own then you will need at least an image editor that can support Icon (.ico) file format. I am using photoshop for my Favicon. However, before you can create icon files in photoshop, an extra plug-in is needed.
You can get the extra plug-in (free) from here.
(Just copy the plug-in and paste it inside photoshop plug-in folder)
This is what I made as my Favicon using Photoshop. (bigger view)
(with the extra file format plug-in of course).
(Don't mind the design. I am never the artistic type but at least it represent something.)
(BC- BenardCometh)
................................................................
How To Create And Use a Favicon
First of all you will have to create an image of 16 x 16 pixels. This is a must in order to have your Favicon displayed.
(Note that Firefox can display 32 x 32 pixel favicon but IE can't)
After you are done using up your creative juice creating the ultimate favicon for your blog/website, save the file as an Icon file (.ico)
(remember the plug-in for photoshop?)
(For firefox, you can use png as well or if you prefer animated favicon, you can save it to .gif)
(Have I said already that Firefox is good?)
Now you should have a Favicon to your name
(doesn't matter either you create yourself or use the online tool)
Then you need to upload it to your website
(put it in your root directory)
After that, you need to add a code between the head tags
The code to add is
**This is considering that you have your own hosting/domain**
............................................................
How To Use Favicon In Blogger
After you have your favicon (.ico), you need to upload it to any image hosting service that accepts .ico files
(Blogger file upload doesn't accept .ico files)
I am using the Google Group to upload my favicon.
If you want to use that, you need to create a new group and then upload your favicon and then copy the URL.
(found out that google group would make the link relative which disable the favicon)
Now I am using Fileden.
A free hosting that allow you to upload .ico also.
After that, login into your Blogger and go to Edit HTML and add a code between the head tags.
The code to add is
For example
(If you use the following code, you would be using my Favicon, =p)
(you can just put is after the head tag)
****CHANGES/UPDATES****
Please note that the placement of the code need to be changed in order for the favicon to be working again.
Put the code just before the end of head tag NOT after the start head tag
Changes
After you have included the code, save and you have your very own Favicon
Congrats
...............................................
Anyway, why IE? Just use Firefox for better browsing experience.... =p.
First of all you will have to create an image of 16 x 16 pixels. This is a must in order to have your Favicon displayed.
(Note that Firefox can display 32 x 32 pixel favicon but IE can't)
After you are done using up your creative juice creating the ultimate favicon for your blog/website, save the file as an Icon file (.ico)
(remember the plug-in for photoshop?)
(For firefox, you can use png as well or if you prefer animated favicon, you can save it to .gif)
(Have I said already that Firefox is good?)
Now you should have a Favicon to your name
(doesn't matter either you create yourself or use the online tool)
Then you need to upload it to your website
(put it in your root directory)
After that, you need to add a code between the head tags
The code to add is
**This is considering that you have your own hosting/domain**
............................................................
How To Use Favicon In Blogger
After you have your favicon (.ico), you need to upload it to any image hosting service that accepts .ico files
(Blogger file upload doesn't accept .ico files)
I am using the Google Group to upload my favicon.
If you want to use that, you need to create a new group and then upload your favicon and then copy the URL.
(found out that google group would make the link relative which disable the favicon)
Now I am using Fileden.
A free hosting that allow you to upload .ico also.
After that, login into your Blogger and go to Edit HTML and add a code between the head tags.
The code to add is
For example
(If you use the following code, you would be using my Favicon, =p)
(you can just put is after the head tag)
****CHANGES/UPDATES****
Please note that the placement of the code need to be changed in order for the favicon to be working again.
Put the code just before the end of head tag NOT after the start head tag
ChangesAfter you have included the code, save and you have your very own Favicon
Congrats
...............................................
I have tried using Internet Explorer and Firefox to view my blog in order to test the Favicon. There is no problem with Firefox but in IE, you need to actually bookmark the URL first, only then the Favicon will show. So, what are you waiting for? IE users, bookmark this blog now. =p
(Any feedback on other browsers are welcomed)
(Any feedback on other browsers are welcomed)
Anyway, why IE? Just use Firefox for better browsing experience.... =p.
Get Firefox
That is all on the mini Favicon tutorial.
(Yeah, I know. It is not even tutorial-like..=p)
(Yeah, I know. It is not even tutorial-like..=p)
whoa, tutorial tutorial! i wan my own favicon too! haha and yeah this is quite a detailed explaination actually, thanks for putting all the info in one piece! :D you did a great job, really!
ReplyDeletedamn nice man~ keep it up!
ReplyDeleteThis is a good tutorial. But I this stupid computer idiot... Eh, means I still blur. Anyway is it free? Wakaka... this is always my first concern... I will stick to my own dull link :P
ReplyDeleteWhen you create something that can make me 10 pounds lighter in pic, I will definitely use it. keke...
conan_cat: Thanks, just thought that this would be cool for people to try. =p.. I noticed that you have your own favicon already what, so no need for this..hehehe
ReplyDeleteLukXiuFung: Now you can try creating your own... =p
Princess Eileen: Hope you like your favicon... =p
Oh! So that's what you call that thingy. Hehehehe...I noticed your favicon immediately and wondered how you changed it...heehee...:P
ReplyDeleteGood one! :)
hahaha! nice favicon dude! :D
ReplyDeletelooks damn nice! (far far better than the [B] =) )
I saw some web got animation one wor, how about that?
ReplyDeleteops, i know how dy.
ReplyDeleteNeed tutorial? lol..no lar.
just change the code with .gif will do.
*hug hug* Thanks, you are such a gem!!! I will credit yours truly in my next post. If I forget, you can punish me :P Wukaka
ReplyDelete宝茹: Ya and now you know what it is called. =p.. And you can create your own to add more personal touch to your blog.
ReplyDeleteyipguseng: Thanks, still thinks that it is lacking something.... I am not the artistic type mah... But at least better than the original [B], millions have. =p
LukXiuFung:Yeah, can make animation one also, but for size that small...it is 16x16 or 32x32, animation doesn't really suit my taste...hehehe... so i prefer static... =p
Princess Eileen: Heh, I do that sincerely what...=p. And also it is just a simple favicon..=p
Glad you like it... =p
I made mine, but only for FireFox view :) IE get sux
ReplyDeleteYeah, IE wont accept animated Favicon. Only Firefox will be able to render the animation. So, what you can do is to ask all your reader to change to Firefox...heh..
ReplyDeleteOr.... you can just change it to a static Favicon... =p
Whoa...this is some really good stuff....
ReplyDeleteHave to try it out someday!
sweet !! i've wanted to do this !! gonna try it once i get back tonight. *getting all excited n trail off with an evil laugh*
ReplyDelete3POINT8: Yeah, try it out... If you encountered any problem, feel free to ask.
ReplyDeletelevian: Try try..... Happy creating.. =p
thank you for your tutorial, really help, very good, keep your good job & nice to know you.
ReplyDeleteSure, no sweat... I am very helpful... =p
ReplyDeleteAhhh now I know what you meant when you said fav-eye-con :P
ReplyDeleteI wanna get one too yay! Thanx for the tip!~
sorry but I dont see your favicon. I only see the blogger favicon next to your name.
ReplyDeleterunawaycat: Just ask if you need any help.
ReplyDeleteFiona1: I have checked already. It is there. Hmm, maybe because you are using IE? FOr IE try to bookmark/favorite my blog then you will see the favicon. =p
So, you don't have a choice.. Bookmark now.. =p