1年かけてつくってきた個人のWEBサイトですが、そろそろ公開できそうなところまできたので、「サイトの公開前にすること」と検索して抜けをチェックしてみた。そしたら、「1. faviconを用意する」と出てきて、いきなり抜けを発見。
急遽、faviconづくりを開始する。ただ、つくっているWEBサイトには、サイト名はあるけどロゴをつくって入れる予定もなく、faviconにする素材がない状態。
まずは、favicon素材づくり。サイトのロゴっぽいのを考えました。
まあ、とりあえずのfaviconなので、シンプルにこれにしました。
最近のfaviconは、favicon.icoではなく、favicon.svgで良いそうです。
まあ、<head>内で、favicon.svgを指定する必要はありますが。
ただ、svgに対応していないブラウザでは、icoも必要なので32pxのfavicon.icoをルートディレクトリに一応置いておいたほうが良いらしい。
favicon.svgは、ダークモードに対応しておいたほうが良いらしい。なので、svgをテキストエディタで開き、@media (prefers-color-scheme: dark) {}を追加した。
イラレでSVG保存したファイルをテキストエディタで開くとこんな感じ。4角形が3枚のsvgなので、かなりシンプルです。
<?xml version="1.0" encoding="UTF-8"?>
<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<style>.b{fill:#ccc;}.b,.c,.d{stroke-width:0px;}.c{fill:#999;}.d{fill:#eee;}
@media (prefers-color-scheme: dark) {}
</style>
</defs>
<polygon class="b" points="275 66.67 150 108.33 150 275 275 233.33 275 66.67"/>
<polygon class="c" points="25 66.67 150 108.33 150 275 25 233.33 25 66.67"/>
<polygon class="d" points="25 66.67 150 25 275 66.67 150 108.33 25 66.67"/>
</svg>ただ、やってみたが、ダークモードで特に変更したい場所がなく、この作業はいらなかったかも。
あと、apple-touch-ico用の180pxのicon.pngもついでに用意して、とりあえず完成。
次は、OGPってのをつくらないと。faviconは数年前につくったサイトでつくったことがあったが、OGPってのは今回始めてなので、もう少し調べないと。
