SVGで「Favicon(ファビコン)」を作成

ブラウザのタブやブックマークに表示される「Favicon(ファビコン)」は、ウェブサイトを印象づける重要な要素です。そんなファビコンを作成しウェブサイトに表示させる最新の方法について、フロントエンドエンジニアのAndrey Sitnik氏が解説しています。

拡大/縮小が自在なベクター画像である「SVG画像」をファビコンとして用いることを推奨。

最後に、ファビコンに含まれる不要なデータ削除や減色処理を行います。Sitnik氏は最適化に利用するソフトウェアとして、SVG画像にはSVGOを、PNG画像にはSquooshをすすめています。

— 読み進める gigazine.net/news/20201225-how-to-make-favicon/

いつの間にやらFaviconがSVGに対応していたようです。

全然知らなかったのですが、勉強になります。

但し記事にもある通り、最小16×16ピクセルで思い通りに見えるかは重要なポイントですね。ファビコンはあまり作りませんが、CADのオリジナルマクロアイコンはバンバン作ります。

自分用なので、最後は文字を画像化だけだったりですが。それでも見えるようにするのは難しいです。