Prev Next

HTML Favicon

A favicon is the small icon displayed in the browser tab next to the page title. To add a favicon, you typically use a <link> element in the <head> of your HTML document. The favicon helps users recognize your site quickly in their browser tabs and bookmarks.

Key Topics

Adding a Favicon

Example: Using the <link> element to reference a favicon file (often an ICO or PNG) placed in the same directory as your HTML file.

<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

Customizing Your Favicon

Example: You can use a PNG image as a favicon. Make sure the file is the right size (16x16 or 32x32 pixels) for best results.

<head>
    <link rel="icon" href="images/TryMeYourSelf-logo.png" type="image/png">
</head>

Below is a simple HTML page demonstrating the use of a favicon link. Update the file path and type as needed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>My Site with Favicon</title>
    <link rel="icon" href="images/TryMeYourSelf-logo-1.png" type="image/png">
</head>
<body>
    <h1>Check the tab for the favicon!</h1>
    <p>If the favicon is set correctly, you'll see a small icon in your browser tab.</p>
</body>
</html>

Explanation: The <link> element points to the favicon image. Modern browsers support various image types, so you can use PNG, ICO, or SVG files as favicons. Just ensure they are properly sized and the link is correct.

Key Takeaways

  • Use <link rel="icon"> in the <head> to add a favicon.
  • Favicons help users identify your site quickly in browser tabs and bookmarks.
  • Common favicon sizes are 16x16 or 32x32 pixels.
  • Use PNG, ICO, or SVG formats for broad compatibility.
  • Ensure the favicon path is correct and the file is accessible on the server.
Prev Next