Part 6: Wishing for an Icon
What a boring day. My brain refused to work. The truth is, I have no idea on what to do. I believe every one of us will face the same thing. It’s a norm after all. Actually, I'm in the midst of looking for comment script. Luckily, I found a magnificent one but the review will come later.
Hmm…Let’s do something interesting. Why don’t you move you eyes on the browser bar? Oh, it’s the box where you type http://www. Notice my face there? It’s called ‘favicon’ (short for favorite icon). Out of nowhere, I wish to remove the browser’s default icon and replaced it with mine. Since I run no business, thus I don’t think I need a logo after all. Perhaps what I need is something represents the whole concept of this website. :)
Anyway, to have a favicon is cool. Don’t you wish to have any? This tutorial will guide you to create a favicon in five simple steps. Consider this my gratitude to you. Okay, let’s start cooking!
Ingredients:
- A graphic editing software (preferably Adobe Photoshop)
- Some image editing skills.
(Hint: just download a free trial. Once done, uninstall it. Simple!).
Step 1:
By default, Adobe Photoshop doesn’t include ico-plugin. This plug-in is mandatory or else, how can you save your image as an icon? If you haven’t installed it, download the plug-in here, get it installed and restart your Photoshop.
Step 2:
To create a favicon, you need to save the image in 16 pixels by 16 pixels. That’s damn small! How can I start designing? Relax, don’t panic. Just create a new document sized 100 pixels by 100 pixels—call it a working template. That’s more than enough to begin with, isn’t it? Ops! Hold your ground. Before you start, keep in mind that favicon is a very small image so don’t ever think of creating this image with too many colors (ever see any?). 2-3 colors are more than enough. Choose the one that reflects your entire website theme. To get some basic ideas, you can review it here.
Step 3:
Insert your favourite image to the working template and adjust the size. Using Photoshop, click Edit>Transform>Scale. Drag the image up to your satisfaction. Once done, save it as .png in whatever folder you choose.
Step 4:
Now, open the image and choose Tools>Image Size. Resize it to 16 pixels by 16 pixels. “Save as…” the file as favicon.ico. Remember to insert the .ico extension or else, it won’t work.
Almost done...
There, you have just created your favicon. Hooray! Now it’s time to upload it. Connect to your server and upload your favicon.ico file to your website. You must place it into the root directory as your home (index) page. Leave it loose, making sure not to put it in an images directory or other folder.
Step 5:
The final step is, edit your webpage header. Copy and paste the code below between <head>and</head>:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Save the file and refresh your webpage. If it doesn’t show up, try to put a '?' at the end of the url, which will trick a browser into thinking the page is new. If for whatever reason, you do not like it just go back to the working document.
Voila! Your favicon at last. Good luck trying, folks.
Add This
| 
"I'm Assad. A commoner who designed and operate this website.