この道具の仕組み
64×64のSVGへ選択形状と最大2文字を中央配置し、HTMLのlinkタグで使えるdata URLも生成します。
入力と結果の例
入力例
- 入力
- 日 / 緑 / 角丸
- 結果
- 64×64 SVGとlinkタグ
使う前に知っておくこと
- 01写真・既存画像からの変換ではなく文字ベースのfavicon生成です。
- 02小さい表示で読めるか実機で確認してください。
favicon生成
favicon生成は、文字と色から、拡大しても鮮明なSVG faviconと設置タグを作ります。 入力内容はこの端末のブラウザ内で処理し、結果と前提を同じ画面で確認できます。
入力はブラウザ内で処理登録不要最終検証 2026.07.15
入力する
見えている項目だけで使えます。
結果を見る
入力すると、すぐに更新されます。
favicon SVGと設置タグ1 文字
faviconプレビュー
生成コードを見る
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>日 favicon</title><rect x="2" y="2" width="60" height="60" rx="14" fill="#267a71"/><text x="32" y="33" dy=".34em" text-anchor="middle" font-family="system-ui,sans-serif" font-size="34" font-weight="700" fill="#ffffff">日</text></svg> <link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Ctitle%3E%E6%97%A5%20favicon%3C%2Ftitle%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2260%22%20height%3D%2260%22%20rx%3D%2214%22%20fill%3D%22%23267a71%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2233%22%20dy%3D%22.34em%22%20text-anchor%3D%22middle%22%20font-family%3D%22system-ui%2Csans-serif%22%20font-size%3D%2234%22%20font-weight%3D%22700%22%20fill%3D%22%23ffffff%22%3E%E6%97%A5%3C%2Ftext%3E%3C%2Fsvg%3E" type="image/svg+xml">
SVGをfavicon.svgとして保存するか、生成したdata URLのlinkタグをheadへ置けます。