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の作成方法を作成しました。

アイコン画像の準備

まずアイコンに使用する16×16ピクセルと32×32ピクセルのアイコン画像を用意します。アイコンの元となる画像がある場合は、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より新しいバージョンに置き換えられた場合は、pngtopnmppmtowiniconが廃止になるのでpngtopampamtowiniconを使用します。

faviconを設置

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

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

参照

  1. Favicon – Wikipedia

  2. GIFとPNG形式のアイコンファイルを使用するには、全てのページのHTMLファイルに次のリンクタグを入れてアイコンファイルを指定します。

    <link rel="shortcut icon" href="http://example.com/icons/favicon.png" />
    <link rel="icon" href="http://example.com/icons/favicon.png" />
    
  3. WordPressでは、テーマのヘッダーファイルに次のリンクタグを挿入して全てのページでfaviconを表示させることも可能です。

    <link rel="shortcut icon" href="http://example.com/icons/favicon.ico" type="image/vnd.microsoft.icon" />
    <link rel="icon" href="http://example.com/icons/favicon.ico" type="image/vnd.microsoft.icon" />
    

「Webブラウザのタブにオリジナルアイコンを表示」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です