ファビコン作成のポイントをブロガー向けに徹底解説

ファビコンというのはサイトの顔になるアイコンのこと。これはブログにとってはブログ名と同じくらい重要といっても過言ではありません。

それくらい大事なものなので作成するときは「どんな環境」でも「綺麗」に見えるよう、作り方にいくつか注意すべきポイントがあります。

ここではそのファビコン作成で特に重要なポイントをブロガー向けにまとめました。

また作り方だけでなくファビコンを設定する方法についても最後に紹介します。

そもそもファビコンの役割って何？

まず初めにファビコンの役割について少し解説

これはブログを象徴するアイコンのことで、ブラウザタブやブックマークを開いたときなど色々な場面でブログアイコンとして表示されます。

例えばファビコンを見かけることが多いのはブラウザのタブを開いたとき

他の人のブログを開いたとき次画像みたいにタイトルの横にアイコンが表示されているのを見たことありませんか？

実はこの小さいアイコンがファビコンです。上の画像だけ見てしまうと「小さくて目立たないしなんか地味・・・」と思う方もいるかもしれません。

でも複数タブを開いているとどのページを開いているか分からなくなる時ってありますよね？そういう場合に自分のブログを迷わず探してもらうのに役に立ちます。

ちなみにファビコンが表示される場所は他にもあって例を挙げるなら・・・

• ブラウザのブックマーク
• スマホのホーム画面

・・・などなど

こういう風にファビコンはブログの顔として色々な場所に表示されます。

なのでブログページに迷わずアクセスしてもらうために「あ、このアイコンはあのブログのだ！」と分かってもらえる見やすいファビコンを設定しておく必要がある訳です。

見やすいファビコンを作成するポイント

ここまでで書いたようにファビコンはブログの顔となるので作成するときは見やすさを考慮したデザインにしないといけません。

特にファビコン作成時に注意した方がいいポイントは次の２つ

１．256ピクセル以上の正方形にする

まず１つめのポイントは大きさと形について

これは結論から言うと256x256ピクセル以上の正方形にするのがベストです。

なぜ256ピクセル以上かというとブラウザとか端末によってはかなり大きめなサイズでアイコンが表示されることがあるためです。

例えば大きめのサイズが必要になるのは次のような場合

• 96x96ピクセル
  Safariブラウザ（iPad）のブックマークアイコン
• 128x128ピクセル
  Safariブラウザ（iPhone5）のブックマークアイコン
• 256x256ピクセル
  iPhone5（iOS7）、iPad（iOS7）のホーム画面アイコン

iPadとかiPhoneの最新機種だと256ピクセル以上のアイコンでないとぼやけてしまい、きれいに表示することができません。

なので多くのサイズに対応できるよう大きめのサイズで作っておくことをオススメします。

２．デザインは複雑にしすぎない

もう１つの大事なポイントはデザインを複雑にしすぎない、ということ

なぜなら複雑なデザインにするとタブなどで開いたときに潰れてしまうので、アイコンとして機能しない図形になってしまうためです。

なのでファビコンを作成する際に意識した方がいいのは次のような点

• なるべくシンプルな形にする
• 最小限のデザインだけに留める
• 文章や単語を使わない

自分のブログだと一目で分かるけど複雑な装飾とか文章を含んでいない・・・これが分かりやすいファビコンを作る上でのポイントですね。

ブラウザタブでは16ピクセル～32ピクセル程度の小ささで表示されるので、そこまで縮小しても不自然にならないデザインにするのがベストです。

ファビコン作成は外注するのがオススメ

ここまで書いたようにファビコン作成するときは色々注意することがあって、個人で作るのは中々大変です。

もちろんデザインに精通している人なら自作でも問題ないかもしれません。

でも大抵の人はそうではないはずなのでファビコンを外注した方が楽です。そっちの方がムダな手間とか時間がかからないので

特にアイコンの外注化でオススメなのは次のサービス

• ココナラ : ファビコン含め画像・動画も外注可能
• SKIMA : イラスト・アイコン専門の外注サービス

外注するならココナラで探すのが一番早いし見つけやすいですね。

登録して「アイコン」または「ファビコン」と検索すればアイコン作成の出品者が見つかるので、依頼すればすぐにファビコンを作成してもらうことが可能です。

１画像当たり500円で依頼を受けてくれる方もいるので、まずは無料会員登録して出品依頼できる方がいないか探してみてください。

ただしファビコンの作成依頼する場合は先ほども説明したように

• 大きめのサイズのアイコンも作成可
• ある程度デザインについて相談できる

という条件に当てはまる方に依頼することをおススメします。

「ファビコン作成します」と書かれていても実は16ピクセルまでの大きさしか作成依頼できなかった、なんてこともあるので出品条件はよく読んだ方がいいですね。

ブログにファビコンを設定するには

ファビコンを自作または外注して作成したらブログに設定してみましょう。

WordPressの場合だとその設定手順は次の通りです。

1. メニューから「外観」ー＞「カスタマイズ」を開く
2. その中から「サイトの基本情報」という項目をオープン
3. 作成したファビコンをアップロードする

手順はたったこれだけ。プラグインなどを入れる必要も全くありません。

より詳しい手順については次記事でも紹介したので是非ご覧ください。

WordPressにファビコンをプラグインなしで設定する方法

ファビコン(favicon)とはブラウザタブやブックマークに表示されるブログ・サイトのアイコンのこと。このファビコンをWordPressでプラグインを使わず簡単に設定する方法について紹介します。

fukuro-press.com

2019-05-20 16:14

一度画像をアップロードすればすぐにブラウザタブやブックマークに今設定したアイコンが反映されるようになるはずです。

まとめ

ファビコンはブログの顔になる大事なアイコンです。

ブラウザとかブックマークで見たとき「このアイコンは確かあのブログだ！」と気づいてもらえるように分かりやすいデザインにしましょう。

ただし自分で作るのはかなり大変なので、ムダな手間と時間がかけたくないならココナラなどの外注サービスを使うのがおススメです。

以上ファビコンを作るときの注意点やポイントについてでした。