[Enhancement] Custom favicon different from tiddlywiki.com

[mateuszwilczek]

As discussed in this Talk TW thread, I have prepared the favicon for the PR Maker. Here is an archive with different versions of the file:

prmaker-favicon.zip

• prmaker.ico - intended for use in wiki, has embedded 16, 32, 64, and 128px sizes, same as the original favicon on tiddlywiki.com. I used png compression (brings size down from about 90k to 10k). GIMP warns it may not be compatible with older software, but all the browsers I tested it on seem fine with it.
• prmaker-src.svg - source file with various hidden groups of elements, for easier editing and easier export of necessary png files.
• prmaker.svg - a cleaner version, without the hidden elements, but not cleaned from Inkscape's metadata.
• prmaker-*.png - different sizes necessary to create ico.

A preview of the favicon:

It might be useful to store the other formats, especially the prmaker-src.svg, for eventual edits or creating bitmaps in additional sizes in the future. I don't know what would be the right place for all those files in this repo, please move them accordingly.

[pmario]

Most browsers should be fine with an SVG as a favicon.ico file. So no PNGs needed anymore.

[mateuszwilczek]

According to caniuse.com all major browsers except for Safari (both macOS and iOS, the latter implies all other iOS browsers) and Firefox for Android support SVG favicons. Mobile browsers are not a concern in case of PR maker, I think. Question is if we care about Safari.

An advantage of ICO other than the widest compatibility is the ability to provide exact bitmap for specific sizes, e.g. 16px (used in desktop browsers' tabs on standard pixel density screens), which can be made a little sharper than the rescaled SVG.

The first one in the example is my ICO, the second is SVG, screenshot made on Edge/Windows. The difference would be a little more apparent in Firefox/Windows, as it tends to render the ICOs more sharply.

This marginal difference in sharpness is not enough of a reason on its own to stick to ICO I think, but together with the wider compatibility, maybe. I'm just presenting arguments though, I do not have any strong preference towards any format in this case. If we decide we want to use SVG, I can clean it up from the Inkscape's metadata.

[pmario]

As far as I know, the TW favicon.ico is built with the TW build process as $:/favicon.ico which contains a single 128x128 PNG image. That image is assigned to the page by the TW startup process.

See: https://github.com/Jermolene/TiddlyWiki5/tree/34bc9c72c65200c6036ce6cb6ed40998900e8a06/editions/tw5.com/tiddlers/_tw_shared/favicons

So an SVG and a 128x128 PNG should be enough, since we do not have a build step for a "real" dot-ICO file, which contains different resolutions.

[mateuszwilczek]

The contents of the $:/favicon.ico and the tiddlywiki.com.ico file from the link are both in ICO format (tiddlywiki.com.ico.meta states type: image/x-icon), with embedded 16, 32, 64, and 128px sizes (I have opened it only with online tools now, e.g. https://redketchup.io/icon-editor, I don't have access to my PC atm). Whether the smaller embedded versions are in any way adjusted, or simply rescaled, I don't know. If they are simply rescaled, it makes no sense to use ICO, I think.

I didn't analyze it much initially. I simply made my ICO with the same embedded sizes as the original. My 16px png is adjusted for better sharpness (arrows moved 0.5px down to align with pixel grid), but the 32px and 64px versions are simply rescaled (exported from Inkscape at lower resolution).

[mateuszwilczek]

It appears the decision to use the ICO format was not the best one. As discussed in this issue about the favicons on tiddlywiki.com, it seems that a single PNG offers the widest compatibility and reasonable quality to file size ratio.

So the prmaker-128.png from the archive in OP is the only file really needed for the PR maker. The prmaker.ico is incompatible with Safari.