・0 pv・6 min read
HTML内のSVGでfavicon
HTML内の情報のみでfaviconを定義する方法です。基本的にはlinkタグのhrefにdataスキームでSVGを設定をします。URLエンコードしても良いです。
このように、直接SVGのタグを指定できます。改行もできますので、SVGの文法さえわかれば自由自在。絵文字もUTF-8のコードがわかれば使えます。デフォルトのサイズは32x32のようです。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<link id="icon_link" rel="icon" type="image/svg/xml"
href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">
<text x="2" y="27" font-size="26">😃</text></svg>' />
.....この例では、ボタンを押すと、HTML内に記載したタグから、SVGのパス情報を再生して、URLエンコードして設定する処理を行うようになっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link id="icon_link" rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20width=%2224%22%20height=%2224%22%20xmlns=%22http://www.w3.org/2000/svg%22%20%3E%3Cpath%20d=%22M5%205H19V19H16L16%208H5V5Z%22%20fill=%22currentColor%22%20/%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M10%2019C12.7614%2019%2015%2016.7614%2015%2014C15%2011.2386%2012.7614%209%2010%209C7.23858%209%205%2011.2386%205%2014C5%2016.7614%207.23858%2019%2010%2019ZM10%2016C11.1046%2016%2012%2015.1046%2012%2014C12%2012.8954%2011.1046%2012%2010%2012C8.89543%2012%208%2012.8954%208%2014C8%2015.1046%208.89543%2016%2010%2016Z%22%20fill=%22currentColor%22%20/%3E%3C/svg%3E">
<script>
window.addEventListener('load', ()=>{
document.getElementById("button").addEventListener('click',()=>{
let svg_content = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" >'
const xs = new XMLSerializer()
for(cn of document.getElementById("gg-add-r").childNodes){
if(cn.tagName == 'path'){
svg_content += xs.serializeToString(cn)
}
}
svg_content += "</svg>"
document.getElementById("icon_link").href = "data:image/svg+xml,"+encodeURI(svg_content)
})
})
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="gg-abstract" width="24" height="24" viewBox="0 0 24 24" fill="none" ><path d="M5 5H19V19H16L16 8H5V5Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M10 19C12.7614 19 15 16.7614 15 14C15 11.2386 12.7614 9 10 9C7.23858 9 5 11.2386 5 14C5 16.7614 7.23858 19 10 19ZM10 16C11.1046 16 12 15.1046 12 14C12 12.8954 11.1046 12 10 12C8.89543 12 8 12.8954 8 14C8 15.1046 8.89543 16 10 16Z" fill="currentColor" /></symbol>
<symbol id="gg-add-r" width="24" height="24" viewBox="0 0 24 24" fill="none" ><path d="M12 6C12.5523 6 13 6.44772 13 7V11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H13V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V13H7C6.44772 13 6 12.5523 6 12C6 11.4477 6.44772 11 7 11H11V7C11 6.44772 11.4477 6 12 6Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M5 22C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5ZM4 19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5C4.44772 4 4 4.44772 4 5V19Z" fill="currentColor" /></symbol>
</svg>
<!-- First copy all.svg to your project directory -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" ><use xlink:href="#gg-add-r"/></svg>
<button id=button>
change icon
</button>
</body>
</html>㊙︎の例
<link id="icon_link" rel="icon" type="image/svg/xml" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15" style="fill:none;stroke:red" />
<text x="4" y="25" fill="red" font-size="24">秘</text>
</svg>'>
色をRGBで指定したい場合は＃で始めるとダメかもしれません。rgb(100,90,8)のフォーマットを使うのが無難
表示例：SVGならな自由にできますが、アニメーションにしても動きません。
<svg xmlns="http://www.w3.org/2000/svg" >
<circle cx="16" cy="16" r="16" />
<path d="M0 0 L32 16 L0 32 Z" style="fill:rgb(50,205,50)" />
<polygon points="10 10 10 20 20 20" style="fill:green;stroke:aqua;stroke-width:3" />
<text x="0" y="16" fill="red">あ</text>
</svg>