Design Plus Ultra

How To Create A Favicon In Photoshop Or With Online Generators

Posted on 11. Sep, 2009 by Daniel in Resources, Tutorials

Favicons are a must have for every website today. They are displayed in the address bar of your web browser, they show up in your bookmarks and are even visible on every tab of your browser. This tutorial shows various ways of you how to create them.

What Is A Favicon?

A favicon is a tiny, little 16×16 pixel square icon that, if done well, makes the visitor recognise your website immediately after seeing it. Since it shows up in so many places in your browser, bookmarks and links, this is a great way to stand out of the crowd. You can see a favicon like a small logo for your website.

How To Create A Favicon In Photoshop

1. First of all, you need to download the right plugin to be able to save .ico-files in Photoshop. You can install the plugin by moving the .plugin-file into the Plugin folder of your Photoshop directory.
2. Once the plugin is installed and ready to go, create a new 16×16 pixel document and start painting your icon.
3. When you’re finished, save the .ico-file and name it favicon.
4. To make your favicon appear, you have to insert the following code-snippet into the head of your html-document.

<link rel="shortcut icon" type="image/x-icon" src="favicon.ico" />

If you don’t have Photoshop or just don’t have enough time to create a favicon in Photoshop, you can choose one of many online favicon generators. Here is a list of some useful online favicon generators. Some of them also have features such as animations, but I would advice you not to use animated favicons as they can be quite disturbing after some time.

List Of Online Favicon Generators

• Dagon Design Favicon Generator
  This tool converts your image to a 16×16 pixels favicon with transparency included.
• Favinator
  Another tool that converts your image to a favicon with optional text-animation.
• Icon J
  You can download existing favicons or make your own.
• Favicon.cc
  You can draw your own favicon right online with this tool.
• Web Script Lab Favicon Generator
  Another image to favicon converter.
• Favicon Generator And Gallery
  You can upload your image and download it in various sizes.
• Favicon Tool
  With this tool you can animate text for your favicon.
• Favicons From Pics
  This tool has a handy option to create a favicon directly from your twitter profile-image.
• Favicon Generator
  Upload an image and convert it to a Windows favicon.
• Graphics Guru Favicon Generator
  Choose an online image or upload one and convert it to a favicon.

Do you have problems with installing the Photoshop plugin or want to add a favicon generator to the list? Leave a reply!