Favicon

What is a Favicon?

A favicon (short for "favourite icon") is a small graphic icon or image that is displayed in the browser tab or address bar of a website.

It is typically a small square image, usually 16x16 pixels in size - although it can be larger.

Favicons are used to help users identify and differentiate between different tabs or bookmarks in their browser, especially when multiple tabs or windows are open.

They can also add visual interest and branding to a website. Favicons are usually created as .ico files and added to the website's HTML code using a specific link tag.

Why is a favicon important?

Favicons are important for several reasons:

Branding

A favicon can help establish a website's brand identity by providing a visual representation. A well-designed favicon can make a website more memorable and recognizable.

Navigation

Favicons can help users navigate between multiple tabs or windows in their browser by providing a visual cue for each website.

This can be especially helpful when users have multiple tabs open and need to quickly switch between them.

Professionalism

Adding a favicon to your website can make it look more professional. It signals that you cared enough to attend to even small details.

Accessibility

Favicons can help people with disabilities use the web. People who have trouble seeing or reading may use special technologies to browse websites. Having a favicon makes it easier for these technologies to identify each site.

They can help these users to identify and differentiate between different websites more easily.

Where can you find Favicon?

Favicons can be found on websites by looking at the browser tab or address bar. They are usually displayed as a small icon to the left of the website's name or URL.

If you want to download a website's favicon, you can do so by viewing the website's source code and looking for the link tag that specifies the favicon.

Here are some areas where a favicon can appear:

• Browser tab

• Bookmarks

• Address bar

• Browser history

• Mobile devices

• Taskbar

• Browser extensions

• RSS feed

Examples

Here are some examples of favicons:

1. Google's favicon is a small "G" in different colours depending on the Google service being used.

2. Facebook's favicon is a blue square with a white "f" in the middle.

3. Twitter's favicon is a small blue bird.

4. YouTube's favicon is a red rectangle with a white triangle inside.

5. Amazon's favicon is a small orange arrow pointing from "A" to "Z".

6. Wikipedia's favicon is a puzzle globe.

7. LinkedIn's favicon is a blue "in" logo.

8. Instagram's favicon is a small square camera.

History of favicon

The history of the favicon dates back to 1999 when Microsoft introduced the "Favorites" feature in Internet Explorer 5. 

This feature allowed users to save bookmarks of their favourite websites, and Microsoft introduced the favicon as a way to visually identify each bookmark.

The first favicons were simply small icons or logos that were saved as a .ico file and included in the root directory of a website.

The browser would automatically look for this file and display the favicon in the address bar and bookmarks list.

Over time, favicons became more sophisticated and were used for branding and navigation purposes.

Many websites began to use custom-designed favicons that reflected their brand identity, and the size and format of favicons were standardized to 16x16 pixels in size and saved as a .ico file.

Google introduced the feature of displaying favicons on mobile SERPs in 2022, while in 2023, Google introduced a feature that displayed the favicon of each website next to its search result.

This allowed users to quickly identify and differentiate between different websites in the search results.

Today, favicons continue to be an important part of web design and are used on almost every website on the internet.

They have evolved to include animated favicons, multi-resolution favicons, and even dynamic favicons that change based on user interaction.

Despite their small size, favicons play a big role in website branding and user experience.

File formats for favicons

There are several commonly used file formats for favicons, including:

1. ICO (Windows Icon): ICO files allow multiple sizes and colours of the same icon image to be stored in one file. This lets the browser pick the icon that looks best on the user's screen. ICO is the most common favicon format.

2. PNG (Portable Network Graphics): PNG images provide high-quality, crisp-looking icons that work well on all devices. PNGs allow transparency, which is useful for clean icon designs.

3. GIF (Graphics Interchange Format): GIFs can have simple animations. Animated favicons can attract user attention. However, GIFs are less often used for favicons than ICOs and PNGs.

4. SVG (Scalable Vector Graphics): SVG images are vector images, so they stay sharp when resized to any display. As high-resolution screens become more common, SVG is being used more for scaling favicons cleanly.

5. JPEG (Joint Photographic Experts Group): JPEG files are not commonly used for favicons because they are primarily used for photographic images and do not support transparency. However, they can be used if the favicon is a photograph or if transparency is not necessary.

File formats supported by different browsers

Here are the different file formats supported by each web browser for favicons:

How to add a favicon to your site?

Adding a favicon to your website is a relatively simple process. 

Here are the steps:

Create the favicon

The first step in creating a favicon is to design an image using an editor such as Fireworks, Photoshop, Corel Paint, or a free alternative like GIMP.

It's recommended to use a simple design, and for brand consistency, many businesses opt to use their company logo as the favicon.

The standard size for a favicon is 16x16 or 32x32 pixels. The traditional format is .ico, but .png and .jpg are also commonly used.

FYI: It is a common practice to name a website's favicon file as "favicon.ico", but it isn't a strict requirement. This naming convention is a widely accepted standard because web browsers usually search for this file by default. That being said, it's entirely possible to use a different name or even a different file format for your favicon.

Save the favicon

You will need to save your favicon file in your website's root directory. The root directory is the primary folder where your website's core files are stored (like index.html).

If you are using a hosting service, you can typically access your root directory via a file manager tool or FTP (File Transfer Protocol).

If you don't have access to the root, you can put the favicon in a subdirectory, but remember the exact path, as you will need it in the next step.

Link the favicon

You will need to add a line of HTML code to the <head> section of each HTML page where you want the favicon to appear.

Here is an example of how to do it:

• If your file is named favicon.ico and is saved in the root directory of your site, you do not necessarily need to add this link element, as this is the default that browsers will look for. However, it's generally a good idea to add it for maximum compatibility:

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

• If you used a different name for your file, a different file format, or if it's saved in a subdirectory, replace favicon.ico with the appropriate file path:

<link rel="icon" href="path/to/your/favicon.png" type="image/png">

Replace "path/to/your/favicon.png" with the actual path to your favicon file, and "image/png" with the correct MIME type if you are not using a PNG image.

Test

Save your changes to your HTML code and publish your updated website to make the favicon appear on your site.

Finally, make sure to test your favicon by visiting your webpage in a browser to see if the favicon shows up. It's often displayed on the browser tab next to the page title.

Remember to clear your browser's cache if the favicon does not show up immediately, as the browser may have saved (cached) an earlier version of your site without the favicon.

Adding a favicon in WordPress

Adding a favicon in WordPress is a straightforward process due to its user-friendly interface.

Here are the steps:

• After creating your favicon image, log into your WordPress dashboard. In the left-hand side menu, hover over "Appearance" and click on "Customize".

• In the Customizer, click on "Site Identity". This will open a section where you can manage your site's title, tagline, logo, and icon.

• In the Site Identity section, find the setting for "Site Icon" or "Favicon". Click on "Select image" to upload your favicon file from your computer. After uploading, WordPress will show a preview of how it looks. You can crop the image if necessary.

• Once you are satisfied with the favicon preview, click on "Publish" at the top of the Customizer to save your changes.

Best sizes for favicon

The classic favicon size is 16x16 pixels and works well in all browsers. This size is easily displayed in bookmarks, tabs, and address bars.

If you want your favicon to look its best as an iPad home screen icon, you should use a size of 72x72 pixels.

This is because iPads have a larger screen and therefore require a larger icon.

For recent iPhone models, a size of 114x114 pixels is recommended for the best home screen icon.

This is because these devices have a retina display, which appears twice the standard size.

Moreover, if you want your favicon to look good on Google TV, you should use a size of 96x96 pixels.

This will ensure that your icon looks sharp and clear on the TV screen.

As for the Chrome Web Store, a size of 128x128 pixels is recommended. This will help your company logo stand out and make a strong impression on potential users.

Finally, if you want your favicon to look its best on Opera Speed Dial, you should use a size of 195x195 pixels.

This will ensure that your icon is displayed in the best possible quality and is easily recognizable by users.

Tools for generating a favicon

There are many tools available online for generating a favicon. Here are a few options:

Favicon.io

This is a popular favicon generator that allows you to upload an image and then generate the favicon in various sizes and formats. It also provides a preview of how the favicon will look on different devices and browsers.

Canva

Canva is a design tool that allows you to create custom graphics, including favicons. It has pre-made templates and allows you to easily resize and optimize your design for a favicon.

RealFaviconGenerator

This tool generates favicons for all devices and platforms, including iOS, Android, Windows, and Mac. It also provides a preview of how the favicon will look on different devices and browsers.

Favicon Generator

This is a simple favicon generator that allows you to upload an image and then generate the favicon in various sizes and formats. It also provides HTML code to add the favicon to your website.

Adobe Photoshop or GIMP

These are image editing tools that allow you to create custom favicons. They provide more advanced features and flexibility but require more design skills and knowledge.

Best practices regarding favicon creation

Here are some best practices to keep in mind when generating a favicon:

Keep it simple

A favicon is a small icon, so it's essential to choose an image that is simple, easily recognisable, and looks good in a small size.

Use a recognizable image

If possible, use an image that is already associated with your brand or website. This will help users quickly identify your site in their bookmarks and tabs.

Optimize the image for small sizes

Remember that the favicon will be displayed at a very small size, so make sure the image is clear and easily recognizable at that size. Avoid using images with fine details or small text.

Test it across different devices and browsers

Make sure to test the favicon on different devices and browsers to ensure that it looks good and is easily recognizable.

Provide multiple sizes

Provide the favicon in multiple sizes to ensure that it looks good on different devices and platforms. The recommended sizes are 16x16, 32x32, and 64x64 pixels.

Use the correct file format

When creating a favicon for your website, the recommended first step is to use the .ico format. This format is specialized for icons and is the most recognized and compatible across various browsers, even older ones.

One of its major advantages is the ability to accommodate multiple icon sizes within a single file, ensuring a consistent display across different platforms.

Furthermore, by convention, web browsers default to fetching the favicon.ico file from a website's root directory, which simplifies the process and enhances compatibility.

Although modern browsers also support other formats such as .png and .jpg, the .ico format remains the universally accepted standard.

Conclusion

A favicon is a small but important element of a website's branding and user experience.

By creating a well-designed favicon that is simple, recognizable, and optimized for small sizes, website owners can enhance their brand visibility and help users easily identify their site.

Related Articles