Member Avatar for martinkorner

I have seen other Websites which have their logo next to their web address where there is normally a picture of an "e" on top of a piece of paper (See the right hand side of the address bar on this page).
Do you know how I could change it ?

Thanks

Martin

  • 4 Contributors
  • 6 Replies
  • 215 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by martinkorner

Dani AI

Generated

A focused, practical follow-up for and anyone else hitting the same problem.

Browsers will either load an icon explicitly referenced in the page head or (as a fallback) request /favicon.ico from the site root. The modern, standards‑correct way is to add explicit icon links in your <head> and provide appropriately sized images (ICO, PNG or SVG as supported). See MDN’s notes on favicons and the <link> element for the correct attributes and formats. (developer.mozilla.org)

Common causes when an icon doesn’t appear (beyond “I saved a .ico”): the file is not a valid ICO (renaming a JPG won’t work), the href points to the wrong path, the server returns a 404 or the wrong Content‑Type, or the browser is using a cached copy. As suspected, file format and placement are frequent culprits; verify the icon is reachable at the root URL (e.g., visit /favicon.ico) and inspect the Network tab to see the GET, status and response headers. (stackoverflow.com)

Recommended minimal head markup (place before other head content):

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" sizes="32x32" href="/favicon-32x32.png" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Avoid the legacy rel="shortcut icon" nowadays; use rel="icon" and explicit sizes/types so browsers can pick the best resource. (mdn2.netlify.app)

If changes don’t appear immediately: test in a private/incognito window, do a hard reload, or append a version query string (e.g., ?/v=2) to the icon URL to force browsers to fetch the new file. Also ensure the server serves a sensible MIME type for .ico (image/vnd.microsoft.icon or commonly image/x-icon) and appropriate cache headers. Versioning tools and generators can produce multi‑size icon packs and helpful manifests. (realfavicongenerator.net)

Checklist: (1) confirm /favicon.ico is reachable (HTTP 200), (2) check Content‑Type and Cache headers, (3) add rel="icon" tags with correct paths/types, (4) clear cache or use a versioned URL, (5) recheck in DevTools. Following those steps will resolve the vast majority of favicon problems.

Recommended Answers

All 6 Replies

Member Avatar for tgreer

Do a web-search on "favicon".

Member Avatar for sbmarsh

if u go to pixel2life.com and do a search for favicons there a couple of tutorials that will help you there :D

Member Avatar for martinkorner

To: tgreer and sbmarsh

Thanks a lot I'll try it.
:cheesy:
Martin

Member Avatar for martinkorner

I tried it and it came up with the code:

<link rel="Shortcut Icon" href="favicon.ico">

I then put this into the head of my home page and saved the file favicon.ico but I still have the webpage icon - why is this :?:

Martin

Member Avatar for TopDogger

What file format did you use? You cannot just rename a GIF, JPG or BMP. You need image editing software that saves the favicon in an ICO format, which is special.

Another thought: You may need to bookmark the page in your favorites before the icon image shows up. I've also seen the favicon icons come and go in the favorites.

Member Avatar for martinkorner

Yep, it's a ".ico" file.
And it's in my favorites.
-- Another thing on the subject of favorites - For some reason when I bookmark Freewebs.com it is never still there the next day.

Martin

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.