★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

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

ファビコン(favicon)をWordPressで設定するには様々な方法があります。

プラグインを使うことで設定もできますが、ファビコンためだけにプラグインを導入するのは面倒ですよね。

そこでプラグインなしでサイトのファビコンを設定する方法について解説します。

そもそもファビコン(favicon)とは何か

ファビコンは「favorite icon(お気に入りのアイコン)」を略した造語

例えばブラウザでGoogleを開くと次画像みたいにタブ内にGoogleアイコンが表示されますが、これがファビコンと呼ばれるものです。

元々はインターネットエクスプローラ(IE)のブックマークに表示されていたアイコンのことを指してましたが、今ではどのブラウザでもファビコンを表示します。

例えばファビコンが表示されるのは次のような場所

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

ブックマークやホーム画面など色々な場所に表示されるので自分のブログだと分かりやすくするのに効果的です。

それでこのファビコン、昔は16x16のアイコン画像さえ用意すればOKでした。ですが今はスマホでも綺麗に表示しようとすると大きめの画像を用意する必要があります。

特に必要だと言われているのは次の画像サイズ(単位はピクセル)

  • 16x16(IEのタブ・アドレス欄用)
  • 32x32(他のブラウザ用)
  • 144x144(スマホのホーム画面用)

これから別のデバイスが出てきてさらに大きなサイズが必要になることもあるかもしれません。でも現時点ではこれだけ用意しておけばどの端末でもきれいに表示できると思います。

失敗しないファビコンの作り方

それではWordPressにファビコンを設定する方法を紹介・・・と行きたいとこですが、まだファビコンを作っていない人向けに作り方のコツを少し解説します。

これを作成する上で特に大事なポイントは次の2つ

  • 256ピクセル以上の正方形にする
  • 文章とか細かな装飾を入れない

なぜこうした方がいいかの理由は次記事で解説したのでご覧ください。

ファビコン(favicon)はブログの顔になる大事なアイコンなので作り方にもいくつか注意すべきポイントがあります。ここではその作り方のコツを特にブロガー向けにまとめました。

上で解説したように拡大しても縮小しても潰れないデザインにするのが大事です。

もしファビコンを自作するなら「あっ!このアイコンはあのブログのだ!」とはっきり分かるデザインにするよう気を付けましょう。

ただしファビコンは別に自作する必要があるとは限りません。

次のような外注化サービスを使えば絵の得意な人に作成依頼もできます。

  • ココナラ : アイコン作成などスキルを買えるサービス
  • SKIMA : 主にロゴ・似顔絵を外注できるサービス

むしろ下手に自作するくらいなら、こういった外注化サービスを使う方がいいですね。

ムダな手間とか時間をかけなくて済む上、プロに任せた方がクオリティが高いアイコンが作れるので自作より外注する方が楽で確実です。

WordPressでの一番簡単なファビコン設定方法

ではWordPressでファビコンを設定してみましょう。

設定するにはテーマファイルを編集したり、プラグインを使っても設定できます。

しかしWordPressバージョン4.3以降は簡単にファビコンを設定できるようアップデートされました。なのでこれからWordPressを始める方はそちらの機能を使った方が確実です。

そのやり方は次に説明する通り

まずメニューから「外観」ー>「カスタマイズ」をオープン

カスタマイズ画面を開くと「サイトの基本情報」という項目が見つかるのでクリック

テーマのカスタマイズ画面から「サイトの基本情報を」をクリック

開くと一番下に「サイトアイコン」という項目があるので「画像を選択」をクリックしてファビコンをアップロードしてください。

「サイトアイコン」ー>「画像を選択」をクリック

画像サイズは512x512が推奨されていますが、それ以下の大きさでも構いません。

ファビコンとして画像をアップロードした後の様子

上のように画像をアップロードが完了したら「公開」ボタンを押すとサイトにファビコンが設定されます。

設定したファビコンはブラウザのタブ上では次のように表示されます。

ブラウザタブに表示されたファビコンの例
↑ブラウザタブでのファビコンの表示例

またスマホでホーム画面にブクマしたときも次のようにアイコンが表示されます。

スマホmpホーム画面に表示されたファビコンの例
↑Androidでのホーム画面アイコン

まとめ

以上WordPressでファビコン(favicon)を設定する方法について解説しました。

なるべく多くの端末に対応させるなら最低でも144x144ピクセル以上の大きめの画像で作ることが大事です。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press