Adding Icons: Understanding Favicons and In‑Page Logos

As I continued refining my Learning Journey blog, I decided to add an icon to make the site feel more personal and professional. I wanted a small visual identity element that would distinguish the project and make it look complete.

What I initially assumed would be a quick addition became an important lesson in understanding how browsers handle icons differently from content inside a webpage.

At first, I believed that adding a favicon would automatically display an icon somewhere inside the webpage itself. After generating the favicon files and linking them correctly inside the head section, I kept refreshing the page and looking for the icon within the body content.

It did not appear.

This led me to question whether the file path was wrong or whether the feature only worked when the site was hosted live.

I later understood that a favicon is not part of the page content.

A favicon appears in:

• The browser tab.
• Bookmarks.
• Browser history.

It does not display inside the webpage body.

Once I made that distinction, the confusion disappeared. The favicon was correctly implemented; I had simply misunderstood its purpose.

Having understood the difference, I then added a visible icon inside the header using the img element. This allowed the logo to appear above the main heading, creating a clean and intentional layout.

This small adjustment helped me understand how structure determines layout, placing the image inside or outside the h1 changed its position entirely.

Key Lessons Learned

1. A favicon and an in-page image serve different purposes.
2. Not all visual elements appear inside the body of a webpage.
3. File paths and correct linking are essential for assets to load properly.
4. Small design decisions contribute significantly to professionalism.

Therefore, before troubleshooting an issue, it is important to confirm what an element is designed to do. Understanding the role of each HTMLfeature prevents unnecessary confusion and improves problem-solving efficiency.This experience reinforced a broader lesson in my learning process: clarity often comes after implementation, not before.