初心者向け

【知識】ファビコンの作り方・アップの仕方を知りたい

文中の説明画像をクリックすると拡大します。

LINEで送る
Pocket

この記事は約6分で読めます。

ファビコン(favicon)とは?

ファビコンとは、favorite iconの略で、ブラウザでWebサイトを閲覧しているときにURLの横やタブの横に出てくるアイコンのことです。

お気に入りや自分のパソコンのショートカットに入れた際にも、ファビコンは表示されます。

Webサイトの象徴をアイコン化したものです。細かいですがよく目にすることもあるので、設定しておいた方がサイトの個性を出せます。

ファビコンは必要なのか?

最近のブラウザは、タブを表示できるものが多くなってきました。そのため、たくさんのWebページをタブで開くと、一体どれがどのページなのかわからなくなります。

そういったときに、ファビコンを設定していると、「このアイコンはあのページだな」と視覚的に一目で判断することが可能です。

また、お気に入りやブックマーク機能で登録したサイトも、数が多いと見たいページを探すのが面倒になります。そんなときに、すぐ見つけるための目印となるのがファビコンです。

このような、閲覧者の細かい不満を解消することにつながるでしょう。

どうやって作るの?

ファビコンは、もちろんPhotoshopなどの画像作成ソフトを使って作る方法もありますが、Web上で操作できる無料のファビコン作成ツールを使えば、簡単に作成することが可能です。

作成ツールはいくつかありますが、今回は「x-icon editor」というツールをご紹介いたします。

サイトを開くと、作成できる画面が表示されます。

左側の作成ツールの使い方は以下の通りです。

  • ブラシツール・・・自由になぞって描く
  • 鉛筆ツール・・・ブラシと同様(タッチが微妙に違う?)
  • 文字ツール・・・テキストを入力するとその文字を挿入できる
  • スポイト・・・クリックしたところの色を反映
  • 塗りつぶし・・・囲まれている場所を塗りつぶす
  • 線ツール・・・ドラッグすると直線が描ける
  • 四角形ツール・・・ドラッグすると四角形が描ける
  • 円形ツール・・・ドラッグすると円形が描ける
  • 消しゴム・・・ドット単位で自由に色を消せる
  • ツールによって、線の太さや、大きさ、フォントなどを変更可能
  • 色を原色の組み合わせによって変更可能

Windowsの「アクセサリ」の中に最初から入っている「ペイント」というアプリケーションと同レベルの機能を、搭載しています。色の配色や透明度も自由に変更できるので、時間をかければクオリティの高いものが作成可能です。

それぞれの大きさに拡大、縮小したりすることが可能です。また、「Import」ではパソコンに入っている画像をアップロードすることができます。「Preview」を選ぶと、作成したファビコンがどのように表示されるか確認することが可能です。

望むものが作れたら、「Export」でファビコン用画像(.ico)をダウンロードしましょう。

どの大きさで作ればいいの?

ファビコンは、ブラウザやショートカットによって画像の大きさが変わります。よく目にするのはブラウザタブなので、以下などだけでも問題ないでしょう(以下以外のサイズになるときは、勝手に拡大や縮小される)。

  • Internet Explorer用に16px×16px
  • Chrome用に32px×32px

しかし、勝手にサイズ変更されて画像がぼやけたりするのが嫌な方は、それぞれの大きさで画像を作ったほうが良いでしょう。

ファビコンが表示されるサイズは、以下を参考にしてください。

  • 16px × 16px:Internet Explorerブラウザのタブ
  • 24px × 24px:Internet Explorer9 ピン留め機能
  • 32px × 32px:Chrome、Firefox、Safari などのブラウザタブ
  • 48px × 48px:Windowsのショートカットアイコン
  • 64px × 64px:高解像度 Windowsショートカットアイコン

既存の画像をファビコンに使用する場合は、拡張子を「.ico」に変換する

既存の画像(png形式やjpeg形式などの画像)をファビコンに変換するには、画像の拡張子を「.ico」にする必要があります。

拡張子を変換する作業も、Web上のツールを利用しましょう。

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

使い方は以下の通りです。

  1. 画像を必要なサイズの分だけアップロードする
  2. 「favicon.ico 作成」をクリックしてダウンロードする

これで完了です。完成したファビコンをサイトにアップしましょう。

どうやってWebサイトにファビコンを設定するの?

ファビコンを作成したら、サーバーにアップロードしましょう。設置する場所は、ルートディレクトリと呼ばれる一番上の階層です。

サーバーにアップロードする方法として、ここではFTPソフト(File Zilla)を使用します。

FTPソフトの導入方法は、以下の記事を参照してください。

【基本】WordPressのインストールって、どうやるの?

ルートディレクトリに設置できない場合は、違う階層のファイルに設置してもOKです。

そして、<head>タグ内にコードを記述することで、ファビコンファイルを表示できます。

古いバージョンのブラウザにも対応するかどうかで、記述するコードが少し違います。

【Internet Explorer8以下にも対応】

<link rel="shortcut icon" href="ファイルのパス/favicon.ico" />

【Internet Explorer9以上に対応】

<link rel="icon" type="image/x-icon" href=“ファイルのパス/favicon.ico">

【Internet Explorer11以上に対応】

<link rel="icon" href="ファイルのパス/favicon.ico">

例えば、企業や団体などが多様な閲覧環境をシビアに想定して運営しているのではなく、ある程度まで多数のユーザが閲覧できればよしとするサイトの場合には、Internet Explorer11対応で良いのではないでしょうか。Internet Explorer8のシェアは、1割未満と言われており、ほとんどの方が使っていません。

一部の企業などでは、社内で構築しているシステムや専用のサービスの関係で、Internet Explorerのバージョンアップをしていないようですので、そういった環境まで想定する場合には、古いブラウザも対象となりますが、そうでない限り、Internet Explorer11以上のバージョンの対応のコードで問題ないかと思われます。

 

まとめ

  • ファビコンとは、Webサイトをブラウザで見たときのURLの横やタブなどに表示されるアイコン。
  • ファビコンは、「x-icon editor」などの無料ツールを使い、Web上で簡単に作れる。
  • サーバーにアップロードや、プラグインを使ってファビコンを設定できる。
LINEで送る
Pocket