How to Create an Icon for your Site
Wednesday, 22 April 2009Ever browse through your favourites/bookmarks in Internet Explorer or Firefox and notice the multitude of icons next to the links peeping at you? Watching your every move? Ready to pounce… and kill?
Notice the icons that appear next to your address bar (for you noobs, it’s where the http:// thing is, near the top of the screen)? Notice how they’re also waiting to pounce… and kill?
Well I noticed, and I decided that The Republic of Awesome needs one to pounce and kill as well!
Thus, here’s a quick tutorial on how to iconize your site!
Tutorial for Make Benefit Website Icons
What you need:
- Image editor (MS Paint if you’re poor)
- Website
- Internet connection
First, fire up your Photoshop (or other editor) and open the image you want to use as your icon.
The Republic of Awesome’s national plant, Cannabis Sativa
Puny-nize the image by resizing it to 16×16 or 32×32 - both will work.
Save the image.
Next you have to convert the image into a .ico file. There are a few ways to do this:
- Use Irfanviewer (or other software of your choice) to convert a .png file into a .ico file
- Download one of many Photoshop plugins to allow saving into .ico format
- Use my way which doesn’t need softwares
My way is to use an online .ico converter. I’m just way too lazy to go through all the trouble of searching online and pirating some software or Photoshop plugin.
This is the site I used: Real World Graphics
By default this site saves the file as favicon.ico.
This is because website icons are known as favicons. The etymology of this is….
FAVourite ICOns
…derived from IE’s Favourites (Bookmarks for us Mozilla users). I know, it’s fucking lame.
The lame ass who came up with the name.
After you have your .ico file ready, upload it to the interwebs! It doesn’t really matter where you upload it to, but I believe you’d have less trouble if it’s in the main folder of your site. (Eg: http://republicofawesome.com/)
Next you have to code your site to recognise the icon. Here’s how to do it for a Wordpress based site:
Adding Favicons to a Wordpress Site
All you have to do is to add the following piece of code:
<link rel=”shortcut icon” href=”http://[yoursiteURL]/favicon.ico”>
(Don’t forget to replace [yoursiteURL] with your own url. Please, too much stupidity is only harmful.)
The <link> function is usually squeezed between the <head> tags of your site’s html.
For Wordpress, go to your admin control panel. Under Appearance>Editor, you have the following choices:
- Add the code to index.php
- Add the code to header.php
Most guides I read online say to stash the code in index.php.
However, me being the wise-ass that I am decided to tell them to fuck off and I stuck it where the sun don’t shine - in header.php.
I prefer header.php since it’s where all the other <link> functions are, thus it’s a little more organised. It’s your personal choice where to stick it though.
When you’re done, close your browser and restart it. You should now have the icon in your address bar and in your bookmarks/favourites if you’ve saved your site’s link.
Adding Favicons to any Other Self-Hosted Site
Same as above. However your site might not have header.php so just code it into your main page.
The main page is by convention named either ‘default’ or ‘index’ and can be .php, .html, or .cgi. Go find it yourself. I’m not your fucking nanny.
Adding Favicons to Blogger or Other Hosted Sites
Generally you’re forced to use the host’s default icon. With Livejournal it’s that pencil thing. Blogspot users have that fugly Orange ‘B’.
‘B’ is for ‘Bollocks’ or ‘Berapa’ as in ‘Satu kali BERAPA??’
Apparently it was possible to use favicons on older versions of Blogger. The newest however does not allow you to use favicons. Or so I read.
You can try anyway:
Go to the Blogger admin control panel and edit your blog’s appearance. Under ‘Layout’ go to ‘Edit HTML’. Paste the above code between you <head> tags.
Edit: I tried this with a Blogger account. It don’t work, sorry. The motherfucker just deletes the code after you save it.
Using Animated Icons
You can use an animated icon instead. All you need is a .gif animator. Here’s how:
- Create an animated .gif or steal one
- Upload it onto the internet
- Paste this code instead:
<link rel=”shortcut icon” href=”http://[yoursiteURL]/image.gif” type=”image/gif”>
That just about covers everything you need to know about iconing your website. I hope this was useful to you.
ooohh, seriously? i wanna try also!! haha.. but after exams
and i just realised sth.. why does your blog header there say 23% of the world output or sth.. why 23%? random figure?
23% cos It’s a prime number. HAHA.
Your blog is Blogger, so I don’t think it’ll work…
but so is 7 and 11 and so many more…
darn blogger
Hahaha,
Still no free time la bro to create my own .ico
awsummmmmmm *smokes weed*
hey cool! now i gotta look for fish icon
hey, i’ve done all the part, now the final problem is that, i can see my blog icon in mozilla firefox but not in internet explorer, now my IE version is 8… Can reply me in my blog chatbox? Thanks Yea ^^ Hugz Reply me ASAP
Oh yea, forget to mention that i cant see ur blog icon neither in internet….. but i can view urs in mozilla…