|
|
How To Create Your Favicon
Recently I noticed that my favicon on the address box and browser tab (in FireFox) is missing. It was replaced by an empty blank square. Neither were the Blogger's Favicon visible 
Here's the part I'm going to tell you a little bit of 'History Lesson'. Nah! You're wrong! It's not a fairy tale, but it began just like one. Okay, here goes:
One upon a time not too long ago when I started my hands on blogging, I've read somewhere about the importance of a favicon. So, I created my own favicon using one of the many favicon creators, My Favatar, which I think exist no more. Thus this post. A ha, by now I'm sure your next question will be, What Is A "Favicon" - And What Use Is It? So please, allow me to explain;
A "favicon" (pronounced “fav-eye-con”) short for "favourites icon" is a tiny image which is displayed in various parts of a web browser. It replaces the default image which a browser displays in the address bar, in the favourites list, on the link bar and so on. In my case as you can see above on your browser tab, it look like this:
Yeah yeah, I know. He's cute, lol!
The use of a "favicon" means that you can change this image to anything you want - and this means that your site should stand out from the others in different parts of the browser:
You should know, however, that this can be a bit hit-and-miss and sometimes, even though you have set everything up correctly the favicon may not be displayed especially on Internet Explorer due to some unexplainable bug.
Creating A Favicon
A favicon is an image file of the type ".ico", and it always has the file name "favicon.ico". It is a special type of graphic and not many graphics programs can create .ico files. "The Gimp" is an exception, and you can download this free (but rather quirky) graphics package from The Gimp.
Personally I used my favourite Photo Editor, ACDSee. Even though ACDSee cannot create .ico files, but it still can save the image on My Picture's folder.
As already stated, there are many online favicon creator services on the WWW. You can googled it to find out the many favicon creator services. But as it is, I preferred to create my own .ico image after the collapsed of My Favatar.
To create a favicon image, I used this image. It doesn't matter what size it is, as long as it's square. Once I opened it on my favourite Photo Editor I resized it to 16 x 16 pixels.
You can use most graphics formats. I used a GIF (.gif) for this favicon.
After resizing the image above (you know, the handsomest one!) to 16 x 16 pixel, I saved it in My Picture's folder. Then I went to Ripway, my favourite web hosting and file sharing service. For me, this is the best service to host your images. For a free account you will be allocated 30MB of storage space, and 150 MB of daily downloads. Head over there now and open up a free account. Just tell them, ArahMan7 sent you and I'm sure they gonna treat you well, ;-)
After uploading your favicon's image with Ripway, copy the direct link URL for the favicon's image to your clipboard. Mine will be like this: http://h1.ripway.com/ArahMan7/ArahMan7.ico
Below is the code for your favicon. For Blog*Spot user, after login --> Dashboard --> Page Elements --> Edit HTML. Paste the code into your template between your <head> </head> tag. Preferably at the top.
<!-- My Favatar -->
<link href="http://h1.ripway.com/ArahMan7/ArahMan7.ico" rel="shortcut icon" type="image/x-icon">
<link href="http://h1.ripway.com/ArahMan7/ArahMan7Ico.gif" rel="icon" type="image/gif">
<!-- end My Favatar -->
Troubleshooting Shortcut Icons
If your favicon doesn’t show up after the above steps, try the following:
If your favicon still doesn’t show up after the above troubleshooting steps, it may be because your web browser is using some internal caching and the favicon has not been refreshed. To check if your favicon is really there:
Below is a guidebook for Republican brought to you by The News Room. Enjoy!
Here's the part I'm going to tell you a little bit of 'History Lesson'. Nah! You're wrong! It's not a fairy tale, but it began just like one. Okay, here goes:
One upon a time not too long ago when I started my hands on blogging, I've read somewhere about the importance of a favicon. So, I created my own favicon using one of the many favicon creators, My Favatar, which I think exist no more. Thus this post. A ha, by now I'm sure your next question will be, What Is A "Favicon" - And What Use Is It? So please, allow me to explain;
A "favicon" (pronounced “fav-eye-con”) short for "favourites icon" is a tiny image which is displayed in various parts of a web browser. It replaces the default image which a browser displays in the address bar, in the favourites list, on the link bar and so on. In my case as you can see above on your browser tab, it look like this:
Yeah yeah, I know. He's cute, lol!The use of a "favicon" means that you can change this image to anything you want - and this means that your site should stand out from the others in different parts of the browser:
You should know, however, that this can be a bit hit-and-miss and sometimes, even though you have set everything up correctly the favicon may not be displayed especially on Internet Explorer due to some unexplainable bug.
Creating A Favicon
A favicon is an image file of the type ".ico", and it always has the file name "favicon.ico". It is a special type of graphic and not many graphics programs can create .ico files. "The Gimp" is an exception, and you can download this free (but rather quirky) graphics package from The Gimp.
Personally I used my favourite Photo Editor, ACDSee. Even though ACDSee cannot create .ico files, but it still can save the image on My Picture's folder.
As already stated, there are many online favicon creator services on the WWW. You can googled it to find out the many favicon creator services. But as it is, I preferred to create my own .ico image after the collapsed of My Favatar.
To create a favicon image, I used this image. It doesn't matter what size it is, as long as it's square. Once I opened it on my favourite Photo Editor I resized it to 16 x 16 pixels.
You can use most graphics formats. I used a GIF (.gif) for this favicon.
After resizing the image above (you know, the handsomest one!) to 16 x 16 pixel, I saved it in My Picture's folder. Then I went to Ripway, my favourite web hosting and file sharing service. For me, this is the best service to host your images. For a free account you will be allocated 30MB of storage space, and 150 MB of daily downloads. Head over there now and open up a free account. Just tell them, ArahMan7 sent you and I'm sure they gonna treat you well, ;-)
After uploading your favicon's image with Ripway, copy the direct link URL for the favicon's image to your clipboard. Mine will be like this: http://h1.ripway.com/ArahMan7/ArahMan7.ico
Below is the code for your favicon. For Blog*Spot user, after login --> Dashboard --> Page Elements --> Edit HTML. Paste the code into your template between your <head> </head> tag. Preferably at the top.
<!-- My Favatar -->
<link href="http://h1.ripway.com/ArahMan7/ArahMan7.ico" rel="shortcut icon" type="image/x-icon">
<link href="http://h1.ripway.com/ArahMan7/ArahMan7Ico.gif" rel="icon" type="image/gif">
<!-- end My Favatar -->
Troubleshooting Shortcut Icons
If your favicon doesn’t show up after the above steps, try the following:
- Check that your favicon has been uploaded to your correct blog.
- Check that your favicon exists by typing in the path of the favicon in your browser like http://h1.ripway.com/ArahMan7/ArahMan7.ico
- Check the link tag on the homepage refers to the correct path.
If your favicon still doesn’t show up after the above troubleshooting steps, it may be because your web browser is using some internal caching and the favicon has not been refreshed. To check if your favicon is really there:
- Wait a day or so then check your web site again, your web browser should have refreshed its cache by then.
- Try viewing your web site using another browser.
- Use Internet Explorer and bookmark your web site, the favicon should appear on the next reload of your web site in Internet Explorer.
Below is a guidebook for Republican brought to you by The News Room. Enjoy!
Tags:
Back To Top
Subscribe in a reader
Subscribe via email
1 Response to "
My Favicon
"Wish internet explorer didnt wait till after the page loaded to show the icon.
Hopefully the newer upcoming browsers will still show fav icons without needing to modify code again.
Post a Comment
I loves to receive comments from everybody and I tried to make everything easier for my readers to comments. So please, be nice even though you totally disagree with me. No comment moderation and whatnot here. So, please respect the privileges given.
God's willing, all comments will be followed and replied.
p/s Please leave your URL so that I can follow it and leave comments on yours. No URL = No Comments. It is as simple as that. Thank you in advance.
~ ArahMan7