In the mid nineties a Microsoft engineer realized it would be much easier if there was a very small icon associated with a website bookmark, this idea took hold an the favicon was born. The favicon in essence is a very small logo- and favicons are a great way to finish a website design and help ensure your branding is properly displayed in the browser bar. In this article we’ll explore what is a favicon, its history and how can you make a professional favicon for your website.
A favicon is a small icon located at the top of an internet browser that is associated with a particular website and used to help identify what the website is. The favicon helps to serve as a visual reminder of the website’s identity when multiple tabs are open on a browser. Not only do favicons help visitors quickly locate a website, but they also create brand awareness and identity.
What does a favicon look like?
As mentioned in the previous paragraph, the favicon serves as a quick visual reminder to a user which website they are accessing. The favicon is a small 16 x 16 pixel image that is displayed on a browser tab, bookmark menu, search bar, browser history drop down menu, or toolbar applications menu. Due to their small size you usually will only want to include 1-3 letters if you decide to put text on a favicon. Usually a favicon is represented as a small image of a company’s logo or branding. Although they are tiny, the favicon serves as an easy way to develop brand awareness. Below are a few examples of what a favicon looks like:
Browser Tab
Bookmarks Bar
Search Bar
The History of the Favicon
The favicon was developed back in 1999 by a Microsoft developer named Bharat Shyram as an addition to the favorites feature on Internet Explorer. He noticed that what both of these browsers lacked was an easy way to identify a website when it was bookmarked. So he added a small 16 x 16 image next to a website that would help visitors identify a website quickly in their bookmarks tab.
Why are favicons important?
Creation of a favicon is an important step in creating a business website. Inclusion of a favicon will easily separate your brand image from other websites through an identifiable logo. The favicon will make it easy for web visitors to relocate your website at a later date in their browser history or bookmarks tab.
Favicons also play a role in how your website ranks on search engines. Since favicons increase user friendliness of a website, you can improve your website activity and increase your rate of traffic from visitors being able to easily locate your website through a bookmark or in their browser history. This increase in website traffic will have a positive impact on your search engine rankings.
Favicons in Search Design
Google has also incorporated a favicon into each search result on mobile devices. In a blog post, Google emphasized that beyond branding favicons play an important role in generating clickable actions.
“As we continue to make new content formats and useful actions available — from buying movie tickets to playing podcasts — this new design allows us to add more action buttons and helpful previews to search results cards, all while giving you a better sense of the web page’s content with clear attribution back to the source.”
How to Create a Favicon
A favicon is relatively simple to create. Below is a breakdown of the steps to get you started.
1. Create your favicon image. You can use an editor such as Photoshop or Fireworks for example. Start with a larger image size such as a 64 x 64 image that includes features of your current branding, color scheme, and typography. By using a larger image, the favicon will be of better quality and can easily be scaled down to the 16 x 16 image size used for standard desktop browsers. Once you have created your image, save the files as a .png, .jpeg, .gif or .svg. If you don’t want to create a favicon from scratch, you can use a favicon image generator tool online, which will help you generate a favicon from a logo, piece of text, or image of your choice.
Favicon image generator: https://favicon.io/
2. Convert your favicon image into ICO format. Once your favicon has been created, convert it to ICO format as this is the format supported by most web browsers. There are many online tools such as the ones below that allow you to easily convert your favicon:
- https://favicon.io/favicon-converter/
- https://image.online-convert.com/convert-to-ico
- https://icoconvert.com/
3. Upload the favicon to your current website in its root directory. You can use an online test to make sure it is uploaded correctly.
https://seositecheckup.com/tools/favicon-test
4. Add an html header to support your favicon on older website browsers. Below is a sample html format you can use:
Sample Favicon Creation
Below we have used the favicon creation tool to show how to create a favicon for free in just a few simple steps:
Step 1: Visit https://favicon.io/
Step 2: Choose the image you want to create your favicon with. We used the german shepherd image below.
Step 3: Choose the type of favicon generator you want to use
In this example we used favicon.io
Step 4: Upload your image, logo, text or icon to the generator
Step 5: You will receive a downloadable zip file with all of your available favicons for use.
32 x 32 favicon file vs. 16 x 16 favicon file
Favicon Creation Guidelines
- While favicons were originally created as ICO files when they were originally developed by Microsoft, they can now be created as PNG, JPEG, GIF, and SVG files. We would not recommend creating your favicon as an ICO file now, as the image will appear a bit pixelated, but rather converting it into this format after it has been created.
- You will need to create your favicon in different sizes to accommodate different devices. While the 16 x 16 format is pretty standard for a desktop computer, phones and tablets will require a larger size. We recommend creating a high resolution favicon for the purpose of resizing to different types of internet devices.
- Keep your favicon simple. You want the favicon to be an accurate representation of your brand image, so incorporate similar colors, logos and styles currently used within your website design.
Need help with your website design and development?
Alliance Interactive is a full service agency that provides customized website design and development options across a number of different industries. Contact us today.