アイコン

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

更新日:2021/02/19

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

 

faviconとは

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

favicon

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

ショートカットアイコン

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

 

faviconを設置する方法

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

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

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

favicon設置タグ

<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属性は、アイコン画像へのパスを指定します。

htmlでパス指定を"/"から始めると、その前にhttpまたはhttpsとドメイン名が付加されます。
これはimgやリンクタグなど全てのパス指定に適用されます。

例:https://abc.com の場合

href="/icon-36x36.png"
→ https://abc.com icon-36x36.png

 

実際に設置してみます。

まず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. 完成!!

更新日:2021/02/19

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。