Member Avatar for Sailor_Jerry

How do I get an image to display before the url?

Thanks
SJ

URLimagePrefix.doc (32.5 KB)
  • 4 Contributors
  • 4 Replies
  • 88 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by jalarie

Dani AI

Generated

As wrote, that little image is called a favicon. The replies from and point the right way: include an icon reference in the page head and provide a root-file fallback so older browsers find it automatically. For modern compatibility, supply multiple sizes and formats so tabs, bookmarks, pinned tiles and mobile homescreens all get an appropriate image.

Typical asset checklist:

  • 16x16 - tab / address bar
  • 32x32 - higher-DPI tabs
  • 180x180 - Apple touch icon (iOS)
  • 192x192 and 512x512 - Android / Chrome / PWA
  • Provide both a legacy .ico and PNG files; add a web app manifest if making an installable site

Troubleshooting notes: place a fallback favicon.ico at the site root, verify the browser actually requests the file in DevTools (check response headers), and remember favicons are cached aggressively — changing the filename or adding a query string forces a refresh. For exact link attributes and options see the MDN reference on the icon link type and, for a quick cross-platform generator that produces all sizes plus the head HTML, use RealFaviconGenerator.


RealFaviconGenerator

Recommended Answers

All 4 Replies

Member Avatar for tgreer

Do a web-search for "favicon".

Member Avatar for alpha_foobar

And put some code like this in the header of your html:

<link rel="shortcut icon" href="icon.ico" type="image/x-icon"/>
Member Avatar for Sailor_Jerry

Thanks

Member Avatar for jalarie

And put some code like this in the header of your html:

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

That's an IE hack. The standard is:

<link rel="icon" href="favicon.ico" />
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.