A favicon is a small image browsers may show beside the page title in tabs and bookmarks. Link elements in head tell the browser where icon files live. Think about what the picture adds to the story, not just whether it looks nice on the screen.
What You Need to Know
Formats and supported sizes vary. Keep the path accurate and avoid mistaking a favicon for an image that appears inside the page body.
Fetch priority is a hint. Preloading or high priority cannot fix a large, inefficient image on its own.
Pictures can make a page much easier to understand, but they are useful only when the file loads and the important meaning is also available as text.
Example: See It in Action
This example keeps the idea small. Copy it carefully, then follow the explanation instead of guessing what the browser will do.
If this is only part of a document, place metadata and style elements in the head of a complete HTML page. Keep ordinary visible content in its body.
<head>
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="images/favicon.svg" type="image/svg+xml">
<title>My Website</title>
</head>Let’s Understand the Example
- The head contains useful page information for the browser, such as its title and character encoding.
- A link element points to a related resource, often a stylesheet or an icon. It does not make a clickable link in the page body.
- Rel describes a relationship to the linked page or resource, including security and search hints.
- Href contains the destination of a link. A value starting with # points to an id on the same page.
- Sizes provides a browser hint about an image display width or icon size, depending on the element.
- Type changes the kind of input, script, resource or button, depending on the element.
Some of the markup affects the browser tab or page settings rather than appearing as visible text. Check the browser tab and inspector as well as the page itself.
What Should You See?
If the image file is available, the picture appears in the page. If not, the browser may show a broken image or fallback text. Check that the text alternative fits the picture’s purpose.
Cover the picture and read the surrounding text aloud. If essential information has disappeared, add a useful text alternative or nearby explanation.
Try It Yourself
- Create an icon file and connect it using a link element in head.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Adding an img to the page and expecting it to replace the browser tab icon.
- Never guess at an image description. Write alternative text that matches the picture and its purpose on this page.
Key Takeaways
- A favicon is a small image browsers may show beside the page title in tabs and bookmarks.
- The head contains useful page information for the browser, such as its title and character encoding.
- Fetch priority is a hint. Preloading or high priority cannot fix a large, inefficient image on its own.