SVGをそのままファビコンとして埋め込む
<link rel="icon" href="data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='red'/></svg>" type="image/svg+xml">
<link rel="icon" href="data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='%23ff0000'/></svg>" type="image/svg+xml">
ポイント:
# → %23
" → %22(属性値の中で使うなら ' で囲むとエスケープ不要になることも)
スペース → %20(気をつけるべきは「属性値の中」と「テキストノードの中」のスペース。それ以外の構文上のスペースは、そのままで大丈夫。)
なので、viewBox='0 0 100 100' の中のスペース
0 0 100 100 → 0%200%20100%20100 にするのが安全!