Expedia.ca Favicon

Yesterday I talked about how Hotels.com did not even bother trying to create a favicon for their website, which is a real shame. While I was doing research for hotels for my holiday I also spent time on Expedia.ca. They have a nice site and they have a great little favicon for their site. I can always find their site fast in my bookmarks because of that little airplane favicon.

Expedia.ca favicon

That is a great favicon that matches their logo and branding on their website and t makes it easy for me to find their bookmark when I am looking for them. Good job Expedia.ca on an easy to recognize favicon!

Hotels.com Needs a Favicon

You might have noticed there have been no posts for a week or so. I was on a well deserved holiday. I had someone checking in on the site here but I did not get around to writing any posts to publish while I was away. Life just got to busy with holiday plans and booking hotels and packing. you know how it is I am sure. In making my travel plans I spent a lot of time using my favorite site for doing research on hotels, aptly named hotels.com.

They recently did some work to their website and changed their logo and some of the colors. The site looks good but I was surprised that they have not taken the time to create a favicon. You would think that someone in their branding department would have thought of that little detail. Apparently not. I like the new logo and they have a great little icon around the “o” that looks to me like an elevator button. I thought it would make a great little favicon for their website.

Here is what I thought they could use as their favicon. It draws on their great new logo and fits the new design they have created for their site. Another idea I had was to use just the “h” with the background color but I never did anything with that idea.

What do you think? Do you think Hotels.com could use a favicon on their website?

Favicon Inspiration

I was going to post a tutorial today about how to add your own favicon to a WordPress.com blog, but I was not quite done it when I saw this great post over at Smashing Magazine today. Favicon Episode 7 highlights some great examples of favicons that you can find on the Internet. If you are looking for some inspiration for your favicon you will certainly find some there to help you create your own for your website or blog. Of course once you design your favicon in your favorite graphic editor you can come here to Free Favicon to generate the ico file (hint hint). Don’t forget to check out some of the other posts they have on favicons as well. They have lots to inspire you!

Mozilla.com Favicon

With the historic launch of Firefox 3 this week and a huge response to their download day I thought it was only appropriate to take a look at the great favicon of the home of Firefox, Mozilla.com.

The Mozilla.com favicon is a godzilla like creature, which does not seem to make a lot of sense, you would think it would be the Firefox logo or Thunderbird logo. If you read some of the history about how Mozilla.com got started and about the mascot the favicon makes perfect sense.

What I like best about the Mozilla.com favicon is how crisp and clear it is. It is easy to recognize as a godzilla type of creature. Hard to do in only a 16×16 space.

Hats off to Mozilla.com for a great favicon and congratulations on the success of the Firefox 3 download day! I know I have been enjoying Firefox 3!

How to Add Your Favicon to Blogger

Update: Blogger has improved and these instructions are no longer needed.

** Please see our new post on how to add your favicon to Blogger blogs. **

Blogger.com is one of the most popular blogging platforms on the Internet, yet if you have a blog with them you are often stuck with the default Blogger.com favicon. Hard to brand your blog with your own personal touch when you have the Blogger.com favicon on the address bar. If people bookmark your blog they won’t see your favicon and might quickly forget about your website. There is no reason why you can’t change the favicon on your Blogger.com blog to one of your own design. You just need to follow these easy steps and soon your Blogger.com blog will sport your great new custom made favicon.

  1. First thing you need to do is create your own custom made favicon. In this case you do not have to use an image to favicon generator, but your image should be either a .gif or a .png. In you example we are going to use a .png file. If you are not sure what kind of image to use browse through some of the free favicons that we offer, perhaps there will be one there that you would like to use. If you do decide to use one of the many favicons we have to offer don’t click “Download this favicon” because that will give you a file in the Windows .ico format. Instead right click on the image of the and choose “Save Picture As”.
  2. After you have the image you would like to use as your favicon, goto your Blogger.com blog and create a new post. It does not matter what you call it since you don’t need to publish it. Once you have created a new post use the image upload button to upload your favicon to your Blogger.com blog.

    Once you have uploaded the image, you will need to switch to “Edit HTML” mode if you are using the “Compose” mode. Once you are looking at the HTML you will see something like this:
    <img src="http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png" alt="" id="BLOGGER_PHOTO_ID_5212704798569567682" border="0" />. You need to highlight and copy the part in quotes right after src. In this case it would be: http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png. You should paste it into Notepad or another text editor. You don’t want to lose this and you will be closing the Blogger.com editing window next.
  3. Once you have the location of the image you uploaded copied, you can click on the Layout tab of your Blogger.com blog. Once you are at the Layout, you need to click “Edit HTML” Look in the HTML for a tag that says <head> </head> and right below above it paste: <link href=” rel=’shortcut icon’/>
    <link href=” rel=’icon’ type=’image/png’/>
    Once you have those lines pasted into the template, copy the src of the image you want to use as you favicon that you uploaded earlier and paste it into the two lines you just added where the href=” is. In our case it looks like this: <link href='http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png' rel='shortcut icon'/>
    <link href='http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png' rel='icon' type='image/png'/>

    Click save template and your Blogger.com should now have your fancy new custom favicon showing on the address bar when you visit your blog.

If you want to see how we did it take a look at our Blogger.com Free Favicon blog where we added our great favicon.

You can use other free hosting services to host your custom favicon, but you don’t want to use an image hosting service that deletes images after so many days. Using Blogger.com to host the images works well, but you could also use Google Page Creator, or even your Flickr account.

Have fun adding your custom favicon to your Blogger.com blog!

Update: It appears that Internet Explorer is being difficult and might need you to use a .ico file. Check this post for more information. Blogger.com Favicon’s in Internet Explorer