5分でサクッとfaviconを作成する手順
2020年06月14日
faviconとは
faviconとはブラウザのタブに表示される画像です。 例えばGoogleChromeではデフォルトではスクショのようにグレーの地球儀のロゴになっています。
画像サイズは16px × 16pxととても細かいです。
今回はこちらの画像を追加していこうと思います。
faviconを作成する
まずは元画像を用意する
faviconの元になる画像を作成します。 今回はcanvaで作成していきます。
お手軽にバナーなども様々な画像を作成できる無料のサービスなのでよく使用しています。
今回はテキストで作っていきたいと思います。
センスはともかくできました。
できた画像をfaviconに変換する
できた画像をこちらのツールにアップロードして変換します。
今回の変換にはこちらのファビコン作成ツールさんを利用させていただきます。 ファビコン作成ツール
ダウンロードしたzipファイルを解凍すると16x16サイズのfaviconが作成できます。
完成！！
ちっさい！ なんだかこの感じ、高校生時代のガラケー時代の絵文字を思い出しました笑
実際のサイトに適用するとこんな感じです。
2文字までならなんとか読めるサイズになりますね。
自分の場合は最低限でよかったのでこんな感じですが
ロゴが作れる方や絵が良い方は恋ってみるのもありだと思います。
最近ではSVGでのfaviconの作成も可能になっているので次はそちらも試してみたいと思います。
最後までお読みいただきありがとうございました。