【WordPress】ファビコン(favicon)を作成するメリット&方法を解説!

ファビコン(favicon)を作成する方法

今回はファビコンを作成してみたいと思います。とはいえ、ファビコンって言われても日常的に使うものではありませんし、私たちにとってあまり馴染みのないものですよね。

ちなみに似ていますが、ファミコンではありません。
ファビコンはブラウザのタブ上に表示される小さなアイコン画像のこと。この画像は「jpg」や「png」ではなく「ico」というファイル形式です。

今回はそんな「ファビコンを作成してWordPressにアップしよう」という記事です。
ちなみに最近のテーマによっては「ico」ファイルを用意することなく「jpg」などで簡単にできるものもあります。今のところ確認できているのが以下のテーマです。

JPGなどで簡単にファビコンをアップできるテーマ

  • Swell
  • Cocoon
  • Simplicity2(バージョンによる)
目次

ファビコンって何?

ファビコン(favicon)は、ブラウザのタブ上に表示される小さなアイコン画像のことです。画像ファイルの拡張子は「ico」。

パソコンだけでなく、スマホのブラウザやブックマーク一覧でも表示されます。

ちなみにWordPressで作られているブログの場合、ファビコンを何も設定していない状態だとWordPressのロゴ「」がブログアイコンとして表示されます。

こちらがパソコンでChromeを開いている時に表示されるファビコン。
ファビコン
スマホ(Android)のChromeで見るとこのようになります。

スマホ ファビコン

ファビコンはブログの看板とも言える大事なアイコン画像です。サイトオリジナルのファビコンが有ると無いとでは大きくイメージが異なります。
単なるアイコン画像と言われればそれまでですが、ブログのブランディング(知名度UP)繋がりますし大事な役割があるわけです。

ファビコンを作成するメリット

ファビコンを作成するメリットを見てみましょう。以下の3つのポイントです。

  1. サイトの完成度が高まるので信頼度が違う
  2. ブックマークからも見つけやすくなるのでアクセス増加につながる
  3. 複数のタブを開いてネットを閲覧している場合に見つけやすくなる

このようなメリットがあります。デメリットといえる面はあまりないので、作成して損はないということでしょう。

ファビコンは、とても小さいので細かい画像だと何の画像だか分からなくなってしまいます。シンプルにサイトのロゴ画像の一部やタイトルの頭文字などがいいのかもしれません。

ちなみに、ファビコンを保存する上での最適な画像の形式は「ico」になります。なぜ「jpg」や「png」でもなく、「ico」なのかというと、IEでは「ico」形式しか対応していなくWorePressロゴ「」になってしまうからです。

追記

JPGやPNGでファビコンを設定した場合、IEの後継ブラウザ「Edge」でも表示されないという現象が起こります。
Edgeでもファビコン表示させたい場合は、今回紹介する「ico」形式を作ってアップするといいでしょう。


IEを普段から使っている方は沢山居ると思うのでIEでも表示されるようにしておきたいところです。また「ico」形式なら複数のサイズのファビコンを一度に格納できるという点から使われています。

ファビコンの作成サイズ一覧

ファビコンのサイズを一覧でまとめてみました。

16×16IEのアドレスバー
24×24chrome、firefox、safari
32×32IE
48×48Windowsのサイトアイコン
57×57iOSのホームアイコン
64×64Windowsのサイトアイコン(高解像度)
72×72iPadのホームアイコン
96×96GoogleTVのアイコン
114×114RetinaのiPhoneアイコン
128x128pxChrome
152×152スマホ・タブレット

このように様々な種類がありどのサイズを作っていいのか分からないと思います。ですが、サイズによってはあまり使う事のないものもあるので全てのサイズを作る必要はないででしょう。

サイズの無いアイコンが表示される場合は自動的に拡大・縮小されるらしいのでとりあえず「16×16」「32×32」「48×48」があれば十分だと思います。

早速ですが作ってみましょう。

ファビコンを作成してWordPressにアップするまでの流れとしては・・
「ファビコンになる元の画像を用意」→「元画像をicoに変換する」→「WordPressにicoファイルをアップロード」→「header.phpの記述を変更する」です。

テーマによってはテーマ独自の機能でファビコンを簡単にアップすることが可能です。例えば、Simplicity2では「外観」→「カスタマイズ」から簡単アップすることができます。

画像を用意する

まず「16×16」「32×32」「48×48」で同じ画像をそれぞれのサイズで作成します。保存するときの拡張子は「png」です。ファイル名は任意の名前でかまいません。

今回画像編集ソフトのGIMP2で作りました。

ファビコン作成

ファビコン作成方法

「16×16」「32×32」「48×48」3種類のアイコン画像を用意したら、「ico」の作成にとりかかりましょう。

「ico」を無料で作成できるWEBツールに「ファビコン favicon.icoを作ろう (https://ao-system.net/favicon/)」があります。

ファビコン favicon.icoを作ろう!

用意した3種類の画像を「..用画像ファイルを選択」を選択し、それぞれにアップします。アップが済んだら「favicon.ico」を選択。

favicon.ico作成

これでファビコンの作成が完了です。1つの「ico」ファイルに16×16・32×32・48×48と3種類のサイズが格納されていることになります。

favicon.ico ダウンロード

「ダウンロード」を選択すると「ico」ファイルがダウンロードされます。

ファビコンをアップロード

まずはその1、WordPressに直接ファビコンファイルをアップロードして「header.php」ファイルに記述を追加します。

WordPress管理画面にログイン。「メディア」→「新規追加」→「ファイルを選択」すると作成したファビコンが表示されるので「編集」を選択。

メディアのアップロード

アップしたファビコンのファイル「URL」をコピーします。このURLは今から「header.php」に記述するのに使用します。

「header.php」を変更

「外観」→「テーマの編集」→「header.php」を選択。

<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/logo.ico” />

という記述部分があるのでの部分を以下のように変更すればOKです。

<link rel=”shortcut icon” href=”「ファイルのURL」”>

完了したらファビコンが表示されているか確認してみましょう。

Simplicity2 ファビコンを有効

「その2」ファビコンをアップロード

テーマによってはテーマ独自の機能で簡単にファビコンをアップすることができます。Simplicity2搭載のカスタマイザー機能を使えば手軽にアップすることができるので見てみましょう。

「外観」→「カスタマイズ」→「その他」を選択。

ファビコンを有効にチェックを入れ、「画像を選択」からファビコンのファイルをアップします。

ファビコン表示例

この場合、この手順だけで完了です。「header.php」を編集する必要はありません。

複数サイトでファビコンを使い分ける

サイトを複数運営している場合、2つ目以降の「ico」ファイルが使えなくなりエラーになってしまうことがあります。ダウンロードされたときのファイル名はこのようになります。

  • 「favicon.ico (1)」
  • 「favicon.ico (2)」

このままだと使えないのでこの場合はファイル名を変更すれば複数サイトを運営していて複数のファビコンを使用する場合でも問題なく使うことができます。

ファイル名は以下のように、わかりやすい任意の名前でOKです。

  • fa.ico
  • ドメイン名.ico
  • ドメイン名-favi.ico

後は前述した手順と同じ流れでファビコンをアップします。

また、ファビコンはとても小さい画像なのでサイズや画質の解像度が思っていたイメージと違う場合があります。その場合はサイズや背景色を変更したりして、修正した「png」を再度「ico」へ変換しまたダウンロードして微調節してみるといいでしょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ジョン齊藤のアバター ジョン齊藤 ブログ運営者 / 執筆者

ブログ歴8年 / 10万PV達成 / ブロガー・動画編集者 / 使用テーマSWELL

目次