The Photoshop ICO File Format, and How to Create Favicons

photoshop icoFavicons are a seemingly (and literally!) small, but significant way of promoting your brand on your website. We’re visual by nature, meaning we’re more likely to recognize that little blue bird icon for Twitter, or that red-lined envelope for Gmail, quicker than we are their names when browsing our bookmarks bar. You can create favicons yourself by making ICO files in Photoshop. A course like the QuickStart guide to Photoshop CC will teach you about favicons and lots of other things you didn’t even know Photoshop could do.

Having a unique favicon for your website will make it easier for consumers to locate your site on a busy bookmarks bar, or among a series of tabs, and also reassure them when they do make it to your page that they’re at the right place.

There’s no doubt the favicon is essential for anyone with a website. The only question is, how do you make one? Well, it starts with the Photoshop ICO file format.

What is a Favicon?

First of all, what is a favicon? Short for favorite icon, and also described as a shortcut icon, a tab icon, or a bookmark icon among other things, a favicon is a small, usually 16×16 mini logo you can use on your website. If a browser supports it, it will display the favicon in the places like the address bar, the bookmarks bar, tabs, page history, browsing data, etc.

Udemy Photoshop ICO 01

Udemy.com’s favicon is the small, green square with a capital U, as displayed above in a tab.

Favicons are saved as ICO files, a file format that saves multiple images at different sizes for scaling purposes. All icons in Windows, from desktop executables to Start Menu applications, are saved as .ico file extensions.

Creating ICO Files in Photoshop

Photoshop is a great and flexible graphics editing program for creating custom favicons. However, in order to save files under the .ico file extension in Photoshop, you have to download a separate plug-in. Luckily, this is really easy to do.

Step 1 – Install the plug-in

You can find the plug-in at a website called Telegraphics. You’re looking for the download labeled ICO (Windows Icon) Format, which is available for both Mac and Windows.

To install the plug-in, first make sure Photoshop is closed. Extract the downloaded files and place them in the Plug-Ins > File Formats sub-folder in your designated Adobe Photoshop location.

Udemy Photoshop ICO 02

Now when you open Photoshop, create a new document, click Save As, and expand the drop-down menu, the ICO file type should be an option.

Step 2 – Create your favicon in a 64×64 document

If you’re a total pro and able to work within the confines of 16×16 pixels, by all means, go for it! But if you need a little more space to work with, you can start out with a document that is 64×64 pixels, and then scale it down later.

Udemy Photoshop ICO 03

If you know how all the graphic design and editing features in Photoshop work, you should have no problem designing a basic icon. If you don’t know how any of the palette tools work, you should consider reading up on it first! Try out this Photoshop Essentials course, then come back to this tutorial once you’re a graphic design master!

Udemy Photoshop ICO 05

For our example favicon, we’ve created a simple gradient background and a single letter “A” to represent our “brand.”

Step 3 – Scale it down to 16×16

Udemy Photoshop ICO 09

Now it’s time to resize the favicon so it’s compatible with web browsers. Go to Image > Image Size in the menu at the top, or press Alt+Ctrl+I, and change the size to 16×16. Make sure that’s pixels, and not inches.

It’s also good to open up the drop-down menu where it says Resample and select the Bicubic Sharper option. This ensures the image doesn’t blur too much when it’s resized, but if it still loses too much sharpness, you can always adjust those properties with the Filter options.

Udemy Photoshop ICO 06

If done correctly, you should see your 64×64 icon transformed into a 16×16 favicon!

Udemy Photoshop ICO 07

Rounding the corners of your favicon can give it a whole new look. Depending on what kind of style you’re going for, it might be worth learning how to do.

This QuickStart guide to Photoshop CC shows how you can do it easily with Photoshop CC’s new features. For older versions, consider this Photoshop training course on mastering the basics.

Step 4 – Save your favicon as an ICO, or .ico file type

Udemy Photoshop ICO 10

This step is simple. If you installed the plug-in correctly, now it’s time to go up to File > Save As, open up the drop-down menu and select the ICO (Windows Icon) (*.ICO) option. Hit the Save button, and you should be prompted about the icon format.

Udemy Photoshop ICO 11

It’s recommended you save your file as a Standard ICO, since the PNG (Vista) format is not very compatible.

After hitting OK, you might feel confused. Why does the Photoshop application still refer to our favicon as a .psd, when we just saved it as an ICO? That’s because an ICO file is not editable in Photoshop. Just try to open it up, and see. Once you save your favicon as an ICO, that ICO file is final. If you want to make changes to it, you’ll have to continue editing the .psd file until you’re satisfied with the final product, and save it as an ICO again.

Using Your ICO File on Your Website

So you have your beautiful new favicon saved as an ICO file, but how do you actually make it show up in bookmark bars and tabs for your website?

This first rule is important to know: your ICO file should be saved (or moved to) the directory where your home page is located, usually the root folder. If you save it in a separate image directory or elsewhere, the browser will not be able to find it.

Next, make sure you have the following inserted between the <head> tag in the HTML document for your home page:

<head>
<LINK REL="icon" HREF="FaviconNameHere.ico">
</head>

FaviconNameHere should be substituted with the name of your .ico favicon file. By default, browsers will search for “favicon.ico” so it’s best to save it as such.


And you’ve done it! You’ve created a unique favicon for your website, and learned how to use it too. For more tips on web and graphic design, consider some of the following courses through Udemy: