Stands For: Favorite Icon (a portmanteau)
Definition: A favicon is a small icon file associated with a website or web page. Web browsers display the favicon in various places, such as the browser tab, address bar, bookmarks/favorites list, and history, providing a recognizable visual identity for the site.
Key Characteristics:
- Purpose:
- Branding: Reinforces a site’s brand and visual identity.
- Usability: Helps users quickly locate a specific site when multiple tabs or bookmarks are open.
- Professionalism: Gives a website a complete, professional appearance.
- Implementation: A favicon can be implemented in two primary ways:
- Root Directory Method (Traditional): Placing a file named
favicon.icoin the root directory of the website. Browsers will automatically look for and use this file by default. - HTML Link Tag (Modern): Specifying the icon(s) directly in the
<head>section of the HTML document. This is the recommended method as it offers more control over file formats, sizes, and different icon types for various devices.
- Root Directory Method (Traditional): Placing a file named
- File Formats: While
.icois the traditional format, modern browsers support several others:- PNG: Most commonly used due to its support for transparency and good compression.
- SVG: A scalable vector format that is lightweight and looks sharp at any size. It can also adapt to user preferences like dark/light mode.
- GIF: Can be used, sometimes for animated favicons (browser support varies).
- JPEG: Generally not recommended as it does not support transparency.
Modern Usage Example (in HTML <head>):
A modern website often includes multiple link tags to support various platforms:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">