簡単にできる！ファビコン(favicon)の作り方

WEB

2023/2/42015/3/13

ファビコンとは？
1. ファイルの種類
2. ファビコン(favicon)のサイズについて
ファビコン作成のながれ
ワードプレスでファビコンを設置する
1. 方法１．head内にコードを追加する方法
2. 方法２．ファビコンのプラグインを使用して設定する方法

ファビコンとは？

ファビコン(favicon)とはFavorite icon(フェイバリット・アイコン）の略で、ウェブサイトのブラウザに表示されるURLの左横に付いているアイコンのことです。主にサイトのロゴやシンボルマークが使用されています。ファビコンを設定すると、ウェブサイトをお気に入りに追加した場合や、ウェブサイトを複数開いている場合にタブブラウザで表示されるなど多くの場でサイトの目印として見つけてもらいやすくなるというメリットがあります。また、ファビコンを設定することにより、サイトとしての信頼度・完成度が上がりアクセスの向上に貢献する重要な要素になります。スポンサーリンク

ファイルの種類

最近は、gifやpngでも表示されるブラウザが多くなりましたが、InternetExplorerではico形式にのみ対応しているため、ico形式での作成が一般的です。アイコンには「シングルアイコン（単一アイコン）」と「マルチアイコン（複数アイコンを格納)」の2種類で拡張子はicoです。マルチアイコンは、サイズ別の複数のアイコンを一つのファイルにまとめて、環境に合わせて適切なサイズを表示することができます。

ファビコン(favicon)のサイズについて

表示される場所やデバイスによって表示されるサイズが違います。最近は、スマートフォンの登場やデバイスの多様化によってファビコンのサイズも多種多様です。主要なサイズの「16×16」「32×32」には最低限対応させておきましょう。

サイズ単位(px)	表示場所
16×16	ブラウザのアドレス欄・ブックマーク
24×24	IE9のピン留め機能
32×32	IEの新しいタブ・多くのブラウザのタブやブックマーク
48×48	Windowsのサイトアイコン
64×64	高解像度デバイスのWindowsサイトアイコン

他にも、 57×57、64×64、72×72、96×96、114×114、128×128、195×195、258×258を使用するOSもありますが、大きなサイズのアイコンを同梱すると容量が大きくなるので注意が必要です。今回は、最低限用意したいサイズの「16×16」「32×32」に「48×48」「64×64」を加えた４種類のマルチアイコンを作成したいと思います！

ファビコン作成のながれ

１.ファビコンに設定する画像を作成する

画像編集ソフトでファビコン用の画像を作成します。通常表示されるファビコンはとても小さいのではっきりとしたシンプルなデザインをおすすめします。いろんな方法がありますが、今回は使い慣れているIllustratorのソフトを使用してファビコンの画像を作りました。photoshopや他のフリーソフトなど自分が使いやすいソフトで作ってOKです。

＜Illustratorイラストレーター編＞ ◆サイズ：正方形であればサイズは問いませんが、今回は使用するサイズの中で一番大きいサイズの64pxで作りました。 ◆ファイル形式：背景透過のPNG（おすすめ)・またはGIF形式 ◆ポイント：［表示］⇒［ピクセルプレビュー］にチェックを入れたまま作成すると仕上がりを確認しながら作れるので便利です。（下記）

右側がピクセルプレビューで確認しながら作成したもの。サイズが小さいだけに見づらいですが、左の画像よりは綺麗です。

［ファイル］⇒［webおよびデバイス用に保存］⇒　PNG-24　✔透明部分にチェックを入れる（透過したくない場合はチェックを外す）⇒ 保存 ※サイズを変える場合は、画像サイズの変更後のサイズー幅・高さに数値を入れ適用する

対応させるサイズ分のPNGファイルで書き出すとこんな感じになります。

２. ico形式で保存する

ico形式でマルチアイコンとして書き出したいと思います。アイコンの作成、画像からアイコンへ変換・ico形式で保存できる便利なフリーソフトがありますのでまずダウンロードします。

@icon変換
towofu's SOFT
www.towofu.net
作成者：towofu 様

＜＠iconソフト手順＞ ソフトを開いて、作成したファビコンPNG画像をドラッグします。

ファビコン全サイズを選択して、（［リスト］⇒［すべて選択］で選んでもOK）［ファイル］⇒［マルチiconとして保存］をクリック！ファイル名は ［favicon.ico］で保存します。

favicon.ico を開くとこんな感じで４つ入っているのが確認できます。これで、マルチアイコンが作成できました！とても簡単ですね!(^^)!

３. 作成した favicon.ico をサーバーにアップロードする

favicon.ico をサーバーのルートディレクトリ（一番上の階層）にアップロードします。通常は、サーバーのトップページ”index.html”ファイルのあるルートディレクトリに設置すると認識されます。ルートディレクトリに設置できない場合や、ディレクトリごとに違うファビコンを表示させたい場合は、<head></head>内に以下のコードを追加します。

※href=以降は適宜パスを記述してください。ルートディレクトリにアップロードしただけでhead内に記述しなくてもIEで表示出来ましたが、ブラウザにより異なる場合がありますので、念のため記述しておくといいです。スポンサーリンク

ワードプレスでファビコンを設置する

ワードプレスでのファビコンの設置方法は２種類あります。ファビコンをアップロード後head内にコードを追加する方法と、ファビコンのプラグインを使用する方法です。

方法１．head内にコードを追加する方法

FTPを使って favicon.ico をサーバーの”wp-admin”や”wp-contents”フォルダがある場所にアップロードします。

管理画面ー［外観］⇒［テーマ編集］⇒［ヘッダーheader.php］をクリックする。header.php の<head></head>内に以下のソースを追加します。＜/head＞の直前でOK。

追加したら、［ファイルを更新］をクリックして完了です！

方法２．ファビコンのプラグインを使用して設定する方法

管理画面ー［プラグイン］の［新規追加］をクリックして、キーワード検索に「Shockingly Simple Favicon」と入力して検索してインストールする。［プラグイン］の［インストール済みプラグイン］をクリックし、「Shockingly Simple Favicon」を有効化し、下記のように設定項目に［S.Simple Favicon］が表示されていればOKです。

まずfavicon.ico のファイルを［メディア］⇒［新規追加］にアップロードして画像のURLをコピーします。

管理画面の［設定］⇒［S.Simple Favicon］をクリックすると下記のような画面になります。

先ほどコピーしたパスをFavicon URLのところに入れます。 Admin faviconを［Blog］に変更して、［Save Changes］をクリックで完了です！ブラウザで確認してみましょう。

アドレスバー・ブックマーク・新しいタブ・デスクトップへショートカットした場合でそれぞれ表示されました♪

＜ファビコンが表示されない場合＞ ファビコンが表示されるまで時間がかかる場合があります。何度か更新したり、一旦閉じてブラウザを再起動したり、キャッシュを削除してみてください。キャッシュの削除方法は、右上の歯車マークの設定から［インターネットオプション］⇒［閲覧の履歴］⇒［削除］⇒［インターネット一時ファイルおよびwebサイトのファイル］から削除します。 IEでは表示されるのにChromeで表示されない！場合はこちらからお試しください。 ✔参考→Chromeでファビコンが表示されないときの解決法

今回は、ファビコンの変更で新しいファビコンがなかなか表示されませんでしたが、ブラウザを閉じたり更新を何回もしたりしているうちに変更できていました。他に、［お気に入りWebサイトデータを保持する］のチェックを外したのもポイントだったかどうかは定かではありませんが、お困りの場合はぜひ試してみて下さいね！また、違うソフトでファビコンを作ったらレポートしたいと思います。