しゅーたろーです。
・ どうやって作るの?
そんな悩みに答えます。
僕が作成した事例も紹介していきます!
ファビコン(favicon)の作り方!ツールも紹介します【WordPress】
ファビコン(favicon)とは
ざっくり言えばサイトのシンボルマークのことです。
サイトアイコンと言ったりもします。
作成するメリットは以下です。
・ サイトを覚えてもらいやすい
以下はTwitterのfaviconです。googleの検索一覧でリンクの上部に出てきていますね!
ここだけでなく、ブラウザのタブ等様々な場所に表示されます。
faviconが未設定だとデフォルトのマークが表示されるのですが、インパクトに欠けてしましまいます。アクセス数UPにもつながるので是非作成しましょう!
作成に使用したツールについて
ぶっちゃけ絵をかければなんでも良いです。
僕はCanvaというデザインツールで作成しました。
有料版を使用していますが、無料でも問題ないです!
画像サイズとファイル形式について
僕は以下のルールで作成しました。
・ png形式で保存する
faviconは「.ico」というファイル形式で作成することが推奨されていますが、WordPressに関してはバージョン4.3以降であれば、この形式でなくても大丈夫です。
作ってみよう
早速作っていきます。
まずはデザインの大枠を決めますが、以下を意識しましょう。
・ インパクトを持たせる
ファビコンはとっても小さいです。
目に留まり、インパクトのあるデザインを目指しましょう。
僕はこんな風につくってみました!
センスは置いておいて、とりあえずこれでいきます。笑
Canvaではダウンロード時に透過させるかどうかを選択することができます。
WordPressに反映させよう
このブログは「THE THOR」というテーマを使用していますが、以下に項目がありました。
外観 > カスタマイズ > サイト基本情報 > サイトアイコン
アップロードして完了です。
512pxの正方形で作成しましたが、WordPress内部でサイズの違うfaviconが自動で生成されています!
faviconでサイトに個性をつけよう
今回はfaviconを作成するメリットと、作成方法について解説しました。
- favionはサイトのシンボルマーク。適切に作成すればPVアップも狙える
- 作成ツールはCanvaがオススメ
- WordPressであれば、512px以上の正方形でアップロードすればよい
みなさんも独自のセンスでデザインしてみてください。
favicon作成を通じて、僕のセンス皆無であることが判明いたしました!
今回は以上です。