ファビコン(favicon)を静的サイトに設置する方法

今回は自サイトにファビコンを設置してみます。

faviconは、ブラウザのタブ内に表示される小さな画像のこと。

さらに、ショートカットアイコンなどにも使用されます。

faviconを指定しないと画像が表示されないだけで特に問題はありませんが、他のサイトが独自の画像を表示しているなかで自分のサイトだけ、空白なのもなんだか味気ないですね。

このサイトはSIRIUSという、以前はアフィリエイター御用達だったCMSで作成しています。
残念なことにSIRIUSにはfaviconの設置機能がないので、テンプレートに自分でタグを追加しないといけません。

ということで、早速設置してみます。

favicon設置するには、htmlのheadタグ内に次のタグを記述します。

<link rel="icon" type="ファイルタイプ" size="アイコンサイズ" href="画像ファイル名（パス）">

■rel属性

rel属性は"icon"を指定します。

rel属性は、以前は"shortcut icon"という記述がされていました。
これは古いブラウザで使用されていたもので、現在は使用しません。

また、"apple-touch-icon"という記述もあります。
これは一部のスマホなどでホーム画面にショートカットを追加したときに使用される画像です。

■type属性

ico以外の画像ファイルを使用する場合、type属性に"image/png"や"image/jpg"など、アイコンファイルの画像フォーマットを指定します。

■size属性

icoファイルは複数のサイズの画像を一つにまとめたものなので、size属性は必要ありません。
その他の画像を使用する場合、size属性に画像サイズを指定します。

指定例：
sizes="36x36"
sizes="256x256"

■href属性

href属性は、アイコン画像へのパスを指定します。

まず512x512でpng画像を作成します。

この画像を何種類かのサイズに変更して保存していきます。

正直言って、非常にめんどくさいです。
ファビコン向けに一括でサイズ変更するツールを作成しようと思いましたが、それも面倒なので、ネットで探してみました。

そのなかで秀逸だと感じたのが、次のツールです。

■様々なファビコンを一括生成。favicon generator

■使い方

1. 画面の上の方にある、『画像ファイルを選択』で作成した画像を指定します。

   

2. 次に『ファビコン一括生成』を押すと、すぐにファビコンに適した全てのサイズに変換してくれます。

3. 変換が終了したら少し下へスクロールして、『ファビコンダウンロード』を押して、パソコンにダウンロードします。
4. ダウンロードしたファイルはzip圧縮されているので、解凍して全てのファイルをサイトのルートディレクトリにFTPなどで転送します。
5. さらに少しスクロールして、表示されているタグをコピーし、自分のサイトのheadタグ内に貼り付けます。

   

   ※下のタグはツールと同じものですが、最新でない可能性があります。必ずツールサイトから取得してください。

   <meta name="msapplication-square70x70logo" content="/site-tile-70x70.png">

   <meta name="msapplication-square150x150logo" content="/site-tile-150x150.png">
   <meta name="msapplication-wide310x150logo" content="/site-tile-310x150.png">
   <meta name="msapplication-square310x310logo" content="/site-tile-310x310.png">
   <meta name="msapplication-TileColor" content="#0078d7">
   <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
   <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
   <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
   <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
   <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
   <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
   <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
   <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
   <link rel="icon" type="image/png" sizes="36x36" href="/android-chrome-36x36.png">
   <link rel="icon" type="image/png" sizes="48x48" href="/android-chrome-48x48.png">
   <link rel="icon" type="image/png" sizes="72x72" href="/android-chrome-72x72.png">
   <link rel="icon" type="image/png" sizes="96x96" href="/android-chrome-96x96.png">
   <link rel="icon" type="image/png" sizes="128x128" href="/android-chrome-128x128.png">
   <link rel="icon" type="image/png" sizes="144x144" href="/android-chrome-144x144.png">
   <link rel="icon" type="image/png" sizes="152x152" href="/android-chrome-152x152.png">
   <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
   <link rel="icon" type="image/png" sizes="256x256" href="/android-chrome-256x256.png">
   <link rel="icon" type="image/png" sizes="384x384" href="/android-chrome-384x384.png">
   <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
   <link rel="icon" type="image/png" sizes="36x36" href="/icon-36x36.png">
   <link rel="icon" type="image/png" sizes="48x48" href="/icon-48x48.png">
   <link rel="icon" type="image/png" sizes="72x72" href="/icon-72x72.png">
   <link rel="icon" type="image/png" sizes="96x96" href="/icon-96x96.png">
   <link rel="icon" type="image/png" sizes="128x128" href="/icon-128x128.png">
   <link rel="icon" type="image/png" sizes="144x144" href="/icon-144x144.png">
   <link rel="icon" type="image/png" sizes="152x152" href="/icon-152x152.png">
   <link rel="icon" type="image/png" sizes="160x160" href="/icon-160x160.png">
   <link rel="icon" type="image/png" sizes="192x192" href="/icon-192x192.png">
   <link rel="icon" type="image/png" sizes="196x196" href="/icon-196x196.png">
   <link rel="icon" type="image/png" sizes="256x256" href="/icon-256x256.png">
   <link rel="icon" type="image/png" sizes="384x384" href="/icon-384x384.png">
   <link rel="icon" type="image/png" sizes="512x512" href="/icon-512x512.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png">
   <link rel="icon" type="image/png" sizes="24x24" href="/icon-24x24.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png">
   <link rel="manifest" href="/manifest.json">

6. サイトをサーバーにアップロードして、ブラウザに表示する

   

7. 完成！！