Webブラウザのタブにオリジナルアイコンを表示

Linux, Ubuntu, Web
目次

アイコン画像（16px X 16px と 32px X 32px）を用意して、GIMP または netpbm を使用して favicon.ico を作成する。作成したファイルを Web ページのトップディレクトリーに保存する。

Web ページを Chrome などで表示すると、タブやアドレスバーにサイト独自のアイコン(favicon)が表示されます。このサイトでも使用している Wordpress は、インストールしただけでは favicon が表示されません。そこで Wordpress を使用したサイトで favicon を表示するようにしてしてみました。

favicon とは

favicon を簡単に説明する(注1)と、もともとは名前から想像できるように Microsoft Internel Explorer(IE)の「お気に入り」に登録された時に表示されるデコレーションアイコンでした。それが時代を経て現在のブラウザーでは、サイトを識別しやすいようにタブやアドレスバーにも表示されるようになりました。

favcion は IE の独自機能であったために favicon は標準化されていませんが、全てのブラウザーが Windows のアイコンファイル形式(*.ico)をサポートしています。現在は Windows アイコンファイルの他に、多くのブラウザーで GIP と PNG 形式も使用できます(注2)。

しかしあえて GIF や PNG を選択する必要もないので、ここでは全てのブラウザーで表示できる Windows アイコンファイルの favicon.ico を作成します。

Linux 環境で favicon を作成

favicon を作成する Web サービスも有りますが、Linux(Ubuntu)環境で使用できる GIMP と netpbm を使って favicon の作成方法を作成しました。

アイコン画像の準備

まずアイコンに使用する 16x16 ピクセルと 32x32 ピクセルのアイコン画像を用意します。アイコンの元となる画像がある場合は、GIMP や imagemagick パッケージのconvertなどで縮小します。

機械的に縮小したファイルをそのまま使うのでなく、すこし修正したほうが選り見やすいアイコンになります。絵心の必要な作業なので、機械的に縮小したものを使って不満があったら修正する程度で良いかと思います。

GIMP を利用して favicon を作成

まず GIMP をインストールし、GIMP を起動します。

$ sudo apt-get install gimp
$ gimp &

GIMP を起動させたら、次のようにして favicon.ico を作成します。

  1. 「File」メニューの「Open…」を選択して、縮小した画像ファイルを開きます。 GIMP-open
  2. 「File」メニューの「Open as Layers…」を選択して、残りの縮小した画像ファイルを開きます。 GIMP-open-layers
  3. 「File」メニューの「Export AS …」を選択して、Export Image ダイアログを開きます。
  4. 表示されたダイアログの下の方に「Select File Type」があるので、「By Extension」または「Microsoft Windows icon」になっていることを確認します。 GIMP-export
  5. Name を favicon.ico として、「Export」ボタンをクリックしてアイコンファイルを保存します。

コマンドラインから favicon を作成

コマンドラインから favicon を作成するには、netpbm パッケージに含まれるコマンドを使用します。

$ sudo apt-get install netpbm

$ ppmtowinicon -o favicon.ico <(pngtopnm icon16.png|pnmquant 256) <(pngtopnm icon32.png|pnmquant 256)

# bashは、標準出力を普通のリダイレクトではなくファイルに見せかけてコマンドの引数に使えて便利。
# シェルがbashでない場合は、pnm形式の中間ファイルを作成する。

$ pngtopnm icon16.png|pnmquant 256 > icon16.pnm
$ pngtopnm icon32.png|pnmquant 256 > icon32.pnm
$ ppmtowinicon -o favicon.ico icon16.pnm icon32.pnm

pnmquantを通しているのは、Windows のアイコンに使用できる色数が最大 256 色なので、色数を 256 以下に制限するためです。

Ubuntu 15.10 (Wily)でインストールされる netpbm パッケージのバージョンは 10.0 ですが、今後 netpbm が 10.44 より新しいバージョンに置き換えられた場合は、pngtopnmとppmtowiniconが廃止になるのでpngtopamとpamtowiniconを使用します。

favicon を設置

作成した favicon.ico は、http://site/favicon.ico でアクセスできるように Web ページのトップディレクトリーに置きます(注3)。

favicon を設置した Web ページを開いて正しく表示されることを確認します。表示されない時は、サーバのアスセスログを確認して favicon.ico にアクセスしているか・エラーが無く取得されているか確認します。

参照

  1. Favicon – Wikipedia
  2. GIFとPNG形式のアイコンファイルを使用するには、全てのページのHTMLファイルに次のリンクタグを入れてアイコンファイルを指定します。 ```html````
  3. WordPressでは、テーマのヘッダーファイルに次のリンクタグを挿入して全てのページでfaviconを表示させることも可能です。 ```html````