Updated to support dark mode
Here’s another use for this trick : dynamic SVG favicon for your wiki ! You can make it so the color of the favicon change according to the current palette, or if the darkmode is enabled.
In a tiddler with the tag $:/tags/AboveStory :
<$vars palette={{{[{$:/info/darkmode}match[yes]then{!!dark}else{!!light}]}}} >
<$vars
svg={{$:/core/images/theme-button}}
fill={{{[<palette>getindex{SVG favicon!!color}match[inherit]then[foreground]else{SVG favicon!!color}]:reduce[<palette>getindex<currentTiddler>else<currentTiddler>]:reduce[<currentTiddler>is[blank]then[$:/palettes/Vanilla]getindex[foreground]else<currentTiddler>]+[search-replace[#],[%23]]}}}
>
<link
rel="icon"
type="image/svg+xml"
href={{{[[data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="]][<fill>][[" width="22pt" height="22pt">]][<svg>][[</svg>]]+[join[]]}}}
/>
</$vars>
</$vars>
With the fields
dark:$:/palettes/GruvboxDark
light:$:/palettes/Blanca
You set the color of the favicon with a field named “color”. Tiddlywiki will automatically provide a color picker, too. Neat !
Here I use the $:/core/images/theme-button, but you can of course use any svg you like.
It’s also possible to use emoji :
svg='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><text x="50%" y="50%" font-size="12" dominant-baseline="central" text-anchor="middle">😎</text></svg>'
and SVG animations :
svg='
<svg width="22pt" height="22pt" viewBox="0 0 128 128">
<rect x="10" y="10" width="100" height="100">
<animate attributeType="XML" attributeName="x" from="-100" to="120" dur="10s" repeatCount="indefinite"/>
</rect>
</svg>
'
Online demo : TiddlyTweaks — Small tweaks for TiddlyWiki
Note : This demo only support firefox (for now), to support the other major browser see https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df
EDIT : it does in fact works on chrome as well ! The issue was that chrome only accept favicons in the head tag.