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!
- Visit www.converticon.com to use the favicon.ico file generator.
- Once the app has loaded, click the Get Started button to begin.
- 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.
- Select your image file (preferably a PNG file with a transparency background) and click the Open or OK button.
- Now your image file should be loaded into the app.
- Click the Export button to proceed.
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.
- 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.
- 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.