web-dev-qa-db-ja.com

ファビコンが表示されないのはなぜですか？

以下は、私のhtmlコードでファビコンを設定するために使用されます。

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

ただし、アイコンは表示されません。どうして？

注意：

ファイルがディスク上の正しいパスにあることを確認しました。

htmlfavicon
44
Sivajith
  1. それは本当に.icoですか、それとも ".ico"という名前ですか？
  2. どのブラウザでテストしていますか？

ファビコンを作成する最も簡単な方法は、「favicon.ico」というアイコンをルートフォルダーに配置することです。それはどこでも機能し、コードはまったく必要ありません。

サブディレクトリに保存する必要がある場合は、次を使用します。

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

imgの前の/に注意して、ルートフォルダーに固定されていることを確認してください。

67
Rich Bradshaw

これを試して：

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

ファビコンは、配信コンテンツのMIMEタイプを正しく設定するWebサーバーから配信される場合にのみ機能します。ローカルファイルからの読み込みは、クロムでは機能しない場合があります。正しく構成されていないWebサーバーからの読み込みは機能しません。

MIMEタイプを正しく設定するには、lighthttpdなどのWebサーバーを 手動で構成 にする必要があります。

Mimetypeの割り当てがすべての環境で機能しない可能性があるため、代わりにインライン base64エンコード icoファイルを使用することをお勧めします。これは、サーバーに送信されるhttp要求の数を減らすため、ロードも高速になります。

POSIXベースのシステムでは、base64コマンド。

Base64でエンコードされたico行を作成するには、次のコマンドを使用します。

$ base64 favicon.ico --wrap 0

そして、出力を次の行に挿入します。

<link href="data:image/x-icon;base64,HERE" rel="icon" type="image/x-icon" />

Word HEREを次のように置き換えます：

<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA////AERpOgA5cCcA7vDtAF6jSABllFcAuuCvAK2trQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFjMzMzMzNxARYzMzMzVBEEERYzMzNhERZxRGMzZxQEA2FER3cRSAgTNxgEEREIQBMzFIARERFEEzNhERARFAATMzYREBEAhBMzMzEYEBFEEzMzNhEQQRQDMzMzcRgEAAMzMzNhERgIEzMzMyERgEQDMzMzMRAEgEMzMzMxERAEEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" rel="icon" type="image/x-icon" />
6
timthelion