[IDEA] Use PNG favicon instead of ICO on tiddlywiki.com and related sites

[mateuszwilczek]

Is your feature request related to a problem? Please describe. The favicons used on tiddlywiki.com and related sites (prerelease, dev, upgrader, links), implemented using tiddler $:/favicon.ico, are in uncompressed ICO format. This causes them to be bloated and causes minor compatibility issues. The ICOs contain an inconsistent amount of embedded sizes:

site	16	32	48	64	128
tiddlywiki.com	✔	✔		✔	✔
dev, static	✔	✔
prerelease	✔	✔	✔	✔	✔
upgrader		✔		✔

I have looked at the files located here in this repo.

Describe the solution you'd like Use PNG favicons instead. This format has support on all major browsers, superseeding that of ICO or SVG. I suggest 192x192 size, but see additional context below.

Describe alternatives you've considered

• Leave as is (ICO with multiple embedded sizes, without compression)
  • Bloated icon size, e.g. 120 kB for prerelease.
  • Not displayed on Chrome/iOS (I don't know if this is issue with TW's implementation of ICO favicons, or with the browser; the second would be strange, because both Chrome on other platforms and iOS Safari engine support it).
  • No relevant advantage over PNG - ICO's only advantage over PNG is ability to store images in multiple sizes, including specifically pixel-adjusted small versions like 16x16. From what I have seen, this is not put to use or does not make much difference in case of the tiddlywiki.com favicon. The ICO (containing a 16x16 version) is only marginally more sharp than 128x128 PNG rescaled by the browser. I guess the 16x16 version wasn't in any way adjusted for 16x16, but exporting it from vector source in this resolution is marginally sharper than rescaling a 128x128 PNG.
• Compressed ICO
  • Using PNG compression inside the ICO causes the file to be around 10x lighter, e.g. tiddlywiki.com favicon is reduced from 100 kB to 10 kB, but
  • Not supported on Safari/macOS and on iOS.
• SVG
  • Technically ideal in terms of file size/ quality ratio, but
  • Not supported on Safari/macOS, iOS, and on Firefox/Android.

Additional context The favicon support on different browsers and platforms is a mess. Ideal representation on all browsers/platforms requires a couple of files in various formats and accompanying declarations/manifest. This is neither achievable using only $:/favicon.ico mechanism, nor really necessary IMO.

In our case, I think PNG is the best compromise:

• the widest compatibility,
• reasonable file size (much better than uncompressed ICO, only slightly more than SVG),
• decent quality (marginally worse than ICO for small sizes; obviously worse than SVG for much larger sizes, but these are rarely needed for a favicon).

From what I have read, the 192x192 size seems to be the largest one widely used by various browsers. A PNG of these dimensions would still weigh much less than the current uncompressed ICO.

I'm ready to help in creating the proposed PNG favicons. I have created an issue instead of PR, because:

• I would like a confirmation that my proposal makes sense first.
• I don't know what would be the correct way to make PR (change files in https://github.com/Jermolene/TiddlyWiki5/tree/34bc9c72c65200c6036ce6cb6ed40998900e8a06/editions/tw5.com/tiddlers/_tw_shared/favicons, push new $:/favicon.ico to tiddlywiki-com branch?).
• If a resolution larger than the existing 128x128 is chosen for the new PNGs, it would be easier to work on an existing vector source, which I couldn't find (it's easy to recreate though).

---

Edit: I know it's a low priority issue, but it's easy to solve, and I think tiddlywiki.com should give a good example.

[pmario]

I found this link to a blog-post Definitive edition of "How to Favicon in 2021" linked from caniuse-com PNG favicons

It talks about the "mess" which has to be considered using favicons.

There is one more thing that we have to consider. The TW favicon.ico is a tiddler, that is defined dynamically at startup

So technically there is no real need for a favicon file on a server. The html file will have a default one.

Edit: There seems to be a need. So we should have one

[pmario]

I think the favicon functionality has been developed to a state that works OKish and has never been touched since. May be except to fix major browser changes that broke something.

[mateuszwilczek]

Just so it's clear, my intention was to change the files used in tiddlywiki.com and co., to give a better example on how to use favicons in TW, and to show that a PNG is usually a good solution, and that the "strage" ICO format is not necessary. In any case, I think https://tiddlywiki.com/#Setting%20a%20favicon should contain a little more information on the supported formats, I'll work on that when the issue at hand will be settled.

I did not mean that there need to be changes to the core about how it handles favicons. I agree that the current functionality of $:/favicon.ico is sufficient. And if someone would really want to address "the browser support mess" using many favicon files, then I guess it would be possible with raw markup.

[pmario]

In the OP you wrote we may be able to decrease the html file size by about 90kB. If so, we should do that. We only need to make sure, that our build process also knows about that.

See: https://github.com/Jermolene/TiddlyWiki5/blob/34bc9c72c65200c6036ce6cb6ed40998900e8a06/editions/tw5.com/tiddlywiki.info#L39-L41