Nakapasok na ako dyan dati bago pa siya i-open for...
Adding a Favicon to your site
Favicons are those little icons associated to a site that shows on a browser’s bookmarks, address bar, etc. If you want to give your site some sort of brand recall, having a Favicon associated with it is the way to go.
You’ve probably noticed my Favicon that I made a few days ago. It’s quite easy to do as long as you can edit the code on your pages. Sorry WordPress.com users, you’re stuck with the WordPress logo as your Favicon.
Here’s a short guide on how to have your own Favicon.
Design your icon
First you have to design your own icon using your favorite graphics application. It doesn’t have to be flashy. Actually, the simpler the better and use less, but vivid colors.
The size of a Favicon is 16 x 16 but I suggest designing it on 64 x 64 first. Here’s what I did on Fireworks with a font called Bummer and a transparent background for my rounded square icon. You could use a small scale version of your own logo if you have one.
Resize it down to 16 x 16 to check if it still looks good. When you’re happy with it, bring it back up to 64 x 64 and save it as PNG, BMP or GIF even.
Convert it to an icon file
Got your image? You need to convert it to a .ico file. Head to Bradicon which is one of the many online services that converts images to icons. Just upload your image and download the icon in seconds.
You should see how it will look like on browsers by going to the folder where you saved it. It is important you rename it to favicon.ico.
Upload your icon
So you got your icon file now. Next step would be to upload it somewhere. It could be on your own site, some image hosting service that accepts .ico files like PicPanda, as long as it can be accessed directly by the public. Take note of the location of the file.
Adding the code
It’s quite simple really. On all your pages or if you have access to the code of your template, put this piece of code below the <title> tag along with the other <link rel> tags.
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />
For WordPress users, the page to edit is the header.php on your theme’s folder. For Bloggers, just look for the Edit HTML page and place it after the <title> tag.
If the your icon is not located on the root directory of your site, change href accordingly (it could accept http URL’s).
When you’re done, restart your browser before opening your site again. You should see your Favicon by then.
Let me know if you’re having problems with this by leaving a comment. Cheers!
You might also be interested in:
- My site went down for hours!
- Bounce Rate vs Time on Site, should you care?
- Google AdSense blocked my site!
- How to link keywords within your Wordpres site
Filed under: Blogging Experience
Cute Favicon! Di ko pa napapalitan sa Lady Programmer ko.
Wait… parang galing yan sa blogroll ko hehehe. A different icon can really distinguish it from the rest.
calvin: hehe yup dun ko nakuha sa site mo.
ano bang balak mo sa icon mo? LP? computer icon?
hmmm… cge try ko gawa later…
this is a helpful article
calvin: sige abangan ko. let me know kung nagkaproblema.
but there’s a bug with IE diba. Sometimes you see it sometimes you dont. On my end, di ko kita favicon mo. anyway, thanks for posting this at naalala ko na i need to change nga pala my favicon
calvin: sa IE naman you have to bookmark the site to see it. ok lang yun, dami namang FF users out there and sooner or later all browsers will use it.
o, nawala naman yung ibang posts mo? nasa wordpress pa? anyway, lumalabas na yung favicon mo
hehe… bulok kasi ang IE eh… hehe…
yung isang post lang about the problem with my site. nasa wordpress di ko ma-retrieve hehehe.
Cool favicon
calvin: thanks! gawa ka rin sayo.
yeah. i have a new favicon too
i created it via favicon.cc
here’s the link to it –> http://www.favicon.cc/?action=icon&file_id=47480
nice! may ganyang site pala. I should write about it on my other blog. mahirap lang dyan is polishing the image. you could still smoothen the edges with a graphic app and import the image on the site. pero overall ok pa rin. thanks for sharing.
hehe, yeah medyo rough nga yung edges, pero ok na sya para sakin.
your favicon looks better, got the tutorial here, combined your instructions with Amanda’s, di lang masyado clear yung letter inside my favicon – but it makes it mine.(“,)
calvin: oo nga eh. letter “b” ba yung sa loob nun? maganda pa rin naman.