HOW TO MAKE A FAVICON FOR FREE FULL

In my opinion, it’s easiest to just stick with the single ICO file. ICO isn’t a commonly used file format, but there are several tools that can help you out. Alternatively, you could use a combination of PNG and ICO files, but often times even Safari and Chrome will use the ICO file anyway. Next, you’ll need to combine all of your PNG images into a single ICO file. In Photoshop, you can do this using the “Save for Web” feature accessible via the File menu. Once you’re done editing your icons at each of the various sizes, save each one out to a transparent 24-bit PNG file. This used to be an issue, but almost all browsers in use today will support transparency in a favicon.

You might find that resizing the 64×64 version to these smaller sizes is enough, but often there will be more pixel-level editing involved. Keep in mind that you can include alpha transparency in these images if you’d like to do so.

16×16 – Most commonly used size by browsers like IE, Safari, Chrome, and more.

32×32 – High DPI or “retina” displays will typically use this size.

64×64 – Safari Reading List and Windows site icons.

Once I’m happy with the 64×64 version of the icon, I’ll go through the same process to create versions at 32×32, 24×24, and 16×16. This is an extremely tedious process and could take an hour or two, but it produces the best results.

Then, using the pencil tool, I’ll edit one pixel at a time until the favicon looks crisp. I usually start by resizing my larger logo down to 64×64 pixels because this is the largest favicon size that I’ll need. The blurry aliasing around the edges indicate that pixel-level editing is necessary for a sharp result.įor icon editing, I like to use a bitmap image editing program like Photoshop or Pixelmator.

HOW TO MAKE A FAVICON FOR FREE FULL

This is a portion of the full sized Facebook logo after it has been resized down to 32×32.

How to make a favicon for free