How to Make Favicons with Visual Studio

I don’t have any fancy program to generate an icon. Since I always forget how to do this, here are simple instructions:

Open the logo in Photoshop and flatten it to one layer on a transparent background. Duplicate it and resize to 16×16 pixels. Open a new instance of Visual Studio and click New File. Select Icon and it will open a pane with two versions. The first version is 16×16, and will appear in browsers. There is also a 32×32 version, which I always do just in case someone adds a link to their desktop.

Set up the image type in Visual Studio. The default image type is 4 bit, and you want 24 bit. Press Insert on your keyboard and select “16×16, 24 bit” then delete the 4 bit image type.

Go to Photoshop and copy the entire canvas to the clipboard. Return to Visual Studio and CTRL+A, Delete, CTRL+V. Switch to the 32px version and the thumbnail for the 16px version should update.

Back in Photoshop, close the 16px version and resize the original to 32px. Copy it into Visual Studio the same way as above. Save as favicon.ico, and upload it.

The HTML code I use is as follows:

<link rel="SHORTCUT ICON" type="image/x-icon" href="/favicon.ico" />