favicon.svg with base64 encoded .ttf font file doesn't display text in Chrome, works in Firefox
Question
My favicon.svg displays in Firefox, but not Chrome:
<!DOCTYPE html>
<html lang="en">
<title>Title</title>
<meta charset="UTF-8">
<style>
@font-face {font-family: "MyFont";src: url(MyFont.ttf) format("truetype");}
</style>
<link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml">
</html>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<style>
@font-face {
font-family: 'MyFont';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMpFSh68AAAGIAAAAYFZETVhmsG54AAAB6AAABeBjbWFwAAwAlAAAB8gAAAA0Z2x5ZpGeXWAAAAC8AAAAQGhlYWT5D/2eAAABJAAAADZoaGVhB+4EHwAAAWQAAAAkaG10eAetAJYAAAFcAAAACGxvY2EAIAAAAAABHAAAAAZtYXhwAAYANwAAAPwAAAAgbmFtZR+qOZYAAAf8AAABmHBvc3T/bQBkAAAJlAAAACAAAgBSAAAEeQPoAAcADQAAJSEHIwEzASMBIQEnIwcDpf2Bd10B4GgB31z9KwI7/vYRBhP//wPo/BgBSAI6JSsAAAEAAAACADYAAwAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAABAAAAAQAA7CgSEV8PPPUACQgAAAAAAMpme5sAAAAAypc3xwAz/+oEwgVUAAAACQACAAAAAAAAAukARATEAFIAAQAAAu7/BgAJBRQAMwACBMIAAQAAAAAAAAAAAAAAAAAAAAIAAwR+AZAABQAEBZoFMwAAAR8FmgUzAAAD0QBmAgAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAcHlycwBAAEEAQQYA/gAAAASwABYAAAABAAAAAAPoBXgAAAAgAAAAAAABAAEBAQEBAAwA+Aj/AAgABf//AAkABv//AAoABv//AAsAB///AAwACP//AA0ACP//AA4ACf//AA8ACf//ABAACv//ABEACv//ABIAC///ABMADP//ABQADP//ABUADf//ABYADf//ABcADv//ABgAD///ABkAD///ABoAEP//ABsAEP//ABwAEf//AB0AEf//AB4AEv//AB8AE///ACAAE///ACEAFP//ACIAFP//ACMAFf//ACQAFv//ACUAFv//ACYAF///ACcAF///ACgAGP//ACkAGf//ACoAGf//ACsAGv//ACwAGv//AC0AG///AC4AG///AC8AHP//ADAAHf//ADEAHf//ADIAHv//ADMAHv//ADQAH///ADUAIP//ADYAIP//ADcAIf//ADgAIf//ADkAIv//ADoAIv//ADsAI///ADwAJP//AD0AJP//AD4AJf//AD8AJf//AEAAJv//AEEAJ///AEIAJ///AEMAKP//AEQAKP//AEUAKf//AEYAKv//AEcAKv//AEgAK///AEkAK///AEoALP//AEsALP//AEwALf//AE0ALv//AE4ALv//AE8AL///AFAAL///AFEAMP//AFIAMf//AFMAMf//AFQAMv//AFUAMv//AFYAM///AFcAM///AFgANP//AFkANf//AFoANf//AFsANv//AFwANv//AF0AN///AF4AOP/+AF8AOP/+AGAAOf/+AGEAOf/+AGIAOv/+AGMAO//+AGQAO//+AGUAPP/+AGYAPP/+AGcAPf/+AGgAPf/+AGkAPv/+AGoAP//+AGsAP//+AGwAQP/+AG0AQP/+AG4AQf/+AG8AQv/+AHAAQv/+AHEAQ//+AHIAQ//+AHMARP/+AHQARP/+AHUARf/+AHYARv/+AHcARv/+AHgAR//+AHkAR//+AHoASP/+AHsASf/+AHwASf/+AH0ASv/+AH4ASv/+AH8AS//+AIAAS//+AIEATP/+AIIATf/+AIMATf/+AIQATv/+AIUATv/+AIYAT//+AIcAUP/+AIgAUP/+AIkAUf/+AIoAUf/+AIsAUv/+AIwAU//+AI0AU//+AI4AVP/+AI8AVP/+AJAAVf/+AJEAVf/+AJIAVv/+AJMAV//+AJQAV//+AJUAWP/+AJYAWP/+AJcAWf/+AJgAWv/+AJkAWv/+AJoAW//+AJsAW//+AJwAXP/+AJ0AXP/+AJ4AXf/+AJ8AXv/+AKAAXv/+AKEAX//+AKIAX//+AKMAYP/+AKQAYf/+AKUAYf/+AKYAYv/+AKcAYv/+AKgAY//+AKkAZP/+AKoAZP/+AKsAZf/+AKwAZf/+AK0AZv/+AK4AZv/+AK8AZ//+ALAAaP/+ALEAaP/+ALIAaf/+ALMAaf/+ALQAav/+ALUAa//+ALYAa//+ALcAbP/+ALgAbP/+ALkAbf/+ALoAbf/+ALsAbv/9ALwAb//9AL0Ab//9AL4AcP/9AL8AcP/9AMAAcf/9AMEAcv/9AMIAcv/9AMMAc//9AMQAc//9AMUAdP/9AMYAdf/9AMcAdf/9AMgAdv/9AMkAdv/9AMoAd//9AMsAd//9AMwAeP/9AM0Aef/9AM4Aef/9AM8Aev/9ANAAev/9ANEAe//9ANIAfP/9ANMAfP/9ANQAff/9ANUAff/9ANYAfv/9ANcAfv/9ANgAf//9ANkAgP/9ANoAgP/9ANsAgf/9ANwAgf/9AN0Agv/9AN4Ag//9AN8Ag//9AOAAhP/9AOEAhP/9AOIAhf/9AOMAhv/9AOQAhv/9AOUAh//9AOYAh//9AOcAiP/9AOgAiP/9AOkAif/9AOoAiv/9AOsAiv/9AOwAi//9AO0Ai//9AO4AjP/9AO8Ajf/9APAAjf/9APEAjv/9APIAjv/9APMAj//9APQAj//9APUAkP/9APYAkf/9APcAkf/9APgAkv/9APkAkv/9APoAk//9APsAlP/9APwAlP/9AP0Alf/9AP4Alf/9AP8Alv/9AAAAAgAAAAMAAAAUAAMAAQAAABQABAAgAAAABAAEAAEAAABB//8AAABB////wAABAAAAAAAAAAcAWgADAAEECQAAAD4AAAADAAEECQABACQAPgADAAEECQACAA4AYgADAAEECQADADwAcAADAAEECQAEADQArAADAAEECQAFACoA4AADAAEECQAGADQBCgBGAG8AbgB0ACAAZABhAHQAYQAgAGMAbwBwAHkAcgBpAGcAaAB0ACAARwBvAG8AZwBsAGUAIAAyADAAMQAxAEEAbgBkAHIAbwBpAGQAQwBsAG8AYwBrAC0ATABhAHIAZwBlAFIAZQBnAHUAbABhAHIARwBvAG8AZwBsAGUAOgBBAG4AZAByAG8AaQBkAEMAbABvAGMAawAtAEwAYQByAGcAZQA6ADIAMAAxADEAQQBuAGQAcgBvAGkAZABDAGwAbwBjAGsALQBMAGEAcgBnAGUAIABSAGUAZwB1AGwAYQByAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAwADAAMAAwADsAIAAyADAAMQAxAEEAbgBkAHIAbwBpAGQAQwBsAG8AYwBrAC0ATABhAHIAZwBlAC0AUgBlAGcAdQBsAGEAcgADAAAAAAAA/2oAZAAAAAAAAAAAAAAAAAAAAAAAAAAA)
format('truetype');
}
</style>
</defs>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="MyFont">A</text>
</svg>
When loaded directly, the above image loads as expected in both Chrome and Firefox. However, when loading the above html, the icon only appears in Firefox, the icon doesn't appear in Chrome. What have I gotten wrong?
favicon.svg uses a base64 encoded .ttf font file, which I minimised: pyftsubset AndroidClock.ttf --unicodes=U+0041 --output-file=/tmp/a.ttf && base64 /tmp/a.ttf > /tmp/t . The image is then constructed from letter A of that font.
Google Chrome 85.0.4183.121 (Official Build) (64-bit) and Firefox 80.0 (64-bit) on Linux.
1 answers
solution1
1 2020-10-21 09:15:08
This is definitely a Chrome bug, but I discovered a workaround: the webfont in the favicon works if you also include the same SVG in an <img> tag, even a hidden one.
<img src="favicon.svg" style="display: none">
(If you then remove the <img> tag, it keeps working anyway until you exit Chrome, which made this frustrating to debug.)
I've filed this as Chromium bug 1140920 .
You probably also want to correct data:font/truetype;charset=utf-8;base64, to data:font/ttf;base64, , since font/truetype isn't a valid MIME type and font/ttf doesn't have a charset.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.