WordPressでのファビコンの作り方や例などファビコンの全てを解説

ブログを始める
かんまる
かんまる

こんにちは!大学生ブロガーのかんまるです!


この記事では、WordPressブログ初心者の方に向けて、ファビコン作り方など、ファビコンの全てを解説しています。

この記事で解説していること

  • そもそもファビコンとは?
  • ファビコンの作り方
  • ファビコンの設定方法
  • 誰でも真似できるファビコンの例
  • ファビコンを自作するのが難しい場合


この記事を見れば、自分だけのファビコンを手に入れることができますよ!

関連記事:誰でも簡単にできるWordPressブログのアイキャッチの作り方
関連記事:困ったら真似できるブログのアイキャッチの例を4つ紹介します

そもそもファビコンとは

ファビコンとは?


そもそもファビコンとは、サイトのシンボルマークとして設置するアイコンのことです。
英語でfavicon、favorite iconの混合語です。

ファビコンの表示例1

ファビコンは主にブラウザのタブやブックマークに表示されるため、非常に重要です。
ファビコンがあることで、複数のタブやブックマークの中から一目でサイトを区別することができます。

ファビコンの表示例2

また、iPhoneなどでサイトをホーム画面に追加した際に、アプリアイコンとしてこのファビコンが表示されます。

ファビコンに向いている画像、向いていない画像

ファビコンに向いている画像と向いていない画像


ファビコンは、以下のような画像が推奨されています。

・512 × 512px以上の正方形画像
・PNG形式の画像


上で見たように(また皆さんが普段見ているように)、ファビコンはかなり小さく表示されるので、一目で分かるようなシンプルな画像がいいですね。ファビコンのダメな例を紹介しておきます。

ファビコンダメな理由
特徴がなさすぎる。
文字が多すぎて読めない。
ただのフリー素材の切り抜き、なんの画像か分からない。
そもそも正方形ではない画像。歪んで表示される。


もちろん他サイトと被らないファビコンが望ましいです。そのためにファビコンは自作しましょう。
自分で作るのは不安という方は、記事後半の「ファビコンは自分で作れなくても大丈夫です」をご覧ください。


ファビコンだけでなく、記事に使う画像やアイキャッチ画像、サイトデザインの作成・編集をするのにPhotoShopは必須レベルなので、導入していない方は導入しておきましょう。月額980円でPhotoShopを使える「フォトプラン」がおすすめ。7日間の無料体験もしてますのでぜひ。

PhotoShopの無料体験はこちら!


ファビコンの作り方解説

ファビコンの作り方


ではファビコンの作り方を説明していきます。このパートで作るファビコンはこんな感じです。WordPressのアイコンを真似しました。

今回作るファビコン



ではPhotoShopで作成していきます。

PhotoShopのファイル設定

作成する画像のサイズは、ファビコンの推奨サイズである512 × 512pxに設定します。

楕円形ツールを選択

左のツールバーから「楕円形ツール」を選択して、キャンバスの好きな部分をクリックします。

正円を作成する

画像サイズに合わせて512 × 512pxの正円を作成します。

円の設定をする

位置を真ん中に配置し、「属性」欄から円の色や縁の設定をします。(縁の白色が見やすいように背景を一時的に黒にしています。)

テキストツールを選択

続いて文字を入力します。左のツールバーから「T」と書かれた横書き文字ツールを選択し、キャンバスをクリックして文字を入力します。

文字の設定を行う

文字」の欄からフォントや色などを設定します。

背景を消す方法

ファビコンでは基本的に背景を消しておくことをおすすめします。「レイヤー」欄の一番下にある背景を非表示にしておきましょう。

背景について

背景ありと背景なしの比較

正直好みの問題なのでどちらでもいいです。

書き出し方法

画像が作成できたので書き出していきます。上のメニューバーから「書き出し → 書き出し形式…」と進みます。

書き出し設定

ファビコンにはPNG形式が適していますので、ファイル設定の形式をPNGにしておきましょう。
背景が不要な場合は「透明部分」にチェックを入れておきます。

書き出しをクリックして書き出せばファビコン作成は終了です。

ファビコンの設定方法

ファビコンの設定方法


では作成した画像をWordPressブログファビコンとして設定していきましょう。
まず自分のWordPressにアクセスします。

WordPressにアクセス

左のメニューバーから「外観 → カスタマイズ」と進んでいきます。

サイト基本情報を選択

サイト基本情報」をクリックします。

サイトアイコンを選択して公開

サイトアイコンを選択」をクリックして先ほど作った画像を選択、右上の公開をクリックすればファビコンの設定は完了です!

誰でも作れるファビコンの例を6つ紹介します

ファビコンの例6つ


ここでは、簡単に作れるファビコンを6つ紹介します。
実際にファビコンとして設定した場合の表示も合わせて紹介しているので、イメージしやすいと思いますよ〜!

ファビコンの例1:文字単体

ファビコンブラウザでの表示アプリ形式
かんまる
かんまる

超シンプルに文字だけのファビコンです。背景なしの画像の場合、iOSの仕様から自動的に背景が黒くなります。


ファビコンの例2:文字 + 円

ファビコンブラウザでの表示アプリ形式
かんまる
かんまる

先ほど作ったタイプのファビコンです。WordPressのファビコンを模倣した作りになっています。


ファビコンの例3:文字 + 角丸四角形

ファビコンブラウザでの表示アプリ形式
かんまる
かんまる

例2の円を角丸四角形にしたタイプです。角丸の丸み具合については次の章で補足します。


ファビコンの例4:イラスト単体

ファビコンブラウザでの表示アプリ形式
かんまる
かんまる

フリー素材サイトからダウンロードしたアイコンに色をつけたものを使用しました。上の画像のように、iOSの仕様上アイコンの外枠が黒の場合、外枠が見えなくなるため、外枠は黒以外にすることをおすすめします。


関連記事:【保存版】ブログで本当に使えるフリーの画像素材サイト20選!

ファビコンの例5:イラスト + 円

ファビコンブラウザでの表示アプリ形式
かんまる
かんまる

例4のイラスト単体に円を組み合わせたタイプです。アイコン感がグッと増しますね。


ファビコンの例6:イラスト + 角円四角形

ファビコンブラウザでの表示アプリ形式
かんまる
かんまる

例5の円を角丸四角形にしたタイプです。例5に並んで、しっかりしたアイコン感があります。


ファビコンに角丸四角形を使う場合、どれくらいの丸みがいい?

角丸の丸みについて


例3や例6のように角丸四角形を使う場合、丸みはどれくらいにすべきなのでしょうか。
とりあえず丸みの一覧表を見てみましょう。

512 × 512pxの四角形に対して、角丸部分の半径を10px単位に見てみます。

0px(正方形)10px20px30px40px50px
60px70px80px90px100px110px
120px130px140px150px160px170px
180px190px200px210px220px230px
240px250px256px(正円)


角丸四角形感を出すなら50px〜180pxあたりが良さそうです。細かい調整は好みでOK。

ちなみに、iPhoneやiPadのアプリのアイコンにも(厳密には少し形が違いますが)角丸四角形が使用されています。
アプリのアイコンは512 × 512pxの四角形に対して、角丸の半径は112pxに(近い形に)なっています。ご参考までに。

ファビコンは自分で作れなくても大丈夫です

ファビコンを作れない場合


ファビコンを自分で作るのが難しいと言う人は、ココナラ ファビコンを作ってくれる人を探して作ってもらうのが一番手っ取り早いです。

ココナラとは、「このサービスをこれくらいの値段でやりますよ」という人が自分のスキルを出品し、そのサービスを買いたい人が購入することでサービスを受けられる仕組みになっています。


ココナラ内で「サイトアイコン」や「ファビコン」などのキーワードで検索すると、ファビコンを作ってくれる人に出会えると思います。
ココナラであれば、人によって異なりますが大体1000円〜10000円程度で高クオリティなファビコンを作ってもらえます。


まとめ:自分だけのファビコンを手に入れよう!


いかがでしたか?この記事ではファビコン作り方などを紹介してきました。


ぜひお気に入りのファビコンを設定して、あなただけのWordPressブログを作りましょう!


ブログをするならPhotoShopを導入しておきましょう。記事に使う画像やアイキャッチ画像、サイトデザインの作成・編集にめちゃくちゃ使います。月額980円でPhotoShopを利用できる「フォトプラン」がオススメ。7日間の無料体験も実施していますよ!

PhotoShopの無料体験はこちら!

コメント