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

本から飛び出るアイコン

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

ちなみに似ていますが、ファミコンではありません。

SPONSORED LINK

▼目次

  1. ファビコンって何?
  2. ファビコンを作成するメリット
  3. ファビコン作成方法
  4. ファビコンをアップロード

ファビコンって何?

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

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

WordPressで作られているWEBサイトの場合、ファビコンを何も設定していない状態だとユーザーから見て非表示になるか、使っているテーマ側が用意したファビコンが表示されるようです。

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

ファビコンはWEBサイトの看板とも言える大事な画像です。サイトオリジナルのファビコンが有ると無いとでは大きくイメージが異なります。
単なるアイコン画像といわれればそれまでですが、そういった意味で大事な役割をもっています。

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

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

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

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

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

ファビコンを保存する上での最適な画像の形式は「ico」です。なぜ「jpg」や「png」でもなく、「ico」なのかというとIEでは「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/)」があります。

ファビコン 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」へ変換しまたダウンロードして微調節してみるといいでしょう。

SPONSORED LINK