4

I have seen this tag several times but can't find a simple explanation that is understood by us "non-professionals".

j08691
  • 204,283
  • 31
  • 260
  • 272
Rhino
  • 49
  • 1
  • 3
  • You are looking at a [favicon tag](https://stackoverflow.com/questions/304317/does-mysql-index-foreign-key-columns-automatically) that's how you set the little icon in the address bar. – Ibu Mar 04 '20 at 20:47

2 Answers2

6

the tag returns an empty image without requesting the server.

you use it for speed reason: you avoid 1 server request, 1 data transfer, 1 layout/render browser calculation. For example, I have a one static HTML, which size is 10ko including only 1 server request. My site icon is 9ko. and I don't want to multiply by 2 the request et the transfer size.

Nicolas FAURE
  • 61
  • 1
  • 2
4

From MDN:

The rel stands for "relationship", and is probably one of the key features of the element — the value denotes how the item being linked to is related to the containing document. As you'll see from our Link types reference, there are many different kinds of relationship.

From your question, the data is likely pointing to a base64 encoded value which will render as the favicon for the website. You can base64 encode values for other elements as well, such as in this example:

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7">

What is href='data: ?

Well, href is a hypertext reference. Typically, you'll see the value of href pointing to a path to a file or link, such as:

<a href="some-page.html">

But it can point to an encoded image. The way you represent an encoded image is with data. So we're asking the browser to associate the href with an image we're creating inside data:.

Example Icon Structure

Here is a sample structure you can follow for base64 encoding an icon. As @agrm pointed out a comment, you'll need to specify the mediatype as well.

<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF/QA6OjoAKysrABwcH" />
Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
  • Yes I have seen favicon.ico line such as: – Rhino Mar 04 '20 at 21:19
  • @Rhino Does my answer provide a solution for you? If so, please accept it :) – Andy Hoffman Mar 04 '20 at 21:21
  • Oops hit enter too early. I have seen favicon.ico lines such as : but please bare with me and explain the " href='data:," part..... – Rhino Mar 04 '20 at 21:22
  • 2
    The data url format is `data:,`. The icon you have seen (`data:,`) has no media type or data given, which means it will be an empty icon. – agrm Mar 04 '20 at 21:41
  • Ok, so the line does not do anything on its own ?? (it needs a base64 encoded data sring to actually show a favicon) ?? (The program line comes from cut n' paste of another html program, thats why I don't know how it works ). So if i manage to produce a base64-encoded favicon code string, should this string be placed right after the "data:" part of the line ?? – Rhino Mar 04 '20 at 21:47
  • Oh you are really fast in answering my questions. During the time I am struggling in writing the questions, you have already sent me the answers.... Thank you all for being so helpful !!!! – Rhino Mar 04 '20 at 21:52
  • @Rhino I added a more complete example you can follow, which contains a `mediatype`. Please accept my solution if you're happy with it. – Andy Hoffman Mar 04 '20 at 22:01
  • I've just added my first (working) base64-encoded favicon to my project thanks to you guys. I wrote my question, went for a cup of coffee, and when I came back the answers were already there, stackoverflow seems like a fantastic forum. Thank you all... – Rhino Mar 04 '20 at 22:13
  • @Rhino Just curious why you removed my answer as the selected solution. – Andy Hoffman Mar 05 '20 at 10:51
  • Hmm, as far as I know I have not removed anything. My problem is that i'm new to stack owerflow, so i might have done something by mistake, (definitely not deliberately). As I mentioned earlier i am very grateful for all the help I got from you, You wanted me to accept your solution, which i thought i did by clicking the green arrow ?? Please advise if this is the wrong way of accepting.... – Rhino Mar 07 '20 at 14:19
  • @Rhino Clicking the upward facing arrow will upvote the answer, but clicking the check mark beneath the downward facing arrow selects the answer as the solution. – Andy Hoffman Mar 08 '20 at 01:09