WikiGalaxy
HTML Favicon
Favicons are small icons associated with a particular website or web page,
often displayed in the browser tab, bookmarks, or address bar. They enhance user experience and brand recognition. Let’s explore HTML Favicons with detailed explanations and five code examples.
Adding a Basic Favicon
Concept:
The simplest way to add a favicon to your website is by using the
<link> tag in the
<head> section of your HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Basic Favicon</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This website uses a basic favicon.</p>
</body>
</html>
Explanation:
rel="icon" specifies that this is a favicon.
href="favicon.ico" points to the favicon file.
type="image/x-icon" defines the MIME type for the favicon.
Output:
A small icon (favicon.ico) appears in the browser tab for the website.
Using a PNG Favicon
Modern browsers support PNG format for favicons, allowing for transparent backgrounds and better image quality.
<!DOCTYPE html>
<html>
<head>
<title>PNG Favicon Example</title>
<link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This website uses a PNG favicon.</p>
</body>
</html>
type="image/png"
ensures that the browser interprets the favicon correctly.
- PNG favicons offer higher quality and transparency support compared to
.icofiles.
Output:
A favicon in
.pngformat appears in the browser tab.
Adding Multiple Favicon Sizes
To support various devices, include multiple favicon sizes in your HTML.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Favicon Sizes</title>
<link rel="icon" sizes="16x16" href="favicon-16x16.png" type="image/png">
<link rel="icon" sizes="32x32" href="favicon-32x32.png" type="image/png">
<link rel="icon" sizes="48x48" href="favicon-48x48.png" type="image/png">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This website uses favicons of multiple sizes.</p>
</body>
</html>
sizes attribute defines the size of the favicon.
Output:
The browser selects the best favicon size based on the user's device.
Adding an Apple Touch Icon
For iOS devices, Apple uses a specific touch icon displayed on the home screen when a user saves a website.
<!DOCTYPE html>
<html>
<head>
<title>Apple Touch Icon</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This website supports Apple Touch Icons.</p>
</body>
</html>
rel="apple-touch-icon"
specifies the icon for Apple devices.
- The icon file should ideally be 180x180 pixels for retina displays.
Output:
When saved to the home screen on an iPhone or iPad, the Apple touch icon is displayed.
Dynamic Favicon Using JavaScript
Favicons can be dynamically updated using JavaScript for interactive or dynamic experiences.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Favicon</title>
<link id="dynamic-favicon" rel="icon" href="favicon1.ico" type="image/x-icon">
<script>
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() =& gt; {
const favicon = document.getElementById('dynamic-favicon');
favicon.href = 'favicon2.ico'; // Change to a different favicon
}, 5000); // Change after 5 seconds
});
</script>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This website dynamically updates its favicon.</p>
</body>
</html>
setTimeout function changes the
href attribute of the
<link> tag dynamically.
- This creates an interactive experience, such as notifying the user of updates.
Output:
The favicon changes from
favicon1.icotofavicon2.icoafter 5 seconds.
|
|
|
| |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
| |||||||||||
|
|
|
| |||||||||||
Multiple Sizes
|
|
|
| |||||||||||
|
|
|
| |||||||||||
|
|
|
|
