Table of Contents
HTML favicon, short for “favorite icon,” is a small icon associated with a website. It appears in various places, such as next to the web page’s title in browser tabs, on the browser’s bookmark bar, and when the site is saved to a user’s home screen on a mobile device.
Insert Favicon in HTML
In HTML, you can specify a favicon for your website using the element within the section of your HTML document. Here’s an example of how you would do this:
<head>
<link rel="icon" type="image/png" href="favicon.png">
<title>Your Website Title</title>
<!-- Other meta tags and links can go here -->
</head>
In this example:
- The
rel="icon"attribute specifies the relationship between the current document and the favicon. - The
type="image/png"attribute specifies the MIME type of the favicon. It tells the browser that the favicon is a PNG image. - The
href="favicon.png"attribute specifies the path to the favicon file. This can be a relative or absolute URL pointing to the favicon image file.
Favicon Type
It’s important to note that the favicon file can be in various formats, such as PNG, JPEG, GIF, or ICO. However, PNG is the most widely supported format and is recommended for modern websites.
Favicon Size
The size of a favicon typically depends on the platform or browser where it will be displayed. However, some common sizes are widely supported:
| Size | Description |
|---|---|
| 16×16 px | Traditional size is commonly used in browser tabs, bookmark bars, and address bars. |
| 32×32 px | Provides clearer icon for higher resolution displays, often used for bookmarks and tab previews. |
| 48×48 px | Larger size, used in some contexts on mobile devices and for higher visibility on home screens. |
