Can't set favicon using SVG code?

[Suzanne McHale]

I'm trying to change my TW's favicon as described at https://tiddlywiki.com/#Setting%20a%20favicon . I am using a svg code in the $:/favicon.ico tiddler, but setting it to image/svg+xml results in a blank favicon area, and to image/x-icon brings up a blank drawing canvas. What am I doing wrong? (SVG code below):

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 480 480" style="enable-background:new 0 0 480 480;" xml:space="preserve">
<g>
 <g>
 <path d="M392,0H88C65.92,0.026,48.026,17.92,48,40v216c0.026,22.08,17.92,39.974,40,40h109.392l-11.424,40H160v16h160v-16h-25.968
 l-11.424-40H392c22.08-0.026,39.974-17.92,40-40V40C431.974,17.92,414.08,0.026,392,0z M202.608,336l11.424-40h51.936l11.424,40
 H202.608z M416,256c0,13.255-10.745,24-24,24H88c-13.255,0-24-10.745-24-24v-16h352V256z M416,224H64V40c0-13.255,10.745-24,24-24
 h304c13.255,0,24,10.745,24,24V224z"/>
 </g>
</g>
<g>
 <g>
 <path d="M304,368H80c-4.418,0-8,3.582-8,8v96c0,4.418,3.582,8,8,8h224c4.418,0,8-3.582,8-8v-96C312,371.582,308.418,368,304,368z
 M296,464H88v-80h208V464z"/>
 </g>
</g>
<g>
 <g>
 <rect x="104" y="432" width="16" height="16"/>
 </g>
</g>
<g>
 <g>
 <rect x="104" y="400" width="16" height="16"/>
 </g>
</g>
<g>
 <g>
 <rect x="136" y="400" width="16" height="16"/>
 </g>
</g>
<g>
 <g>
 <rect x="168" y="400" width="16" height="16"/>
 </g>
</g>
<g>
 <g>
 <rect x="232" y="400" width="16" height="16"/>
 </g>
</g>
<g>
 <g>
 <rect x="200" y="400" width="16" height="16"/>
 </g>
</g>
<g>
 <g>
 <rect x="264" y="432" width="16" height="16"/>
 </g>
</g>
<g>
 <g>
 <rect x="264" y="400" width="16" height="16"/>
 </g>
</g>
<g>
 <g>
 <rect x="136" y="432" width="112" height="16"/>
 </g>
</g>
<g>
 <g>
 <path d="M368,368c-22.091,0-40,17.909-40,40v32c0,22.091,17.909,40,40,40c22.091,0,40-17.909,40-40v-32
 C408,385.909,390.091,368,368,368z M392,440c0,13.255-10.745,24-24,24s-24-10.745-24-24v-32c0-13.255,10.745-24,24-24
 s24,10.745,24,24V440z"/>
 </g>
</g>
<g>
 <g>
 <rect x="360" y="400" width="16" height="16"/>
 </g>
</g>
<g>
 <g>
 
 <rect x="181.737" y="120.139" transform="matrix(0.2751 -0.9614 0.9614 0.2751 50.7457 323.5759)" width="116.43" height="15.993"/>
 </g>
</g>
<g>
 <g>
 <path d="M197.12,94.144l-10.24-12.288l-48,40c-3.393,2.83-3.85,7.874-1.02,11.268c0.309,0.37,0.65,0.712,1.02,1.02l48,40
 l10.24-12.288L156.496,128L197.12,94.144z"/>
 </g>
</g>
<g>
 <g>
 <path d="M342.14,122.876c-0.309-0.37-0.65-0.712-1.02-1.02l-48-40l-10.24,12.288L323.504,128l-40.624,33.856l10.24,12.288l48-40
 C344.513,131.314,344.97,126.27,342.14,122.876z"/>
 </g>
</g>
</svg>

[Magnus]

I believe only FF and Safari can show svg as favicon - https://caniuse.com/#feat=link-icon-svg

[Suzanne McHale]

It does not show up even in the latest version of Firefox (64.0.2).

[TonyM]

Suzanne,

I think it has something to do with global favicon standards, the favicon must be png or jpg (maybe a few others but not svg as a rule). Use the Free Inkscape application to export an svg as a png, then import that and rename to $:/favicon.ico and it will work.

Regards

Tony

[Suzanne McHale]

That worked - thanks! :)

[Mohammad]

For your reference

https://kookma.github.io/TW-Scripts/#Tiddlywiki%20Favicon