How to Generate a Favicon
Our independent research projects and impartial reviews are funded in part by affiliate commissions, at no extra cost to our readers. Learn more
If you’re anything like us, you rarely have fewer than ten (okay, 20) tabs open at a time. But when there’s so much on the go – so much to look at, and so many sites competing for the same browser real estate – it gets hard to navigate between them.
That’s where the favicon comes in. If you’ve never heard the term before, you’ll almost certainly be familiar with the thing it stands for – that small icon that pops up on a tab, in your history, or in your bookmarks bar.
But favicons aren’t just important for us internet users. They’re also vital for helping your business stand out – for building your brand online, and showing it off to the world. Plus, favicons look good – and are ideal for adding an extra touch of credibility and professionalism to your business’ online presence.
So what is a favicon, exactly – and why should your business get one? Moreover, how can you generate one – and where?
Let’s find out.
What Is a Favicon?
A favicon (also known as a shortcut icon, tab icon, website icon, URL icon, or bookmark icon) is a small image – usually 16 x 16 pixels in size – that represents a website in a browser. This could be on a tab, in the bookmarks list, in internet history results, or in the search bar.
Typically, a favicon is a site’s logo (or a smaller version of its logo), but it can really be anything – as long as it’s on-brand, and helps the user identify the site at a glance.
For a quick demonstration, cast your eye up to the top of your own screen, and the tabs you have open right now. What images do you see there?
Here’s mine. At the far left is the immediately recognizable Gmail logo, then the blue page of Google Docs. Moving across, you have our WBE logo (tada!), plus the lion’s head of the Premier League (because I need to keep tabs on the soccer scores while I’m writing!).
Favicons are also useful when flicking through your bookmarks bar:
As you can see, favicons make it easy to immediately pick out the tab you need from the rest.
When a site doesn’t have a favicon – as is the case with my beloved pulled pork recipe above – your browser will usually generate a generic globe image to fill the space. And, as you can see, it’s not helpful for the user trying to navigate to the right place – nor does it do the site’s awareness or brand recognition any favors.
Why Is a Favicon Important for My Online Business?
Favicons aren’t simply a “nice-to-have”, only to be considered when the rest of your website is up and running. Nope – they’re a must-have.
Every time a user bookmarks your site, a favicon’s there. Every time they access your website, a favicon’s there. And every time they scroll through their internet history, your favicon will be there – if, that is, you have one.
A good favicon:
- Increases awareness of your brand and levels of brand recognition
- Helps drive repeat visits and brand loyalty
- Gives your website a more credible, trustworthy, and professional sheen
- Offers indirect SEO (search engine optimization) benefits by increasing site usability and experience
How to Generate a Favicon Icon
- #1. Use Your Existing Logo – Or Create a New Image Jump to section
- #2. Convert the Image Jump to section
- #3. Upload Your New Favicon to Your Website Jump to section
So, now you know what a favicon is, and why they’re important. But how do you equip your site with one, exactly?
#1. Use Your Existing Logo – Or Create a New Image
Well, you’ll need to start with an image that represents your brand. It should be easy to remember, sport your business’ colors and unique “look and feel”, and be simple to spot in a crowded toolbar. For all these reasons and more, your logo – or at least an abbreviated form of it – is a great place to start.
Once you have this image – you can use a photo editor such as Photoshop or Canva to get it right – you’ll need to save it (.png or .jpg formats work best), ideally as 64 x 64 px. This will make it easier to edit, and you can scale it down to ideal favicon size (16 x 16 px) later.
#2. Convert the Image
With your image ready, you’ll then need to convert it to favicon.ico, which is the format most web browsers recommend for favicons. You can do this for free with an online favicon generator, of which there are plenty available – we’ll run through our top five below to help you pick.
#3. Upload Your New Favicon to Your Website
Next, you’ll have to upload your favicon (in .ico format) to your site’s root directory, to ensure that browsers can locate your favicon file, and display the image accordingly.
You can also edit your site’s HTML code directly, by adding the following piece of code to your header.
<link rel=”icon” type=”image/x-icon” href=”http://example.com/favicon.ico” />
You shouldn’t need to do this last bit – most browsers these days will be able to locate your favicon without it – but it’ll ensure that older browsers can also keep up.
Online Favicon Generator: The Top 5
- #1. Favicon.io Jump to section
- #2. RealFaviconGenerator.net Jump to section
- #3. Favicon-generator.org Jump to section
- #4. Favic-o-Matic Jump to section
- #5. Favicon.cc Jump to section
Online favicon generators allow you to upload an image and turn it into a favicon. Better still, some of these tools act as both an image editor and favicon generator – meaning you can design your logo, then turn it into a good-looking favicon.
Here are our top five.
Offering a slick, seamless UX (user experience) alongside its free favicon generation, Favicon.io is a top choice for simple, speedy results. You can generate a favicon from an existing image, make one from scratch, or choose from hundreds of emojis to give your favicon a more personal feel.
RealFaviconGenerator.net allows you to upload an existing image, or hit the “Demo with a random image” button for a quick, effective demonstration. Handily, you can also use its “Check your favicon” feature to view what your site’s existing favicon looks like, and identify any room for improvement.
With a basic style and ads cluttering its interface, Favicon-generator.org has slightly more of a “rough and ready” feel than the first two tools we’ve mentioned already. But that doesn’t make it any less efficient – you can generate favicons for web, Android, Microsoft, and iOS, and even maintain the image’s original dimensions.
There’s also some useful info at the bottom of Favicon-generator.org’s main page around favicons (though, since you’re already reading this article, we don’t think you’ll need it!).
The hipster’s choice, Favic-o-Matic sports a quirky, clever design, with catchy copy and slogans adding a touch of fun. It’s straightforward to use, but not lacking in functionality: its “advanced settings” allows you to alter image size, background color, and RSS feed URL. It does the job quickly, too – although the incessant display ads can get a little irritating!
Favicon.cc may look like an early 90s reincarnation of MS Paint, but don’t be fooled by its stripped-back visage. It boasts all the functionality you’ll need to create your favicon, then export it correctly. You can even view the latest – and highest-rated – favicons to get inspired, and preview your own favicon before you download it.
Generating a Favicon: Final Thoughts
Make them well, and favicons can look awesome. They help users identify your brand, navigate to your site, and bookmark it for future use. And they’re a simple, effective way of developing – and sharing – your business’ unique brand identity, while encouraging loyalty and returning traffic.
For more info about building a website, as well as the best website builders for SEO (Search Engine Optimization) check out the range of guides on our site. We cover hosting, email marketing, and more – so we’re the perfect partner on your website creation journey.
These tools are free, and tend to be easy to use, too. Go check them out!
Leave a comment