Web Terminology: The Favicon and Why It’s Important
I’m a creative problem-solver driven by the desire to see small businesses improve their image and succeed. I’ve got over 20 years experience and have worked with clients as large as Nike and as small as a local sole-proprietor. I’ve been an advocate for education, a member of prestigious design organizations, won awards, and been invited to judge design competitions. Over the years, I have also written blogs and articles for a number of online sites and print publications. I have a heavy background in art, photography, graphic design and thinking outside the box. When not working, you’ll find me getting outdoors, practicing Qi Gong, snowboarding, camping, collecting rocks, and driving around in a sweet 1970 Camaro.
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:
- browser bookmark icon
- browser tab icon
- website shortcut icon
- website icon
- URL icon
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:
This same file type is also used and shown in a browser’s URL bar while you’re visiting a site, like this example:
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:
Another important place that a website’s favicon will show is in Google search results…
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:
- Keep it simple. Most companies use a simplified version of their logo (for example, the graphic without the company name). Remember, the smallest size the icon will be seen – in the web browser tab, URL field or Google search results is pretty tiny (16 x 16 pixels), so the logo has to be simple in order to read as your logo. If your logo really doesn’t work, you could do something as simple as a block of color from your branding colors, the first letter for your company name (or 2 initials), or an icon you use in other branding.
- You don’t have to generate every size/use every size. We typically recommend having the standard favicon and just a handful of other image sizes to accommodate the widest range of devices. Utilize more only if you know your audience will be on specific devices.
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!
I’m a creative problem-solver driven by the desire to see small businesses improve their image and succeed. I’ve got over 20 years experience and have worked with clients as large as Nike and as small as a local sole-proprietor. I’ve been an advocate for education, a member of prestigious design organizations, won awards, and been invited to judge design competitions. Over the years, I have also written blogs and articles for a number of online sites and print publications. I have a heavy background in art, photography, graphic design and thinking outside the box. When not working, you’ll find me getting outdoors, practicing Qi Gong, snowboarding, camping, collecting rocks, and driving around in a sweet 1970 Camaro.
Learn More About:
SEARCH ARTICLES: