A Favicon is the little picture that shows up next to the domain name in your web browser.

WD&S Favicon

Beantown Design Favicon

Read on to find out how to create your own Favicon, and add it to your website, or WordPress Blog.

The first step is to download the Photoshop plugin to save files as the Windows ICO format. I uploaded it here for you to download. Download that, install in Photoshop and you’re good to go.

The reason creating a successful Favicon is tricky is that you are creating a piece of art that is only 16 x 16 pixels.. pretty small right? I speak from experience when I say that some thought needs to go into this process for the end result to look any good. The best technique is to create a larger image first, (say 64 x 64), and then reduce the size to 16 x 16.

save 16x16 px

If the Photoshop plugin is installed correctly, you will be able to choose ISO format when you save the file.

Save that in the main image folder of your website. Then, in the head of your XHTML page, add the following code:

That’s all you need. Although, I needed to use the direct link for the Favicon on this site, most likely because it’s set up in PHP.. so it would look like this:

You can also make animated Favicons.. this does not have full support in all browsers; but then again nothing cool ever does! I’ll cover that in another post. Check out BeantownDesign for an example of an animated Favicon. Here is a tutorial on how to create and add animated favicons to your website or blog.

Here are a couple Favicon Galleries for inspiration thanks to Smashing Magazine:

Gallery One

Gallery Two

Gallery Three

Gallery Four

A Favicon is the little picture that shows up next to the domain name in your web browser.

WD&S Favicon

Beantown Design Favicon

Read on to find out how to create your own Favicon, and add it to your website, or WordPress Blog.

The first step is to download the Photoshop plugin to save files as the Windows ICO format. I uploaded it here for you to download. Download that, install in Photoshop and you’re good to go.

The reason creating a successful Favicon is tricky is that you are creating a piece of art that is only 16 x 16 pixels.. pretty small right? I speak from experience when I say that some thought needs to go into this process for the end result to look any good. The best technique is to create a larger image first, (say 64 x 64), and then reduce the size to 16 x 16.

save 16x16 px

If the Photoshop plugin is installed correctly, you will be able to choose ISO format when you save the file.

Save that in the main image folder of your website. Then, in the head of your XHTML page, add the following code:

That’s all you need. Although, I needed to use the direct link for the Favicon on this site, most likely because it’s set up in PHP.. so it would look like this:

You can also make animated Favicons.. this does not have full support in all browsers; but then again nothing cool ever does! I’ll cover that in another post. Check out BeantownDesign for an example of an animated Favicon. Here is a tutorial on how to create and add animated favicons to your website or blog.

Here are a couple Favicon Galleries for inspiration thanks to Smashing Magazine:

Gallery One

Gallery Two

Gallery Three

Gallery Four