How to create multi-resolution favicons in Photoshop

When it comes to finishing off a web project, you can easily forget (or can’t be bothered) to create this little icon which is visible in most modern browsers’ tabs.
I mentioned “or can’t be bothered” because although it’s not very hard to create a single favicon using tools like DynamicDrive to create a simple favicon for you, it can become a bit trickier to create a multi-resolution (or multi-layered) favicon that will be suitable for browsers, desktops, smartphones, and other devices with higher resolutions…

Since I use Photoshop in work to produce most of my website mock-ups, that’s what I’m going to use to create my multi-resolution favicons. So…

How to create multi-resolution favicons in Photoshop (CS6 in this case)

First of all have an idea of what your favicon is going to be. It’s most likely going to be the whole or part of your logo and/or branding.

Then decide if you would like your favicon to have transparent background or not. In most cases, favicons on alpha-transparent background look best, so let’s create one based on that.

Create a new document in Photoshop CS6 (or other suites), 256px by 256px, transparent background.

Create your design or copy and paste your logo so it fits within the 256px square. Ideally, you would import an .ai or .eps file and insert it as smart object to scale it up or down without quality loss.

If you want a transparent background, make sure your logo doesn’t sit on any coloured background.

Saving your custom favicon

Go to File>Save for Web and select PNG-24 which allows the rendering of the alpha-channel operating the transparency. Make sure you tick the option “Transparency”.

Save the file as  favicon.png file on your desktop or in a folder that you can easily remember (like the root folder of your project for instance).

Where are the different layers?

If you want your favicon in multiples sizes and resolutions, you cannot simply create various sizes such as favicon16x16.ico, favicon32x32.ico etc…

In order for a favicon to work properly, it needs to be a single file named favicon.ico. No other name extensions or variations…

So how do you create multi-resolution favicons then?

Now you’ve got your favicon.png (256px x 256px) ready, go to this website which is a handy multi-resolution favicon online generator.

Upload your favicon.png using the form. A window will pop-down, select custom dimensions and a list of the different sizes available will appear. And the biggest available is 256px x 256px… How weird is that eh? 🙂

Select the sizes you would like to create (the more you select, the bigger the file, the longer it takes to load)… then hit the “Convert Now!” button which is above the selection system.

Now, simply decide where you want to save your multi-resolution favicon…

For it to appear on your website’s tab, remember to upload it to the root of your project. If you already had a favicon in place, it can take a few days to be updated with the new one because of browser caching issues…


That’s it. Hope this helped! If you find any error and would like more info, drop us a comment below, thanks…

IT Support Newcastle is brought to you by Transcendit Ltd, contact us on 0191 482 0444