For all those who own a blog or website, should feel jealous of big website portals like Yahoo, Google and many more, displaying there logo in the browser address bar, don’t feel offended, give it a thought, “this could be your first step towards branding your own website and make your website standout in crowded favorites list in browser and address bar of your reader”, atleast I feel that way and after publishing my first post on 4th June’09, I recently added a logo image to TechZee in browser address bar…
(Can’t see that, Internet Explorer won’t always do that, just another quirk, courtesy of Microsoft. But I have the way out, discussed later.)
I am not at all a programming expert and will only be sharing my first hand experience; how I have done it on my self hosted blog on Wordpress, for rest of the blogging universe I will suggest the way out.
How to add your logo to browser address bar
- First and foremost thing for this is, you require 16×16 pixel image, saved as a Windows icon file (e.g. techzee.ico). If your image editor doesn’t support saving files in Windows icon format, you can download Irfanview, it efficiently handles all my image and image editing queries.
- Save the image as favicon.ico
- For all those blogger’s who have access to root of their website (e.g. sites on Wordpress with self hosting plan), upload the image to root of your site. For example, if your web site is www.techzee.com, your icon file should be available at http://www.techzee.com/favicon.ico
With this you are ready to observe your website logo in your browser address bar, but before this let us validate our claim.
In your address bar type in “http://www.your-website.com/favicon.ico” replace ‘www.your-website.com” with your website name as in my case http://www.techzee.com/favicon.ico, “techzee.com” replaced “your-website.com”. You can observe small logo in the top-left of the page, which means you have done your job successfully; congrats… you are on the way to build your own brand.
From now on, every time your web site is opened, your logo will be displayed along with your link in address bar of your browser. In case your site is book marked, your logo will be visible along with link in favorite list.
If you are unable to see your logo with the link in address bar on Internet Explorer don’t panic, it happens sometime.
Internet Explorer versions less than IE7 are a bit inefficient to handle favicon. However, “Internet Explorer favicon display performance is inconsistent irrespective of the version you are using”.
Click on the generic blue “e” icon in the upper left corner of Internet Explorer window, and drag it to the generic blue “e” in the address bar, see image on right. If a favicon is available for that site, it will immediately appear.
For rest of the blogging universe…
Blogger’s who use platforms other than self hosted ones or not having access to the root (e.g. blogger) will be able to upload their logo after reading Make a Favicon.
In case anyone of you is struck or want to read more on topic, you can consult
Make a Favicon and Chami’s tips on favicon.
Both of the sites have excellent material available on the topic.
I am confident with this, all of you will be able install logo for your website in browser address bar and taken your first step towards building a brand for your website.
What more you do, to build your own brand on Internet world…
Related Websites Below
- Web Design and Blogs: How Important Is a Fresh Look? One of the biggest challenges facing blog owners is keeping their site looking fresh without losing their appeal. Currently, there are thousands of free themes...
- Design Blog Improvement When it comes to blog improvement, one of the considerations that you might want to make relates to the design of your blog, as changing...
- How To Start A Money Making Business With Website – Part II ? Let's learn, how to start your own money making business with a website ? Before that, you should understand that you are going to own...
Related Posts:
- Customize Thesis theme: Add banner image to header
- Hit the target audience… personalize your twitter background page
- Image editing tools… add power to blog posts
- Customize Thesis theme: Change color of sidebar
- Simple Guide to manage online images and digital photos
Didn’t find what you’re looking for?... Google@Internet, it below
What next?...If you liked the article, bookmark it
{ 1 trackback }
{ 2 comments… read them below or add one }
Great post. Gives me what I have been looking for.
hello. thank you for this article…