faviconをいろいろなブラウザで表示させる

Hajime hamada |

ブラウザのタブ表示のタイトルの左側やブックマークに表示されるアイコン「favicon」。たくさんのタブを開いた時に視認性がよくなるので表示させたいところなのですが、ブラウザによって仕様が様々なようで表示させるのに手間取ったので、備忘録として残します。

表示に成功したブラウザ

  1. macOS Catalina (10.15.7)
    • Google Chrome 85.0
    • Firefox 81.0
    • Safari 14.0

  2. Windows 10 Home 1909
    • Google Chrome 85.0
    • Edge 44.18362.449.0
    • IE 11.1082.18362.0

faviconの作成

今回は、以下のサイトにお世話になりました。

https://ao-system.net/favicon/

HTMLの表記

    <link rel="shortcut icon" type="image/x-icon"
        href="https://www.example.com/aaa/favicon.ico">
    <link rel="icon" type="image/x-icon"
        href="https://www.example.com/aaa/favicon.ico">

調べると、サイトによって様々な記述を推奨していますが、今回はこの2行を入れることでうまくいきました。ポイントは、faviconへのリンクを絶対パスで書くことです。

BASIC認証をかけている場合

テストサイトなどでBASIC認証をかけている場合には、うまく表示されない場合があるようです。以下の設定を.htaccessに書くことで解決しました。

<Files "favicon.ico">
Satisfy any
order allow,deny
allow from all
</Files>