Adding Favicon to your URL
I had favicon last year but when I changed template I somehow forgot to put it back. Lol! Yesterday, while tweaking my blog, I took the chance to put it back, this time with different image. Last time I had the pink heart as favicon. Now I’m using a character from one of my illustrations.
So, what is Favicon?
Favicon is actually a favourite icon or url icon, which is 16×16 pixel square icon associated with a particular website or webpage.
Do you want to put one in front of your URL?
Ok , here’s the process:
- First of all, you need an image. It can be anything; simple name initials, shapes, your own face, your cat’s face, etc. Make sure you crop only the part you want as Favicon.
- Go to this url: http://www.html-kit.com/favicon to convert your image to .ico format.
- From the website, browse your image in the ‘image to use’ box and click the ‘generate favicon.ico button.
- Voila! you already have a favicon image! Next, download the favicon package to your computer. You should have two versions of the favicon; one static and the other one animated. Choose the one you like. The favicon.ico in the package has 2 image formats in a single file:
16*16-pixel 256-color and 32*32-pixel 256-color.
Installation (this is the readme.txt file from the downloaded package)
A. Installing the favicon with animation
- Upload favicon.ico and animated_favicon1.gif to the root of your web folder.
- Add the following HTML code to your web page, in between <head> and </head> tags:
<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" type="image/gif" href="animated_favicon1.gif" >
B. Installing the favicon without animation
- Upload favicon.ico to the root of your web folder.
- Add the following HTML code to your web page, in between <head> and </head> tags:
<link rel="shortcut icon" href="favicon.ico" >
Well, that’s about it! If you’re not sure whether it has been installed properly or not, you can check the the html-kit validator.
Ok for those of you who want a precise steps for both both wordpress and blogspot platform, below is how.
WordPress:
- upload your favicon.ico file to your public_html folder on your wordpress server using an ftp application.
- Locate and edit your header.php of your wordpress blog theme folder. Depending on the theme you use, locate the header.php folder and edit the file by adding the following code in between the <head></head> tag:
<link rel="shortcut icon" href="favicon.ico" >
- Save your header.php file and upload it back to the server.
- Refresh your browser and voila! If you don’t see it immediately, no worries, it’ll be there in no time.
For blogspot:
- Visit this website for a detailed how-to: Favicons Made Easy. Will try it on my blogspot blog later when I’m free!
1st commenter
Spiffy
223 Comments
Spiff, The Spaceman
Chop again!
Spiff, The Spaceman
Waduuiiiii, I got it again … this is a miracle la … LOL!
Spiff, The Spaceman
Man, I’m good … hahaha!
Spiff, The Spaceman
Ok, ok, I’ll admit, I have nothing to do in the office … LOL!
emila
hahahaha sure bemmie will stare big time!
Spiff, The Spaceman
I remember dulu-dulu when I was first trying to figure out how to put a fav icon for my blog, sampai nak pull my hair out cos I couldn’t figure it out … LOL!
Spiff, The Spaceman
I’m sure he will la Emila. I’d better wear big huge goggles la … LOL!
anny
aiyaaaaaaaaaaaaaaaaaaaaaaaa
u and emi have a conspiracy going on ka?
anny
i think u basically parking here laa.. hhahahahahha.. wei.. takde kerjo ka?
Spiff, The Spaceman
Hahaha@Anny!
anny
Bem and i already give up.. hahhahahahaa… the mamat spaceman is on a roll.. hhahahahaah..
Spiff, The Spaceman
I finish all my work in the morning so I can park here in the evenings. Pandai tak? LOL!
Spiff, The Spaceman
Stillgot 14 days to go la … I’m sure you two will plan something … LOL!
TH
wah spiff very good chop, ada six sense ke.
anny
thanks for the sharing of knowledge Emi 🙂
TH
ya.. emi good share wit us, if not still korek.. how to do.. haha.. but just lazsy.. ni.
Spiff, The Spaceman
Not six sense la TH, more like sick sense … LOL!
anny
pandai jugo.. good boy!
anny
Bem is bz
i am bz
Nessa is in the toilet
Ken is bz with shop
Jia is not around
TH is sometimes around
Khemy is working
Marzie is bz
Diya is hilang
Balqis also hilang
sapo lagi ado?
blinkky
Nice favicon you have here =)
emila
hehe where got conspiracy!
emila
lol! it’s just me and spiffy!
emila
haha if got time, you shud try do this favicon
emila
thanks blinkky!
Spiff, The Spaceman
LOL@Anny!
Spiff, The Spaceman
AnnyBoo, you must remember I’m a spaceman, got super duper high tech tracking devices to know when Emila got new post … hahaha!
ken
i suspect too… 😀
ken
the spiff gone for early retirement and camp here?
ken
basically it’s all for out spaceman…
ken
basically it’s all for *(our) spaceman…
denaihati
Ni pun cara mudah buat favicon ..pendek dan mudah @ http://denaihati.blogspot.com/2009/04/favicon-cara-mudah.html
ken
thx for sharing…I’ve been wanting to do for a long time…now I think i can try my hands on them 🙂
jia
aiyo….ni org angkasa lagi ka…grrrr…nk stare pn da x larat nih…where’s bem…….
jia
cehhhh….so clever…la Spiff…. 🙂
jia
Jia pn nk try la…tp nk ikon ape ek….
byknyer nk kene belajor nih..
thanx k.emi for sharing..:)
ken
tak pe we belajar 2gather…newbie too 🙂
Mariuca
chop again it seems spiffy!!!
emila
hi marzie!
Mariuca
Emila, I added favicon to my blog url edi, but good thing u came up with this, can refresh my memory! Wan to change favicon nanti he he!
emila
hahaha
Mariuca
Emila! Having probs la commenting here. after i comment it takes me to a warning msg page, dunno why, then I refresh it says duplicate comment then I pressed back arrow, then only can see this page again! Thrice edi today…hmmmm….
ken
i do agree with the sick sense…gila punya 😛
Mariuca
Hi Emila! baru je makan lunch ni…jgn cakap Bem dia ingat I diet hehehehhehehehhe!
emila
cool! i think i wann change my new favicon already hahaha got so many favicons that i want to put…
Mariuca
But no worries, maybe it’s just a technical glitch, biasa la…
Mariuca
Ah tu la I oso wan to change mine, cause mine now is the old mariuca and old mpg lol!
Mariuca
Baru balik vakasi then got jobs waiting for me edi la emila itu…but nemind, must take all so can save for my next vakasi woo hoo! 🙂
Mariuca
Benji is here with me, looking at me commenting here meow!
Mariuca
Aiyooooooo tak drop here for 1 week terus terkeluar carta la MPG!
Mariuca
Must get back to top 3 at least!
Mariuca
eh tukar header ke emila?
Mariuca
I like the animasi one, B oso said cool!
marzuki
untuk blogspot, jangan letakkan bawah ‘head’ tapi letakkan bawah ‘body’, nanti baru dia kuar.
Khemy
OMG Spiff..10 FC..that’s world record!
farahani
wawawa . Spiff ! First komenter ea ? Haa , merajuk lagi . 😀
farahani
WOOO ! Cantik giloss template Kak Emila ! 🙂 Lama betul tak jenguk . Cehh ! Spiff , kali ni orang tak bagi peluang . Spiff dah top first commenter . Bagilah Fara satu . Ecewah ! 😛
farahani
heip ! congrats spiff ! jangan merajuk lagi . 😀 nasib baik nessa kejutkan fara . buwerrkk! 😛
farahani
HAHAHAHA . Just joke laaa .
farahani
yup . he is the topp everything .
farahani
kak balqis lama tak datang aaaa . mana dia pergi ?
farahani
oo . macam tu ya ? nanti nak cubalah . 😉
farahani
the same . 🙂 saya budak baru belajar .
bem69
LOL this blog should be called Spiffy’s Illustrated Choppings now haahahha
Rhomany
This is great Emila! I just added my little sunshine as my favicon. All the previous instructions I’ve seen have been really complicated.
bem69
takpelah takyah change, old mariuca and old mpg is too cool kamonnn (LOL)
bem69
Oi kata start BD hari ni… justifikasi ka?
bem69
betul, kalau tak dia revert balik ke blogspot favicon
bem69
cuba pasti boleh punya farahani, tengok ken pun dapat curik satu hahaha
iYdaJuhar
nak jugak. tapi tak de dolly lagi. huuuhu
nurulbalqis
Salam Kak Emii!!
nurulbalqis
Rindunyaa nak comment kat sini 😉
nurulbalqis
Ingat nak bercuti dari comment..
nurulbalqis
Tapi tak boleh jadi laa 🙂
Hehehehe..
nurulbalqis
Lawa template baru EIB 😉
cute cute!
nurulbalqis
Thanx untuk favicon tu yaa Kak Emi!
nurulbalqis
Code diaa memang dah tau cuma laman web tu jee baru tahu sekarang 🙂
Spiff, The Spaceman
Ya Fara, I am, I am … hehehe!
Spiff, The Spaceman
Hahaha@Ken!
Spiff, The Spaceman
What? Nessa yang tip you off? Let me go zap her … hahaha …
No la, where got merajuk, main-main only!
Spiff, The Spaceman
Thank you, Thank you … LOL!
Spiff, The Spaceman
Woi Jia, dulu you call me mamat spaceman, now orang ankasa pulak … LOL! What’s next ah 😀
Spiff, The Spaceman
No la Khemy, belum world record lagi … hehehe!
marvic
Spiffy sudah melampau..10 fc already..huh…
Spiff, The Spaceman
Bem, cool, nice title la … hahaha!
Spiff, The Spaceman
Hahaha@Ken! Thanks for the vote of confidence buddy!
marvic
having favicon is a good idea to promote our blog…kekekeke..going to try later on
marvic
dont forget that marvic also busy..all these time jadi silent reader je…lol
marvic
why nessa always in the toilet? 😆
marvic
rolling..rolling….rolling….
Spiff, The Spaceman
Ya Marzie, it’s Spiff again … LOL!
marvic
gotcha!!!! come la help me at my office…hihihihihi
Spiff, The Spaceman
I think Bem sabotage la tu Marzie … hahaha!
Nessa
Hi Fara! Cepat kejar Spiff… dia dah byk mengomen tu!
Nessa
Makan gaji buta.. repot kang!
Nessa
Hahaha! Anny macam pengawas repot attendance 😀
Nessa
LOL! Yang itu kene tanya Jia… 🙂
Nessa
Jia, apa kata letak JiggelyPuff?? hihihihi
Nessa
Marzieeee!!! Ohayo Gozaimass… eh, betul ke bahse Jepun I ni??
Nessa
Marzie, PB ke? kenot finish give some to me… hehe
Nessa
Spiff kaki bolot kat sini… Top FC, Top dropper, top commenter… haish…
anny
ha! lupa sama Maria…
maria jugo bz..
anny
hahahahaa.. err.. i was always the troublemaker in school.. never a pengawas.. hehhehe
anny
but in my line of work.. we do have a detailed weekend report come friday.. hahaha.. it is something like the repot above.. hehhehe
anny
all for the love of the missus…
Spiff, The Spaceman
Woi Nessa, you also not on my side kah? LOL!
Spiff, The Spaceman
Hahaha … not gaji buta la Nessa, separuh buta only!
Spiff, The Spaceman
Marvic, silent reader ok, at least my position tak tergugat 😀
Spiff, The Spaceman
Nessa likes the toilet maybe … LOL!
Spiff, The Spaceman
Cannot la Marvic, then how to camp kat Kak Emila punya blog la? LOL!
Spiff, The Spaceman
Yes, yes, I’m doing this for love … LOL!
Spiff, The Spaceman
This month only la, next month I don’t think can sustain this la Nessa, crazy tau having to camp all day and fend everyone off! LOL!
Spiff, The Spaceman
Trying for 11 now la Marvic … hahaha!
anny
hahahhaa.. we doooooooooooooooooooo love u spiffy *staressssssssss*
Spiff, The Spaceman
Good Morning everyone 😀
littlemama
salam kak emi, i dah buat payment for the header ye – oledi email the payment details also ..;)
yoon see
thanks for sharing Kak Emila:)
Mariuca
Alamak Bem reply gak kat sini!
Mariuca
Konichiwa Nessa!!!!! 🙂
Mariuca
U might be right Spiffy!!!!! Bem stop sabotaging me!
Mariuca
Not PB la Nessa, real job this one he he! No PBs for me so sad!!!! 🙁
Mariuca
Alamak!!!!!!! Hehehhehehehe small BD only Bem, did I forget to mensi that?
Spiff, The Spaceman
Your cat also blogging? LOL!
farahani
kak balqis !!!! 😀
wan
kak emi, ho w to make the favicon appear on the blog list? it appear on the tab, but not the blog list…
owh, love the dolly kak emi! nice meeting you ~
emila
wan i think in the layout setting you need to add ‘Blog List’ instead of ‘Link List’. The favicon will appear automatically but it won’t appear for those who doesn’t have one. But I think mine is not appearing as well in the blog list. Dunno why 🙁
bain
mula!!!~~~
bain
2
bain
1 dulu…
bain
3
bain
4
bain
5
bain
6
bain
7
bain
10
bain
12
bain
13
bain
14
bain
15
bain
16
bain
17
bain
18
bain
19
bain
20
bain
21
bain
22
bain
23
bain
24
bain
25
bain
26
bain
27
bain
28
bain
29
bain
30
bain
31
bain
32
bain
33
bain
34
bain
35
bain
36
bain
37
bain
38
bain
39
bain
40
bain
41
bain
42
bain
43
bain
44
bain
45
bain
46
bain
47
bain
48
bain
49
bain
50
bain
51
bain
52
bain
53
bain
54
bain
55
bain
56
bain
57
bain
58
bain
59
bain
60
bain
61
bain
62
bain
63
bain
64
bain
65
bain
66
bain
67
bain
68
bain
69
bain
70
bain
71
bain
72
bain
73
bain
74
bain
75
bain
76
bain
77
bain
78
bain
79
bain
80
bain
81
bain
82
bain
83
bain
84
bain
85
bain
86
bain
87
bain
88
bain
89
bain
90
bain
91
bain
92
bain
93
bain
94
bain
95
bain
96
bain
97
bain
98
bain
99
bain
100