faviconやバナーのSVG化について

以前から使っていたfaviconは、16×16ドットの荒いWindows Icon形式であったが、最近faviconにSVGを使うことができるらしいことを知った。 確か、Googleの新しいロゴのファイルサイズが小さくなったという記事を見て、SVGならファイルサイズを抑えて、綺麗なアイコンになるのではないかと思ったことから調べてみたのだった。 この記事を書いている段階ではFirefoxしか対応していないが、面白そうなのでSVG形式でアイコンを作ってみることにした。 一方で、iOS8までのSafariはfaviconを利用していないようで、今更ながらそうだったのかと気づいた。

オリジナルの「わ」アイコン。 わんぽえむの「わ」という、あまりひねりのないアイコンである（苦笑）。 Windows Icon形式のfaviconをPNG形式に変換し、さらに比較のため、128ピクセル幅へ拡大表示した（画像サイズは16ピクセル）。

上記Windows Icon形式から画像をinkscapeで取り込み、「わ」部分をパスに変換・調整してSVG形式にしたもの。 オリジナルのアイコンを作成した際に使用したファイル等は古いPCに入ったまま確認できないため、Web上のデータから再現を試みた。

オリジナルのサイトバナー。 作成当時に主流だった88×31ピクセルの画像になっている。 今回は比較のために176ピクセル幅に拡大してある。

faviconをSVGにしたので、調子に乗ってこちらもSVGにしてみた。 アイコン同様、オリジナルのバナーを作成した手順が不明なので、Web上のデータからinkscapeを使って再現を試みた。 「彩」の部分をカラフルにしてみた。

なお上記の公開用のファイルはSVGOのGUI版を用いてファイルサイズを削減している。 今回の場合、いずれもinkscapeで作成したファイルから50%以上減らすことができた。

なお、ナビゲーション用のアイコンもSVG形式に変更した。