今回はファビコンを作成してみたいと思います。とはいえ、ファビコンって言われても日常的に使うものではありませんし、私たちにとってあまり馴染みのないものですよね。
ちなみに似ていますが、ファミコンではありません。
ファビコンはブラウザのタブ上に表示される小さなアイコン画像のこと。この画像は「jpg」や「png」ではなく「ico」というファイル形式です。
今回はそんな「ファビコンを作成してWordPressにアップしよう」という記事です。
ちなみに最近のテーマによっては「ico」ファイルを用意することなく「jpg」などで簡単にできるものもあります。今のところ確認できているのが以下のテーマです。
JPGなどで簡単にファビコンをアップできるテーマ
- Swell
- Cocoon
- Simplicity2（バージョンによる）
ファビコンって何？
ファビコン(favicon)は、ブラウザのタブ上に表示される小さなアイコン画像のことです。画像ファイルの拡張子は「ico」。
パソコンだけでなく、スマホのブラウザやブックマーク一覧でも表示されます。
ちなみにWordPressで作られているブログの場合、ファビコンを何も設定していない状態だとWordPressのロゴ「」がブログアイコンとして表示されます。
こちらがパソコンでChromeを開いている時に表示されるファビコン。
スマホ（Android）のChromeで見るとこのようになります。
ファビコンはブログの看板とも言える大事なアイコン画像です。サイトオリジナルのファビコンが有ると無いとでは大きくイメージが異なります。
単なるアイコン画像と言われればそれまでですが、ブログのブランディング（知名度UP）繋がりますし大事な役割があるわけです。
ファビコンを作成するメリット
ファビコンを作成するメリットを見てみましょう。以下の3つのポイントです。
- サイトの完成度が高まるので信頼度が違う
- ブックマークからも見つけやすくなるのでアクセス増加につながる
- 複数のタブを開いてネットを閲覧している場合に見つけやすくなる
このようなメリットがあります。デメリットといえる面はあまりないので、作成して損はないということでしょう。
ファビコンは、とても小さいので細かい画像だと何の画像だか分からなくなってしまいます。シンプルにサイトのロゴ画像の一部やタイトルの頭文字などがいいのかもしれません。
ちなみに、ファビコンを保存する上での最適な画像の形式は「ico」になります。なぜ「jpg」や「png」でもなく、「ico」なのかというと、IEでは「ico」形式しか対応していなくWorePressロゴ「」になってしまうからです。
JPGやPNGでファビコンを設定した場合、IEの後継ブラウザ「Edge」でも表示されないという現象が起こります。
Edgeでもファビコン表示させたい場合は、今回紹介する「ico」形式を作ってアップするといいでしょう。
IEを普段から使っている方は沢山居ると思うのでIEでも表示されるようにしておきたいところです。また「ico」形式なら複数のサイズのファビコンを一度に格納できるという点から使われています。
ファビコンの作成サイズ一覧
ファビコンのサイズを一覧でまとめてみました。
| 16×16 | IEのアドレスバー |
| 24×24 | chrome、firefox、safari |
| 32×32 | IE |
| 48×48 | Windowsのサイトアイコン |
| 57×57 | iOSのホームアイコン |
| 64×64 | Windowsのサイトアイコン(高解像度) |
| 72×72 | iPadのホームアイコン |
| 96×96 | GoogleTVのアイコン |
| 114×114 | RetinaのiPhoneアイコン |
| 128x128px | Chrome |
| 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/)」があります。
用意した3種類の画像を「..用画像ファイルを選択」を選択し、それぞれにアップします。アップが済んだら「favicon.ico」を選択。
これでファビコンの作成が完了です。1つの「ico」ファイルに16×16・32×32・48×48と3種類のサイズが格納されていることになります。
「ダウンロード」を選択すると「ico」ファイルがダウンロードされます。
ファビコンをアップロード
まずはその1、WordPressに直接ファビコンファイルをアップロードして「header.php」ファイルに記述を追加します。
WordPress管理画面にログイン。「メディア」→「新規追加」→「ファイルを選択」すると作成したファビコンが表示されるので「編集」を選択。
アップしたファビコンのファイル「URL」をコピーします。このURLは今から「header.php」に記述するのに使用します。
「header.php」を変更
「外観」→「テーマの編集」→「header.php」を選択。
という記述部分があるのでの部分を以下のように変更すればOKです。
完了したらファビコンが表示されているか確認してみましょう。
「その2」ファビコンをアップロード
テーマによってはテーマ独自の機能で簡単にファビコンをアップすることができます。Simplicity2搭載のカスタマイザー機能を使えば手軽にアップすることができるので見てみましょう。
「外観」→「カスタマイズ」→「その他」を選択。
ファビコンを有効にチェックを入れ、「画像を選択」からファビコンのファイルをアップします。
この場合、この手順だけで完了です。「header.php」を編集する必要はありません。
複数サイトでファビコンを使い分ける
サイトを複数運営している場合、2つ目以降の「ico」ファイルが使えなくなりエラーになってしまうことがあります。ダウンロードされたときのファイル名はこのようになります。
- 「favicon.ico (1)」
- 「favicon.ico (2)」
このままだと使えないのでこの場合はファイル名を変更すれば複数サイトを運営していて複数のファビコンを使用する場合でも問題なく使うことができます。
ファイル名は以下のように、わかりやすい任意の名前でOKです。
- fa.ico
- ドメイン名.ico
- ドメイン名-favi.ico
後は前述した手順と同じ流れでファビコンをアップします。
また、ファビコンはとても小さい画像なのでサイズや画質の解像度が思っていたイメージと違う場合があります。その場合はサイズや背景色を変更したりして、修正した「png」を再度「ico」へ変換しまたダウンロードして微調節してみるといいでしょう。