alecs » favicon http://www.ylipsis.com/blog web development, SEO, technology Sat, 15 May 2010 11:51:13 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Google’s new favicon http://www.ylipsis.com/blog/2009/01/googles-new-favicon/ http://www.ylipsis.com/blog/2009/01/googles-new-favicon/#comments Fri, 09 Jan 2009 22:55:45 +0000 alecs http://www.ylipsis.com/blog/?p=130 Ever wandered what success is?

It’s when everybody blogs about you when you change your favicon.

So here are the ones I know of: google google google

Later edit: post on google blog

]]> http://www.ylipsis.com/blog/2009/01/googles-new-favicon/feed/ 0 Favicons: the why and how http://www.ylipsis.com/blog/2008/08/favicons-the-why-and-how/ http://www.ylipsis.com/blog/2008/08/favicons-the-why-and-how/#comments Thu, 21 Aug 2008 21:44:02 +0000 alecs http://www.ylipsis.com/blog/?p=5 Google.com's favicon

The favicon appears both in the address bar and in the tabs on Mozilla browsers

So why should you even bother creating your favicon?

  1. It gives you exposure. Visitors can quickly match your website with the image. Just to test this out, can you quickly match each of the following icons to their corresponding website/brand?
  2. Favicons are used in bookmarks across many browsers. Your website has the ability to stand out and create a visual impact (even through a small 16 x 16 image) in a visitor’s bookmark collection.
  3. It only takes 5 minutes to set up.

How to make one

Let’s assume you already have a company/website logo. It is a good idea to use it in your favicon as well. However, you only have 16 x 16 pixels at your disposal, so you might want to edit your logo a bit before shrinking it to the lowest size possible. For example, let’s take Adobe’s and Carlsberg’s logos:

Adobe’s logo is pretty simple in it’s form; only 3 shapes, red & white, no curves. So the resulting favicon is pretty straight forward: . Although you cannot read the “Adobe” underneath the big “A”, the goal is met.

On the other hand, a beer’s logo is often very complex. Creating a 16 x 16 image with “Carlsberg” written all over it is probably not a good idea. In this case, it is common practice to simplify the graphic while retaining colors and shapes as much as possible. Here’s what they did:

Some graphic editors may not support exporting files in .ico format. There are some desktop applications for conversions, but the quickest way to do this is using an online tool such as ConvertIcon (only converts .png to .ico and back).

Keep in mind to save the file as favicon.ico and upload it to your website root directory (it should be accessible through www.example.com/favicon.ico). In the past this was used by Internet Explorer as the default place to look for the favicon. Only one thing remains: include the following HTML tag in your pages within the <head> </head> tags.

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
]]> http://www.ylipsis.com/blog/2008/08/favicons-the-why-and-how/feed/ 0