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.
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
- Visit www.converticon.com to use the favicon.ico file generator.
Step 2
- Once the app has loaded, click the Get Started button to begin.
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.
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.
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.
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.
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.
