There’s more than one way to skin a cat. By skin a cat we mean create a favicon (favorite icon).
What’s a favicon? It’s the small icon you typically see next to the name of the website / page in your browser tab, and in other places within your browser (favorites, bookmarks, etc.) which helps visually identify the website at a glance.
What comes as a surprise to me is that there aren’t too many pieces of software out there for Mac users to create favicons, and even fewer that make it straight-forward and simple to include multiple sizes of the favicon within a single .ico file, which helps with designing for any and all “cross-browser” situations.
Trust me, I’ve done my share of Googling on the topic and today’s post is the most simple, cost-effective solution I could find, that performs this task well, and doesn’t cause the favicon.ico file to “bloat”, which could slow down your website performance, and thus lower your search rankings.
Which brings me to the juicy part of today’s post… How do you create a favicon.ico file using a Mac? Let me introduce you to a helpful piece of software called:
Favicon Creator
This small piece of software (0.3 MB) costs a whopping $.99 in the Mac App Store and provides a very easy-to-use, drag & drop interface to create the favicon.ico file.
As an example, I’m using a 256×256 square .png image that we wanted to use for our new blog, that weighs in at 131 KB in size.
I have this file open in Finder and will simply drag & drop it into the box labeled, Drop Image Here or Select an Image, seen within the Favicon Creator app.
Immediately, my image appears in the box and I can move on to selecting the sizes I want.
Ideally, the favicon.ico file would serve up all of the sizes different browsers would need, but that would indeed cause the file to bloat in size and effectively slow down site load times, which we don’t want to do. Instead, I’ll just check the 16×16 and 32×32 options.
Knowing that my image is already square, I don’t need to worry about choosing anything from the Layout drop-down, but if you do end up using a non-square image, the “Aspect Fit”, “Aspect Fill” and “Scale to Fill” options may be of help to you.
Also, the Round corner check box will allow you to create some round corners, but I didn’t like the grey edges it created with our image, so I left this un-checked for our example here.
Finally, I’ll simply click Save Icon, keeping the suggested filename of favicon.ico, and select the location on my computer to save the new file.
That’s it — voila! I now have a favicon.ico file, which contains both the 16×16 and 32×32 pixel icon sizes, which weighs in at only 5 KB in size! That’s super-small, in case you’re wondering, and will not slow down your site load time as much as a hefty icon would.
Conclusion
All-in-all, this software is inexpensive, lightweight and really does a great job at creating small, fantastic-looking favicons. I would recommend this software in a heartbeat to any Mac user looking to perform the task of creating a favicon.
