静的HTMLページにファビコンを追加する 質問する

静的HTMLページにファビコンを追加する 質問する

サーバーがダウンしたときに表示される、純粋な HTML だけの静的ページがいくつかあります。作成したファビコン (16 x 16 ピクセルで、HTML ファイルと同じディレクトリにあり、favicon.ico という名前です) を、いわゆる「タブ」アイコンとして配置するにはどうすればよいでしょうか。Wikipedia を読み、いくつかのチュートリアルを見て、次のことを実装しました。

<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

しかし、まだ動作しません。サイトをテストするために Chrome を使用しています。Wikipedia によると、.ico はすべてのブラウザ タイプで動作する最適な画像形式です。

アップデート

ローカルではこれを動作させることができませんでしたが、コードを確認すると、サーバーがサイトの提供を開始してから初めて正常に動作することがわかります。サーバーにプッシュしてキャッシュを更新すれば、正常に動作するはずです。

ベストアンサー1

.png 画像を作成し、<head>静的 HTML ドキュメントのタグ間に次のいずれかのスニペットを使用できます。

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

おすすめ記事