So what is a favicon? Firstly, favicon is short for “favourite icon”. It’s essentially a shortcut/bookmark icon file (i.e. .ico file) that contains one or a series of certain sized icon files (e.g. 16×16 pixels, 32×32 pixels, etc). And typically when someone creates a favicon file, the filename they assign it is simply, “favicon.ico”… makes sense, right?!

A favicon.ico file can have a few purposes depending on where and what it’s being used for you. They can be used for app/shortcut icons on your computer, smart phone app icons and website icons. Personally I used them more so in my website creations, for the little icon that you would see in the URL address bar and/or browser tab.

Create a favicon - Example of favicon in browser tab (Google Chrome)

Example of favicon in browser tab (Google Chrome)

Well I found a free online favicon.ico generator that I use for all my projects. The only “issue” with the generator is that it’s a Flash web application, so you’ll need to use a PC or Mac with a Flash-supported web browser installed in order to use the app.

The app is so easy to use – and I’d like to show you just how easy – so I’ve put together a quick tutorial on how to use it when creating a favicon file of your very own!

Create a favicon.ico file with Converticon Generator

The favicon maker is called ConvertIcon, created by Punk Labs. It lets you convert any image file format (but it’s best if you use a PNG file with a transparent background) into a lossless ICO file, all within your web browser without downloading any software. Let me show you how!

Step 1

Step 2

  • Once the app has loaded, click the Get Started button to begin.

Create a favicon - ConvertIcon! - Step 2 - Welcome screen (Get Started)

Step 3

  • A “browse” popup window should appear, where you’ll need to navigate to the image file that you’d like to use to create your favicon file.

Create a favicon - ConvertIcon! - Step 3 - Browse for image file to upload

Since I’m a fan of The Hulk, I decided to use this cool piece of Hulk-artwork by BoxOfOddities on DeviantArt, and all I did was create a mask around his head and made the background of the PNG file transparent.

Step 4

  • Select your image file (preferably a PNG file with a transparency background) and click the Open or OK button.

Step 5

  • Now your image file should be loaded into the app.
  • Click the Export button to proceed.

Create a favicon - ConvertIcon! - Step 5 - App with PNG image ready to Export

Step 6

On the next screen, you should see two (2) tabs at the top of the app, i.e. ICO and PNG. Because I chose to upload a PNG file to create my ICO file, the ICO tab has been selected by default – and there is nothing to see in the PNG tab.

  • By default, the “Original Size” option under the Included Sizes section should be selected – but if this was a huge file size (like mine was) you may want to deselect it (which I’d recommend anyway).
  • Select the icon size(s) you’d like the app to create and save within the ICO file for you.
  • Click the Save As button to proceed.

Create a favicon - ConvertIcon! - Step 6 - Select sizes to include in ICO file

Step 7

  • The “browse” popup window should appear again, and now, all you need to do is navigate to where you want to save the ICO file, and click the Save button.

Create a favicon - ConvertIcon! - Step 7 - Save final ICO file

Step 8

  • The “browse” popup window should close and your ICO file should be saved – and that’s it!

Now when you implement the ICO file, like into a website as its favicon, you should see it in the URL address bar and/or browser tab.

Your thoughts? Or do you know another way to create a favicon.ico file?

If you have any questions or feedback regarding this article, feel free to leave a comment below. Perhaps there’s another free online icon generator you’d like to share that you’ve used to create a favicon.

Related Posts

7 Web Design Inspirations & Development Resources If you're a visual artist, cartoonist, graphic designer, web designer or any other form of "old school" or digital artist, we all have one definite thing in common - we are all creative - regardless o...
How to Disable Adobe InDesign Background Tasks Around the time of writing this, I upgraded from Adobe CS4 Design Premium and purchased Adobe CS5.5 Master Collection. It was an exciting time! However, when I started working on a print job, I notice...
Do NOT follow this link or you will be banned from the site!
Here's My Newsletter!

Here's My Newsletter!

Subscribe to be the first to receive WordPress & WooCommerce tips(I may occasionally email you other goodies too!)

Thanks! You have successfully subscribed!

Pin It on Pinterest