ファビコン(favicon)の作り方!ツールも紹介します【WordPress】

しゅーたろーです。

・ ファビコンって何?
・ どうやって作るの?

そんな悩みに答えます。
僕が作成した事例も紹介していきます!

本記事の内容はWordPress使用者向けとなっています。

ファビコン(favicon)の作り方!ツールも紹介します【WordPress】

ファビコン(favicon)とは

ざっくり言えばサイトのシンボルマークのことです。
サイトアイコンと言ったりもします。

作成するメリットは以下です。

・ 検索でクリックされやすい
・ サイトを覚えてもらいやすい

以下はTwitterのfaviconです。googleの検索一覧でリンクの上部に出てきていますね!

Twitterのfavicon

ここだけでなく、ブラウザのタブ等様々な場所に表示されます。

faviconが未設定だとデフォルトのマークが表示されるのですが、インパクトに欠けてしましまいます。アクセス数UPにもつながるので是非作成しましょう!

作成に使用したツールについて

ぶっちゃけ絵をかければなんでも良いです。

僕はCanvaというデザインツールで作成しました。
有料版を使用していますが、無料でも問題ないです!

Canvaの公式ページ

画像サイズとファイル形式について

僕は以下のルールで作成しました。

・ 512 × 512 ピクセル以上の正方形にする
・ png形式で保存する

faviconは「.ico」というファイル形式で作成することが推奨されていますが、WordPressに関してはバージョン4.3以降であれば、この形式でなくても大丈夫です。

作ってみよう

早速作っていきます。

まずはデザインの大枠を決めますが、以下を意識しましょう。

・ シンプルなデザインにする
・ インパクトを持たせる

ファビコンはとっても小さいです。
目に留まり、インパクトのあるデザインを目指しましょう。

僕はこんな風につくってみました!

作成したファビコン

センスは置いておいて、とりあえずこれでいきます。笑

png形式のファイルでは画像の背景を透過させることができます。透過しないと背景が白色で縁取られるため、透過をお勧めします。好みに合わせて選択してください!

Canvaではダウンロード時に透過させるかどうかを選択することができます。

透過を選択する

WordPressに反映させよう

このブログは「THE THOR」というテーマを使用していますが、以下に項目がありました。

外観 > カスタマイズ > サイト基本情報 > サイトアイコン

アップロードして完了です。

512pxの正方形で作成しましたが、WordPress内部でサイズの違うfaviconが自動で生成されています!

faviconでサイトに個性をつけよう

今回はfaviconを作成するメリットと、作成方法について解説しました。

  •  favionはサイトのシンボルマーク。適切に作成すればPVアップも狙える
  •  作成ツールはCanvaがオススメ
  •  WordPressであれば、512px以上の正方形でアップロードすればよい

みなさんも独自のセンスでデザインしてみてください。
favicon作成を通じて、僕のセンス皆無であることが判明いたしました!

今回は以上です。