Favicon in binary format

[Kristjan Brezovnik]

Hi!

Is there any way to have a favicon without an actual file? Namely, I want to use Eric's AttachFilePlugin.

I converted the file to binary form and created the appropriate tiddler. I also added the MIME type definition to AttachFileMIMETypes. The icon displays correctly inside a tiddler.

To MarkupPreHead, I added the following:

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

Locally, if the file is present, the icon displays correctly (though not in all browsers, but that's another story). Can this also be done without the actual file, with only the binary format?

(1) http://www.TiddlyTools.com/#AttachFilePlugin

Kristjan

[Dragon Cotterill]

Yes, instead of using the href to point to a URL, it can contain the image encoded as base64. Just use href="data:image/x-icon;base64, <base 64 data here>"

For example, in raw Javascript you can use:

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'data:image/x-icon;base64,<add your base 64 encoded image info here>';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

How do you get your base64 image? Plenty of sites will do it. Try https://www.base64-image.de/ Although I use CyberChef for all my data manipulation.

[Kristjan Brezovnik]

Yes! That worked. Except I used:

link.href = store.getTiddlerText("favicon.ico##data");

because the base64 image definition is in that tiddler.

However, this still requires a script. And while that is not necessarily a bad thing, I was wondering if there's a way to put it directly into the 'href' attribute of the 'link' element in MarkupPreHead tiddler.

Maybe something like:

<link rel="icon" href="javascript:store.getTiddlerText('favicon.ico##data');" type="image/x-icon" />

Kristjan

[Yakov]

Hi Kristjan,

this should be quite simple, try

<link href="data:image/x-icon;base64,your_base64_here" rel="icon" type="image/x-icon" />

Best regards,
Yakov.

[Kristjan Brezovnik]

Hi Yakov.

Yes, that works, of course, but I'm trying to avoid polluting MarkupPreHead, because the base64 string is quite long.:D

Kristjan

[Yakov]

Well, the thing is, favicon is supposed to be loaded much earlier than store is built and MarkupPreHead is one of those "low level" things that are loaded early. Besides, why you may bother of MarkupPreHead being "polluted"? :) I edit MarkupPreHead in the rarest occasions and almost never see its content, so putting some base64 there seems ok to me. If it makes editing less convenient, you can just move that tag to the end or the beginning of MarkupPreHead or consider adding overflow-x: scroll to the editor of MarkupPreHead.

[Kristjan Brezovnik]

Ah, thanks for the clarification. That certainly explains things.

Anyway, I have opted for a modified Dragon's approach instead.

Kristjan