Web Terminology: The Favicon and Why It’s Important

All About Favicons

Last updated on

If you don’t know what a favicon is, don’t worry, you’re not alone! However, chances are you’ve at least seen them while browsing around the internet.

A little history …

Believe it or not, the internet was devoid of favicons until the spring of 1999, when Microsoft released Internet Explorer 5 – the first web browser to support them and incorporate them into its bookmarks feature. By the end of the year, the World Wide Web Consortium (W3C), an international standards organization for the World Wide Web, standardized the favicon, which basically led to its widespread use.

Since that time, a lot has evolved on the web, including the use of the favicon, mostly due to different devices, such as mobile phones also making use of them, but with slight modifications to the original code to display them as well as expanded use of image file types, such as png.

Other names you might have heard …

While favicon is the technical name, these little icons are also referred to as:

How favicons are currently used …

The most old school and basic way to use a favicon is on your website for a web browser to show in their bookmarks. They also show on web browser tabs. Here’s an example:
browser tab favicon

This same file type is also used and shown in a browser’s URL bar while you’re visiting a site, like this example:
browser bar favicon

If a website has a favicon and you visit that site, it could also show on your browser’s recently visited feature or history, like this:
google favicons

Another important place that a website’s favicon will show is in Google search results…
mobile favicon

So as you can see, while small, the favicon is a little finishing touch to make your website more professional, it’s an important piece of branding for your website and company and they can also help users identify and find things quickly. So using them is definitely a win-win type of thing.

Want to create your own?

When you’re ready to create your own favicon, there are a number of free online services to help you create them. Our favorite is favicomatic.com. Visit that site, chose if you just want the most basic favicon (at 16x16px and 32x32px sizes) or if you want the whole lot of various sizes for mobile devices, etc.

It will also generate the code for you to place into the head section of your website. If you’re using WordPress, these can typically be added to your theme via the Appearance > Customize feature in the admin. If your theme doesn’t have it there, you could try adding it directly to the header file of your theme via the editor under Appearance in your admin (if it’s turned on) or by downloading the header file of your theme with FTP software (such as Filezilla), adding the code (making sure you’ve also uploaded and are linking properly to the image files), and uploading it. It’s not the most difficult edit by any means, but you should be familiar with basic web code to pull off the downloading/editing/uploading option. WP Beginner also has a good tutorial on them here.

Tips for creating your favicon:

I hope you found this short post useful. If you’d like to see me explain something specific related to websites or website design, drop me a note!

Go forth and share ....

Learn More About: