Favicon
May 20, 2023
A favicon is a small icon that represents a website or a web page. The term favicon is short for “favorite icon,” as it was initially used in the early days of the web to identify bookmarks or favorites in a web browser. Favicons are typically displayed in the browser’s address bar, tabs, bookmarks, and history, as well as on mobile devices and social media platforms.
Purpose
The primary purpose of a favicon is to help users recognize and identify a website or web page visually. By using a unique favicon, website owners can differentiate their sites from others and create a consistent branding experience across all platforms. Favicons also help users quickly locate and switch between open tabs in their browser.
Usage
Favicons are usually in the format of a square image, typically 16×16 or 32×32 pixels in size, though larger dimensions are also possible. They can be created in various file formats, including PNG, GIF, and ICO. To add a favicon to a website, the image file is uploaded to the website’s root directory and referenced in the HTML code of the website’s pages.
HTML Markup
To include a favicon in a web page, the following HTML markup is used:
<link rel="icon" type="image/png" href="/favicon.png">
This code is added to the <head> section of the HTML document, usually near the top. The rel attribute specifies the relationship between the current document and the favicon. The type attribute indicates the file type of the favicon, while the href attribute specifies the location of the image file.
Browser Compatibility
Most modern web browsers support favicons, including Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple Safari. However, older browsers may not display favicons or may display them incorrectly. To provide backward compatibility, it is recommended to use multiple versions of the favicon in different file formats and sizes.
Dynamic Favicons
In addition to static favicons, some websites use dynamic favicons that change based on user interactions or site activity. For example, a web-based email service may display the number of unread messages in the favicon. Dynamic favicons are created using JavaScript or other scripting languages and require additional code to be added to the web page.
Touch Icons
On mobile devices, favicons are often replaced by touch icons, which are larger images that are used as the home screen icon for web apps. Touch icons are typically 180×180 pixels in size and are added to the HTML code using the following markup:
<link rel="apple-touch-icon" href="/touch-icon.png">
This code is similar to the favicon code but uses a different rel attribute and file name.
