この記事では、WordPressブログ初心者の方に向けて、ファビコンの作り方や例など、ファビコンの全てを解説しています。
- そもそもファビコンとは？
- ファビコンの作り方
- ファビコンの設定方法
- 誰でも真似できるファビコンの例
- ファビコンを自作するのが難しい場合
この記事を見れば、自分だけのファビコンを手に入れることができますよ！
そもそもファビコンとは
そもそもファビコンとは、サイトのシンボルマークとして設置するアイコンのことです。
英語でfavicon、favorite iconの混合語です。
ファビコンは主にブラウザのタブやブックマークに表示されるため、非常に重要です。
ファビコンがあることで、複数のタブやブックマークの中から一目でサイトを区別することができます。
また、iPhoneなどでサイトをホーム画面に追加した際に、アプリアイコンとしてこのファビコンが表示されます。
ファビコンに向いている画像、向いていない画像
ファビコンは、以下のような画像が推奨されています。
- 512 × 512px以上の正方形画像
- PNG形式の画像
上で見たように（また皆さんが普段見ているように）、ファビコンはかなり小さく表示されるので、一目で分かるようなシンプルな画像がいいですね。ファビコンのダメな例を紹介しておきます。
| ファビコン | ダメな理由 |
 |
特徴がなさすぎる。 |
 |
文字が多すぎて読めない。 |
 |
ただのフリー素材の切り抜き、なんの画像か分からない。 |
 |
そもそも正方形ではない画像。歪んで表示される。 |
もちろん他サイトと被らないファビコンが望ましいです。そのためにファビコンは自作しましょう。
自分で作るのは不安という方は、記事後半の「ファビコンは自分で作れなくても大丈夫です」をご覧ください。
ファビコンだけでなく、記事に使う画像やアイキャッチ画像、サイトデザインの作成・編集をするのにPhotoShopは必須レベルなので、導入していない方は導入しておきましょう。月額980円でPhotoShopを使える「フォトプラン」がおすすめ。7日間の無料体験もしてますのでぜひ。
ファビコンの作り方解説
ではファビコンの作り方を説明していきます。このパートで作るファビコンはこんな感じです。WordPressのアイコンを真似しました。
ではPhotoShopで作成していきます。
作成する画像のサイズは、ファビコンの推奨サイズである512 × 512pxに設定します。
左のツールバーから「楕円形ツール」を選択して、キャンバスの好きな部分をクリックします。
画像サイズに合わせて512 × 512pxの正円を作成します。
位置を真ん中に配置し、「属性」欄から円の色や縁の設定をします。（縁の白色が見やすいように背景を一時的に黒にしています。）
続いて文字を入力します。左のツールバーから「T」と書かれた横書き文字ツールを選択し、キャンバスをクリックして文字を入力します。
「文字」の欄からフォントや色などを設定します。
ファビコンでは基本的に背景を消しておくことをおすすめします。「レイヤー」欄の一番下にある背景を非表示にしておきましょう。
背景について
正直好みの問題なのでどちらでもいいです。
画像が作成できたので書き出していきます。上のメニューバーから「書き出し → 書き出し形式…」と進みます。
ファビコンにはPNG形式が適していますので、ファイル設定の形式をPNGにしておきましょう。
背景が不要な場合は「透明部分」にチェックを入れておきます。
書き出しをクリックして書き出せばファビコン作成は終了です。
ファビコンの設定方法
では作成した画像をWordPressブログのファビコンとして設定していきましょう。
まず自分のWordPressにアクセスします。
左のメニューバーから「外観 → カスタマイズ」と進んでいきます。
「サイト基本情報」をクリックします。
「サイトアイコンを選択」をクリックして先ほど作った画像を選択、右上の公開をクリックすればファビコンの設定は完了です！
誰でも作れるファビコンの例を6つ紹介します
ここでは、簡単に作れるファビコンの例を6つ紹介します。
実際にファビコンとして設定した場合の表示も合わせて紹介しているので、イメージしやすいと思いますよ〜！
ファビコンの例1：文字単体
| ファビコン | ブラウザでの表示 | アプリ形式 |
 |
 |
 |
かんまる超シンプルに文字だけのファビコンです。背景なしの画像の場合、iOSの仕様から自動的に背景が黒くなります。
ファビコンの例2：文字 + 円
| ファビコン | ブラウザでの表示 | アプリ形式 |
 |
 |
 |
かんまる先ほど作ったタイプのファビコンです。WordPressのファビコンを模倣した作りになっています。
ファビコンの例3：文字 + 角丸四角形
| ファビコン | ブラウザでの表示 | アプリ形式 |
 |
 |
 |
かんまる例2の円を角丸四角形にしたタイプです。角丸の丸み具合については次の章で補足します。
ファビコンの例4：イラスト単体
| ファビコン | ブラウザでの表示 | アプリ形式 |
 |
 |
 |
かんまるフリー素材サイトからダウンロードしたアイコンに色をつけたものを使用しました。上の画像のように、iOSの仕様上アイコンの外枠が黒の場合、外枠が見えなくなるため、外枠は黒以外にすることをおすすめします。
ファビコンの例5：イラスト + 円
| ファビコン | ブラウザでの表示 | アプリ形式 |
 |
 |
 |
かんまる例4のイラスト単体に円を組み合わせたタイプです。アイコン感がグッと増しますね。
ファビコンの例6：イラスト + 角円四角形
| ファビコン | ブラウザでの表示 | アプリ形式 |
 |
 |
 |
かんまる例5の円を角丸四角形にしたタイプです。例5に並んで、しっかりしたアイコン感があります。
ファビコンに角丸四角形を使う場合、どれくらいの丸みがいい？
例3や例6のように角丸四角形を使う場合、丸みはどれくらいにすべきなのでしょうか。
とりあえず丸みの一覧表を見てみましょう。
512 × 512pxの四角形に対して、角丸部分の半径を10px単位に見てみます。
| 0px（正方形） | 10px | 20px | 30px | 40px | 50px |
 |
 |
 |
 |
 |
 |
| 60px | 70px | 80px | 90px | 100px | 110px |
 |
 |
 |
 |
 |
 |
| 120px | 130px | 140px | 150px | 160px | 170px |
 |
 |
 |
 |
 |
 |
| 180px | 190px | 200px | 210px | 220px | 230px |
 |
 |
 |
 |
 |
 |
| 240px | 250px | 256px（正円） | |||
 |
 |
 |
角丸四角形感を出すなら50px〜180pxあたりが良さそうです。細かい調整は好みでOK。
ちなみに、iPhoneやiPadのアプリのアイコンにも（厳密には少し形が違いますが）角丸四角形が使用されています。
アプリのアイコンは512 × 512pxの四角形に対して、角丸の半径は112pxに（近い形に）なっています。ご参考までに。
ファビコンは自分で作れなくても大丈夫です
ファビコンを自分で作るのが難しいと言う人は、ココナラ 
でファビコンを作ってくれる人を探して作ってもらうのが一番手っ取り早いです。
ココナラとは、「このサービスをこれくらいの値段でやりますよ」という人が自分のスキルを出品し、そのサービスを買いたい人が購入することでサービスを受けられる仕組みになっています。
ココナラ内で「サイトアイコン」や「ファビコン」などのキーワードで検索すると、ファビコンを作ってくれる人に出会えると思います。
ココナラであれば、人によって異なりますが大体1000円〜10000円程度で高クオリティなファビコンを作ってもらえます。
まとめ：自分だけのファビコンを手に入れよう！
いかがでしたか？この記事ではファビコンの作り方や例などを紹介してきました。
ぜひお気に入りのファビコンを設定して、あなただけのWordPressブログを作りましょう！
ブログをするならPhotoShopを導入しておきましょう。記事に使う画像やアイキャッチ画像、サイトデザインの作成・編集にめちゃくちゃ使います。月額980円でPhotoShopを利用できる「フォトプラン」がオススメ。7日間の無料体験も実施していますよ！
コメント