When you publish a webpage, people are not the only ones reading it. Browsers, search engines, and sharing apps also look for clues about its meaning. This lesson explains how website name metadata and branding fits into that picture.
The Idea in Plain English
Favicons are small identifying images used in tabs, bookmarks and some other browser surfaces. Provide valid icon files and correct MIME types; browsers may cache old icons.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<head>
<title>Garden Journal</title>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/garden-icon.svg" type="image/svg+xml">
</head>What Each Part Does
- The title gives the document a name in tabs and other browser surfaces.
- The link element declares a relationship such as a stylesheet or alternate language.
- The head holds page metadata, not the visible lesson content.
- rel describes the relationship between the current page and a linked resource.
- href is the URL or fragment destination of a link.
- sizes describes how wide a responsive image is expected to be displayed.
The icon can appear near the tab title. Its appearance and size depend on the browser and operating system.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: create one complete head or structured content example focused on Website Name Metadata and Branding, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Using a missing file path or expecting the favicon to change immediately after deployment.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Favicons are small identifying images used in tabs, bookmarks and some other browser surfaces. Provide valid icon files and correct MIME types; browsers may cache old icons.
- The icon can appear near the tab title. Its appearance and size depend on the browser and operating system.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.