You are here

The Definitive Way To Create A Favicon

Creating a favicon is easy and hard at the same time. It's easy because you can always shrink an existing image into 16x16 and give it a .ico extension. It's hard because if you did what I just said, it won't show up on Internet Explorer no matter what you do. Wanna find out how I solved this problem? Read on and follow the 10 idiotproof steps to the definitive way of creating a favicon:

1) Create the initial image that will eventually become the favicon using your favorite graphics program (such as Adobe Photoshop). It should be square & decent in size.

2) Shrink the image to 16x16 & name it "favicon.png". In Windows 7, you can easily do this using Paint.

3) Download png2ico. Don't worry, it's free. Using this program is ABSO-FUCKING-LUTELY critical. No other programs & websites claiming to correctly convert images into favicons worked for me.

4) Extract it to C:/. There should now be a "png2ico" folder in your C drive.

5) Move the image you just created into this folder.

6) Open up the command line. In Windows 7, just click the Start button at the bottom left of your screen and type "cmd" in the search box where it says "Search programs and files" (the cursor should already be blinking in there).

7) Type "cd png2ico".

8) Type "png2ico.exe favicon.ico --colors 16 favicon.png" (those are 2 dashes in front of the word "colors"). You can leave out the "--colors 16" part, but the resulting file's size will be bigger (which you don't want).

9) Go back to the "png2ico" folder in your C drive and find the newly created "favicon.ico" file.

10) Upload the file to your website and link to it correctly. The basic HTML code for this is something like:

<link rel="shortcut icon" type="image/ico" href="favicon.ico" />

That's it!

P.S. You can see proof of a working version of a favicon by using Internet Explorer to go to my startup website, Mediography.by. It was built in Drupal 7, where custom favicons don't work on IE no matter what unless you follow my instructions verbatim. This blog post was written to solve this issue once and for all (but should of course work for all favicons, period). So for step #10 in Drupal 7, you have to go to Appearance -> Settings -> Theme (such as Bartik) and then scroll down to SHORTCUT ICON SETTINGS to upload the favicon and link to it.

You are here