We are independent & ad-supported. We may earn a commission for purchases made through our links.
Advertiser Disclosure
Our website is an independent, advertising-supported platform. We provide our content free of charge to our readers, and to keep it that way, we rely on revenue generated through advertisements and affiliate partnerships. This means that when you click on certain links on our site and make a purchase, we may earn a commission. Learn more.
How We Make Money
We sustain our operations through affiliate commissions and advertising. If you click on an affiliate link and make a purchase, we may receive a commission from the merchant at no additional cost to you. We also display advertisements on our website, which help generate revenue to support our work and keep our content free for readers. Our editorial team operates independently of our advertising and affiliate partnerships to ensure that our content remains unbiased and focused on providing you with the best information and recommendations based on thorough research and honest evaluations. To remain transparent, we’ve provided a list of our current affiliate partners here.
Software

Our Promise to you

Founded in 2002, our company has been a trusted resource for readers seeking informative and engaging content. Our dedication to quality remains unwavering—and will never change. We follow a strict editorial policy, ensuring that our content is authored by highly qualified professionals and edited by subject matter experts. This guarantees that everything we publish is objective, accurate, and trustworthy.

Over the years, we've refined our approach to cover a wide range of topics, providing readers with reliable and practical advice to enhance their knowledge and skills. That's why millions of readers turn to us each year. Join us in celebrating the joy of learning, guided by standards you can trust.

What is a Favicon?

By R. Kayne
Updated: May 16, 2024
Views: 21,111
Share

A favicon is a custom icon associated with a webpage or website that appears next to the http address in the URL window of a browser. It will also occupy open tabs in tab-enabled browsers, and will display next to bookmarked links. The term combines the words "favorites" and "icon." Microsoft Internet Explorer version 5.0 introduced the ability to display favicons, followed by other major browsers. Firefox, Netscape, Opera, Safari and Konquerer are among the many browsers that support this feature.

A favicon is so small that it is measured in pixels. A pixel is the smallest unit of measurement on a computer screen. Pixels, which resemble tiny blocks, are clearly visible when viewing a display screen through a magnifying glass. A favicon is just 16x16 pixels, 32x32, or, in the case of Macintosh computers, sometimes 64x64 or larger.

Designing a logo for such a tiny canvas is no easy task, so it's easier to start with a larger canvas and then re-size the image down. Since reducing an image can cause it to loose clarity, it's best to start with a canvas size about 64x64 pixels.

These icons can be designed in monochrome, 16 colors, 256 colors, or more, using almost any graphics program. Once the design is reduced and saved, it can be converted to an icon file. Not all graphics programs save files as .ico files, but there are many graphics programs available online that are specific to .ico file creation and conversion. By opening a .bmp, .jpg, .gif, or other image file in one of these programs and choosing "Save as," you can convert the image to the proper .ico format and name the file favicon.ico.

The icon can now be uploaded to the root directory of your website. Browsers will look for this file and display it if found. Aside from uploading it to the website, two lines of simple code should be added into the <head></head> section of the webpage as shown below. Change "website.com" to your actual website name:

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

If a website is bookmarked in Internet Explorer before it has a favicon, a new one might not display. Delete the bookmark, flush the browser's cache, and restart the browser. Now manually surf to the website and you should see the favicon. Bookmark the site to add it to favorites.

While Internet Explorer requires that the favicon be an .ico file, Firefox, Netscape, and other popular browsers can also display .gif, .jpg, and .png files. If using an image file type other than .ico, the code should be changed to reflect the correct image type. For example, if using favicon.png the code would read: type="image/png" /> rather than type="image/x-icon" />.

Associating a favicon with a website creates visual branding that can help a surfer recall your website and its content with a simple glance at his or her bookmarks. Whether a mini logo or original design, your image will ideally reflect something of the site's content, character, or name. There are several online companies that will design a favicon for you, if desired. However, for those with basic computer skills, creating one is a simple and enjoyable task that can take anywhere from a few short minutes to an afternoon or evening.

Share
EasyTechJunkie is dedicated to providing accurate and trustworthy information. We carefully select reputable sources and employ a rigorous fact-checking process to maintain the highest standards. To learn more about our commitment to accuracy, read our editorial process.
Discussion Comments
Share
https://www.easytechjunkie.com/what-is-a-favicon.htm
Copy this link
EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.

EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.