HTMLとSVGのファビコン用マークアップを生成する方法

ファビコン用素材を整える目的

Webサイトのタブなどで使うファビコン用に、HTMLのリンクマークアップとSVGマークアップをまとめて用意できます。SVGに表示する絵文字、背景色、文字色を指定でき、既存のアイコンURLをHTMLへ加える設定にも対応しています。サイトタイトルを入力できる場合でも、その文字列は生成されるマークアップの内容には反映されません。

入力項目を選んで生成する流れ

1. まず、SVG内に表示したい絵文字を入力します。絵文字を指定しないときは、レンチの絵文字が使われます。
2. SVGの背景色と文字色をそれぞれ指定してください。色を省略した場合、背景色は #2563eb、文字色は #ffffff になります。
3. 既存のアイコンを参照するリンクも用意したいときは、アイコンURL欄に空でない値を入力します。入力した値はHTMLエスケープされ、2つのアイコン用リンク要素に使われます。
4. サイトタイトル欄が表示される場合は、必要に応じて入力します。ただし、この値はSVGやHTMLの生成内容を変更しません。
5. 入力内容を確認して生成を実行し、表示されたHTMLマークアップとSVGマークアップを確認します。HTMLにはSVGをデータURIで参照するファビコン用リンクも含まれます。

色はファビコンの背景と文字の見た目を決めるため、組み合わせを先に考えてから入力すると結果を確認しやすくなります。アイコンURLを使わない構成なら、その欄を空のまま生成してください。

表示されたマークアップを確認する視点

生成結果では、SVGファビコンのマークアップと、それを参照するHTMLマークアップを別々に確認できます。指定した絵文字はSVG内のテキストとして扱われ、入力した背景色と文字色も同じSVGに反映されます。空でないアイコンURLを使った場合は、その値を含む追加のリンク要素がHTMLに現れます。

サイトタイトルが結果に見当たらなくても、生成が失敗したとは判断できません。この入力値はマークアップに利用されないためです。結果を使う前に、絵文字、2色、アイコンURLを意図した欄へ入れたかを照合し、必要なマークアップ部分を確認してください。

使用例

個人ブログのタブにコーヒーカップのファビコンを表示したい利用者が、絵文字と2色に加えて既存アイコンのURLを指定します。

個人ブログ用として、絵文字にコーヒーカップ、背景色に #f5f1e8、文字色に #3b2f2f、アイコンURL欄に既存アイコンのURLを入力して生成します。

生成結果にSVGマークアップとHTMLマークアップが含まれ、空でないアイコンURLを指定したため、その値を使う2つのアイコン用リンク要素もHTMLに含まれます。

制限事項

• サイトタイトルは生成マークアップに反映されず、アイコンURLは画像そのものではなくHTMLのリンク用マークアップに組み込まれる入力です。

よくある間違い

• アイコンURLを入力したつもりでも追加リンクが見つからない場合は、値が空になっていないかを確認し、空でない値を入れてからもう一度生成します。

よくある質問

アイコンURLは生成結果でどのように扱われますか？

空でないアイコンURLを指定すると、生成されたHTMLにその値を使う2つのアイコン用リンク要素が入ります。欄を空にした場合は、アイコンURLに対応する要素は追加されません。

サイトタイトルでファビコンの表示を変えられますか？

サイトタイトルを入力しても、ファビコンにその文字が表示されるわけではありません。タイトルの値はHTMLやSVGマークアップの生成内容には使われないためです。

入力を省略したときの絵文字と色は何ですか？

絵文字を空欄にするとレンチの絵文字が入り、色を指定しなければ背景色は #2563eb、文字色は #ffffff になります。