1. ホーム
  2. html

[解決済み] Webサイトのロゴをブラウザのタブのアイコン画像にするにはどうすればよいですか?

2022-07-07 21:01:12

質問

ブラウザのタブでページタイトルの横にある画像 - ここに画像をリンクさせるにはどうしたらよいでしょうか?

どのように解決するのですか?

その画像は ' ファビコン ' で、これは小さな四角い .ico ファイルであり、これはファビコンの標準的なファイル形式です。あなたは .png または .gif もありますが、より良い互換性のために標準に従うべきです。

あなたのウェブサイトに設定するために、あなたは

  1. ロゴの正方形の画像(できれば 32x32 か 16x16 ピクセル、私の知る限りでは最大サイズはありません*)を作成し、その画像を .ico ファイルに変換します。これはGimpやPhotoshopで行えます。 プラグイン のようなウェブサイトを利用することもできます。 Favicon.cc または RealFaviconGenerator .

  2. では、2通りの設定方法があります。

    A)それを ルートフォルダ/ディレクトリ の隣に置く。 index.html ) という名前で favicon.ico .

    または

    B) <head></head> タグの間にリンクする。 .html タグに追加します。

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

を表示させたい場合は favicon を表示したい場合は、次のように記述します。 www.url.com/favicon.ico と書けば、(おそらく)表示されるでしょう。 スタックオーバーフローの のファビコンは 16x16 ピクセルであり ウィキペディア は 32x32 です。

*: ファイルサイズ制限のないブラウザの問題さえあります。非常に大きなファビコンを使用すると、簡単にブラウザをクラッシュさせることができます。 はこちら