66

私は HTML ページを作成していますが、タイトルの横に表示されるファビコンが欲しかったのです。

Google Chrome を使用しています。他の Web サイトではファビコンが機能しているように見えますが、自分の Web サイトではファビコンが表示されません。サイトは、site という名前のデスクトップ上のフォルダーにあります。

ファイルは 16x16 で、favicon.icoオンライン ジェネレーターを使用して作成しました。

これはコードです：

<!DOCTYPE html>
<html> 
    <head>
        <title></title>
        <link rel="shortcut icon" href="/favicon.ico" />
    </head>
    <body>
    </body>
</html>
4

16 に答える 16

42

/href に先頭があるため、ルート フォルダーにあるファイルを参照しています。ページをローカル Web サーバーから提供するのではなく、コンピューターのフォルダーにある場合、リーダー/はブラウザーにファイルシステムのルートフォルダーを調べるように指示します。そのため、ブラウザはファイルが atC:/favicon.icoまたは類似していることを期待していますが、これはおそらくあなたが期待したものではありません。

Web ページと同じフォルダーにある場合はfavicon.ico、先頭のスラッシュを削除するだけで、アイコンが表示されるはずです。

<link rel="shortcut icon" href="favicon.ico" />

アップデート：

デバッグ オプションとして、動作することがわかっているタグを追加してみてください。このスニペットは StackOverflow ソースから借りました。リンク タグをこれに置き換えてみて、SO ロゴがファビコンとして取得されるかどうかを確認してください。

<link rel="shortcut icon" 
      href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">

更新 2:

Chromium で報告されたバグがあるようです。ファイルが Web サーバーを介して提供されずにローカルにロードされた場合、ファビコンが表示されません。

于 2012-12-08T18:23:53.040 に答える
20

たとえば、.htaccess が次のように読み取られた場合、期待どおりにファビコンが表示されないという一般的な問題はキャッシュです。 ExpiresByType image/x-icon "access plus 1 month"

次に、favicon 参照にランダムな値を追加します。 <link rel="shortcut icon" href="https://example.com/favicon.ico?r=31241" type="image/x-icon" />

重いキャッシュを使用していても、毎回動作します。

于 2015-04-21T05:40:38.100 に答える
1

Chrome では、アドレス バーにファビコンを表示できないようです...

http://en.wikipedia.org/wiki/Favicon#Use_of_favicon

私もこのようにされているのを見たことがあります。それが違いを生むかどうかはわかりません。

<link rel="icon" href="/favicon.ico" />
于 2012-12-08T18:42:19.370 に答える
0

このトリックは機能します: このスクリプトをヘッダーまたは masterPage に例として追加します。

    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = '/favicon.png';

そしてキャッシュされます。最適ではありませんが、機能します。

于 2014-09-25T08:29:09.377 に答える
-4

あなたのhtmlは初心者にとって完全に間違っています.headセクション内にもbodyセクションの後にもdivがあってはなりません。ファビコンなどの作業を開始する前に、まず正しい html を調べることをお勧めします。

于 2012-12-08T18:24:02.280 に答える