Introduction
In this chapter, you will learn about favicons, which are small icons displayed in the browser tab next to the page title. Favicons help with brand recognition and improve the user experience by making it easier to identify and locate a specific tab among many open tabs.
What is a Favicon?
A favicon is a small, square icon associated with a website. It appears in the browser tab, bookmark bar, and other browser interface elements. The standard size for favicons is 16×16 pixels, but larger sizes (such as 32×32 or 64×64 pixels) are also commonly used for higher-resolution displays.
Creating a Favicon
To create a favicon, you can use an image editor to design a small icon or use an online favicon generator to convert an existing image to the required format.
Adding a Favicon to Your Website
Favicons are added to your website using the <link>
tag in the <head>
section of your HTML document.
Basic Syntax
<link rel="icon" href="favicon.ico" type="image/x-icon">
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Favicon Example</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>HTML Favicon Example</h1>
<p>This page includes a favicon.</p>
</body>
</html>
Using Different File Formats
Favicons can be in various file formats, including .ico
, .png
, .gif
, and .svg
. Here are examples of how to link different file formats:
ICO Format
<link rel="icon" href="favicon.ico" type="image/x-icon">
PNG Format
<link rel="icon" href="favicon.png" type="image/png">
GIF Format
<link rel="icon" href="favicon.gif" type="image/gif">
SVG Format
<link rel="icon" href="favicon.svg" type="image/svg+xml">
Specifying Different Sizes
You can specify different sizes for your favicon to support various devices and display resolutions.
Example
<link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon-64x64.png" sizes="64x64" type="image/png">
Example: Complete HTML with Favicon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Favicon Example</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon-64x64.png" sizes="64x64" type="image/png">
</head>
<body>
<h1>HTML Favicon Example</h1>
<p>This page includes a favicon in multiple sizes and formats.</p>
</body>
</html>
Conclusion
Favicons are an important aspect of web design, enhancing brand recognition and improving the user experience. By using the <link>
tag in the <head>
section of your HTML document, you can easily add a favicon to your website. Understanding how to create and implement favicons in various formats and sizes is crucial for modern web development.