What is a Favicon, and Why Does it Matter?

Reading time: 8 min read
Raj Vardhman
Written by
Raj Vardhman

Updated · Aug 25, 2023

Raj Vardhman
Chief Strategist, Techjury | Project Engineer, WP-Stack | Joined January 2023 | Twitter LinkedIn
Raj Vardhman

Raj Vardhman is a tech expert and the Chief Tech Strategist at TechJury.net, where he leads the rese... | See full bio

Florence Desiata
Edited by
Florence Desiata


Florence Desiata
Joined June 2023 | LinkedIn
Florence Desiata

Florence is a dedicated wordsmith on a mission to make technology-related topics easy-to-understand.... | See full bio

Techjury is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission. Learn more.

There are 2 billion websites worldwide, each with a marker or logo. No matter how many tabs are open in your browser, you don’t confuse them with one another, thanks to favicons.

Favicons are tiny icons on your browser tab. They help you quickly locate an open page or tab within your browser, saving time from scanning each tab.

🎉Fun Fact:

Favicons vary in size, shape, and form, depending on your web browser. Google Chrome, the largest market share of the best web browsers, has bigger and more dynamic favicons. Meanwhile, Apple’s Safari has smaller and circular favicons, with some tabs having no favicons. 

These tiny logos are also crucial to businesses as a form of good impression and well-thought-out web design. Familiarize yourself with favicons, as this article will discuss favicons from start to finish.

🔑Key Takeaways: 

  • Favicons are tab icons visually representing a website and a brand.
  • Businesses use favicons for brand awareness and identity.
  • Favicons are in a browser’s tab, history, and bookmarks menu.
  • There are four steps to creating and adding a favicon to your websites: creating, converting, uploading, and adding HTML.
  • Favicons ensure potential customers remember you.

What is a Favicon?

Favicons assist users in recognizing websites by indicating which tab leads to them, and users can memorize them without their names. Popular favicons we know are Facebook's mini "f" logo, PayPal's blue double "P," and Apple's iconic black half-eaten apple.

🎉Fun Fact: 

The term “Facebook” derives from face book directories given to university students in America. Mark Zuckerberg experienced this during his stay at Harvard University, prompting him to use the term for his social network. 

Get to know more about the history of social media platforms with TechJury’s in-depth article.

Due to their similarity with brand logos, favicons are often confused with brand logos. They have design similarities but aren't the same. 

According to branding statistics, logos serve as a brand trademark or means of identification, helping customers remember you. At the same time, users associate a favicon with a brand as an identifier among open or closed tabs. 

Bharat Shyam introduced the concept and use of favicons in Internet Explorer in 1999. Since then, web browsers and search engines have followed the trend and implemented favicons.

🎉Fun Fact:

Favicon combines the words favorite and icon. When a user marks a website as a favorite or bookmark, it displays the favicon in the favorites or bookmarks list next to the website’s name.

The following sections show precisely where you can spot favicons in your browser.

Finding the Favicon on a Browser

Favicons are easy to find; browsers display them in the following locations:

  1. The browser's address bar
  2. The browser's tabs
  3. The bookmarks/history menu.

The guide below shows how you can navigate favicons in Google Chrome.

1. Address bar - When you search a website in the address bar, a favicon comes with the title.

Address bar of Google Chrome

2. Tabs bar - You can easily find favicons when browsing in the tabs to the left of the webpage’s title. Take Techjury.net as an example. 

The small bubble chat icon where the arrow points is its favicon. To its right is the website’s title.

Techjury.net’s favicon in Google Chrome

You can observe that Techjury.net’s favicon resembles its logo.

3. Drop-down menu - In Google Chrome, users can find favicons in the drop-down menu for bookmarks and history. 

To find it, click the kebab icon at the top right corner of the browser. 

Navigating the Bookmarks menu in Google Chrome

Click Bookmarks. The bookmarks tab will display all your bookmarked websites and any bookmark folders you've created.

Drop-down menu in Google Chrome

Favicons and website titles are shown in the Bookmarks and History part. Below are the favicons of Techjury.net, Comfyliving.net, Dataprot.net, and many other sites/folders.

Drop-down menu expanded in Google Chrome

🎉Fun Fact:

Some favicons are just website logos shrunk down. At the same time, some brands use parts of their logo as their favicon.

Like brand logos, favicons are essential for staying in people's minds. Designing them in a way that fits your brand is crucial. To achieve the best results, follow the required sizes for each type.

Different Types of Favicons

Favicons come in various dimensions and formats, with modern devices featuring varying-density displays. Web browsers typically use 16x16 pixels as their most common size.

Here are many variations of favicons and their ideal favicon sizes:

Favicon Location/Format

Type Size/Pixels


16 x 16

Taskbar shortcut 

32 x 32

“Read Later” sidebar on Safari

32 x 32

iPad home screen icon

72 x 72

Desktop shortcut 

96 x 96


96 x 96

Home screen icon for recent iPhone models

114 x 114

Chrome Web Store 


Small Windows 8 Start Screen


Apple touch 

180 x 180

Opera Speed Dial

195 x 195


300 x 300


512 x 512

Types of Favicon

The types of favicons depend on their file formats, such as PNG or SVG. There are rules when creating one, including getting the correct image format.

Below are the most common file formats to create a favicon design:

File type


Most compatible

Windows ICO

ICO is a flexible, original file type for favicon, with multiple bit depths and resolutions, supported by all browsers.

ICO stands out on the Internet Explorer Windows 7 taskbar.

PNG or Portable Network Graphics

PNG is user-friendly, compatible with most browsers, and provides high-quality images without pixelated edges. 

It's lightweight and fast, making it famous for creating favicons.

Used more commonly for IOS, Android, and Windows 10 devices

SVG or Scalable Vector Graphics

SVG is a lightweight, scalable format that enables image upscale/downscaling without compromising site performance. 

It supports GIFs as favicons and is supported by only Opera, Chrome, and Firefox.

Best for Opera browsers.

Creating a favicon depends on its use. It's recommended that you prepare your favicon in different formats, as there are places where it needs to be in this or that format.

Creating Your Favicon

The best thing about having or creating your favicon is consistent brand identity. Companies and businesses use favicons to help them differentiate themselves from other brands.

If you are a business owner, adding favicons is an excellent move toward better branding. 

Here are four steps to making a favicon:

Step 1: Create Your Image

Hiring a graphic designer for a favicon is wise for those not into design, as they should know the nuances of presenting a business professionally and appealingly. They should use brand colors and ensure the design quickly identifies the website.

If the budget is limited, Fiverr connects freelancers with graphic designers for as little as $5. At the same time, an online favicon generator is available for those on a budget. Both platforms offer graphic design services.

You can also use the online graphic design tool Canva. It doesn’t provide premade templates for favicons, but you can create a custom design.

✅ Pro Tip:

Create a favicon on a solid fill and transparent background to ensure your favicon looks good in many different contexts.

Step 2: Convert Your Image

After creating your favicon, convert the image to suit your platform. The favicon format compatible with most web browsers is ico. For better results in image conversion, refer to the first table above, which contains the size guide. This will help you know which design and size suit you best.

Alternatively, favicon generators allow you to convert your image into the proper format for download, like Favicon.io and Favicon-generator.org. Good favicon creator tools can also transform your image for free.


If your favicon has inappropriate symbols, Google will not show it. Here’s the Google favicon guideline to make your site eligible for a favicon in Google Search results.

Step 3: Upload it to Your Website

After creating and converting your favicon to your liking, it's time to upload it to your website. You must upload it to your website's root directory to correctly display the favicon.

Another way to upload it is to create a folder in the root directory called images. Save the favicon there and use favicon.ico as the file name. This file name is a common name for favicons.

The last step is editing your site's HTML code directly.

Step 4: Add Basic HTML Code

You don't need to do this for modern browsers, as they can find your favicon file without adding code. This step is to help older browsers find and display your favicon image correctly.

Add the following piece of code to your HTML header within the tags of your page:

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />

After this, you’re done! Your favicon should now show on your website tab and saved bookmarks.

Learn about the importance of favicons in the section below.

👍Helpful Article:

Other than favicons, online businesses or companies should add QR codes to their websites. QR codes help bridge the offline and online worlds, allowing consumers to immerse themselves in a service or business.

Adding them to your website is easy. Learn how to create and add website QR codes with TechJury’s comprehensive guide.

The Importance of Favicons

Favicons are more than a mere minuscule icon. They also have different benefits, such as: 

  • Help users find a necessary page quicker and easier.
  • Adds legitimacy to your website.
  • Quickly identify your website or brand.
  • Visually stand out in a list of bookmarks.
  • Create memorable, catchy elements for faster-perceiving images.
  • Enable seamless browsing for improved search engine rankings.
  • Act as a functional element of the website layout.
  • Enhance the browsing experience and usability of the web interface.

Due to favicons, you will browse for less time. Despite being modest, they significantly impact the user and the website owner.


Favicons help customers remember your company, which strengthens your brand. Although it may seem minor, they contribute to a site's success at little to no additional cost. It's up to you or your brand how you create it; you can utilize your primary logo, for example.

By including a favicon, you demonstrate that you're up-to-date with modern technological developments and aim to improve the user experience.


What are favicons used for?

Favicons are used strategically to help users locate your page easier among the many tabs open.

Can I use my logo as a favicon?

Yes, you can use any image to represent your website's favicon. Some create favicons by incorporating the features of their logo or the first letter of their brand name.

Is a favicon necessary?

Favicons are not required but essential as they add legitimacy to your business website. Paying attention to this aspect of your web presence would be best.

What happens if you don't have a favicon?

Without a favicon, your website will display as a generic gray globe. This isn't recommended as it's unattractive and may turn off users.


Facebook LinkedIn Twitter
Leave your comment

Your email address will not be published.