256 Favicons & Short Tutorial

Favicon Definition

Favicons are small icon designs used as part of a website design. Favicons are also referred to as shortcut icons, website icons, favorites icons, and bookmark icons. Generally the favicon design is derived from the logo associated with the website it is on. Take a look at 256 of Back40’s favicon designs:

256 favicon designs

Importance of a Favicon

These small icons help your users sort through their tabs and bookmarks while browsing the web. The visual identification of a favicon helps them to quickly find the right tab or bookmark they may be looking for.

favicons in bookmarks

Favicon Design File

There are many ways to create a favicon design file. Some people start with a Photoshop document at 256×256 pixels, work up the design, and then change the image size to 16×16 pixels.

My favorite way to create a favicon is to start with an original logo in Illustrator and design the favicon design right there using the clean vector file. Once you have stripped the logo down, highlighted the icon portion of the logo, or even isolated a key letter in the logo you can start the final favicon file.

Open Photoshop and create a file with these specifications:Favicon File

  • 16×16
  • RGB
  • 72 ppi

Then copy the vector work and paste using your keyboard directly into the Photoshop file. This will give you a nice, clean, and sharp favicon! If your favicon needs a shadow you may want to scale it down at least one pixel on all four sides before pasting. You can also scale the favicon down before pasting to make room for a background to fill the space around the logo.

Favicon Photoshop

Saving Favicon Design File

You will want to convert your .psd file as a .ico file. I use Photoshop ICOFormat.plugin and simply save as .ico when my design file is ready. You can easily download the plugin.

favicon .ico plugin

Favicon Development

When adding a favicon to your website, use your ftp program to upload the favicon to the public directory. Here is the bit of code you will need:

favicon code

Favicons, although very small, are an important part of your overall website design. If your website does not currently have a favicon please let us know. We are happy to improve your website design and your users’ experience!

Next
Back to Blog