what is favicon?
favicon is a feature that allow u to show logos beside url in your website address bar.how to do?
here the link that jay gave me
But after that i found out we can actually do one ourself via using photoshop too.
first, u need to download this photoshop plug-in.
here
right click and choose "save target/link as"
this plugin is to give photoshop the ability to open an .ICO files.
after download, move the plugin into the "File Formats" folder inside your Photoshop Plugins folder
as below:
after that, run your photoshop.
below are the steps:
open a new file, width and height both put 16 (best icon size)put your background content transparent if u wana build a transparent background icon.
(or u can edit your own picture to the size)
after done, go to file>> save as.
at the format area, choose ICO format, and save.now, u have your Favicon.ICO files..
upload your file "somewhere", and insert the code below in your blogtemplates in between the <head>.........</head>
<link rel="icon" href="favicon.ico" />u have to edit the href="favicon.ico" coding to the url that you upload your .ICO file.
<link rel="shortcut icon" href="favicon.ico" />
for example:
<link rel="icon" href="http://myblog/download/favicon.ico" />
<link rel="shortcut icon" href="http://myblog/download/favicon.ico" />
ur done! refresh and see your icon!
14 comments:
Oh my my .. what nice icon .. how did u do that..
the person who helped u must be very smart :P
I love this tutorial!
I had always wanted to find out how to buat itu.
Oh, I love you so Lu Lu.
ahhaha yea, the person (jay) who help me very smart :D
nonnie: thanks :)
wahlau,this tutorial ,greats !!
tq
Lu lu .. y does nonnie have a bird on her shoulder.
haha. actually i got to know this html last year when i was blogskinning. the favicon in my blog has been there for quite some time liao also. your explanation is a bit complicated. but the codings are correct. =D
elynda: my explanation complicated? got simpler way!? tell me tell me!! i know u saw u have one that can move one. how to do?
jay: u should ask nonnie ma why me.
onjya: thanks :)
coz i m scared of nonnie.
Why scared of me? I don't bite wor.
Btw, it's a butterfly not bird.
And.. it's for fun so it doesn't look so empty.
hahaha... actually, my moving favicon is just a .gif picture (100 X 100) that i found in a forum. actually, any .gif sized pix can also be used in .gif picture. make sure the bg is transparent, like wat u said in ur post.
maybe the complicated part is the making the favicon. coz i'm still new to photoshop. hehe...
erlynda: yea its juz 3 steps! .gif file with transparent background the wil juz move~ hahah i should make my face icon -.-
thanks for the info
Thanks for posting this tutorial! It is surely of great use to me =)
teddy: ur most welcome :)
Thank you so much for this tutorial on favicons. I followed it to the letter and it worked perfectly. Great Job!
Post a Comment