web-dev-qa-db-ja.com

ファビコンを設定する方法は？

私は、ファビコンを作成しているWebサイトをセットアップするための非常に簡単な予備演習をしようとしています。

これは私が使用しているコードです：

<!DOCTYPE html >
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
</html>

しかし、それは機能していません-誰でも助けてくださいますか？ファイルfavicon.icoをhtmlファイルと同じレベル（サブディレクトリ）に保存しました。

どうもありがとう

favicon
49
user2694332

（i | Android | windows）phonesの導入により、状況は変わりました。どのデバイスでも動作する正確で完全なソリューションを取得するのは、本当に時間がかかります。

https://realfavicongenerator.net/favicon_compatibility または http://caniuse.com/#search=favicon を覗いて、最良の方法についてのアイデアを得ることができます。任意のデバイスで動作するものを取得します。

http://realfavicongenerator.net/ を見て、この作業の大部分を自動化する必要があります。おそらく https://github.com/audreyr/favicon-cheat -sheet それがどのように機能するかを理解するために（この後者のリソースが1年ほど後に更新されていない場合でも）。

1つの完全なソリューションでは、ヘッダーを次のように追加する必要があります（もちろん、対応する画像とファイルを使用して）。

<link rel="shortcut icon" href="favicon.ico">
<link rel="Apple-touch-icon" sizes="57x57" href="Apple-touch-icon-57x57.png">
<link rel="Apple-touch-icon" sizes="114x114" href="Apple-touch-icon-114x114.png">
<link rel="Apple-touch-icon" sizes="72x72" href="Apple-touch-icon-72x72.png">
<link rel="Apple-touch-icon" sizes="144x144" href="Apple-touch-icon-144x144.png">
<link rel="Apple-touch-icon" sizes="60x60" href="Apple-touch-icon-60x60.png">
<link rel="Apple-touch-icon" sizes="120x120" href="Apple-touch-icon-120x120.png">
<link rel="Apple-touch-icon" sizes="76x76" href="Apple-touch-icon-76x76.png">
<link rel="Apple-touch-icon" sizes="152x152" href="Apple-touch-icon-152x152.png">
<link rel="Apple-touch-icon" sizes="180x180" href="Apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">

2016年6月、 RealFaviconGeneratorの主張 次の5行のコードは、前の18行と同じ数のデバイスをサポートしていました。

<link rel="Apple-touch-icon" sizes="180x180" href="/Apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
51
Clément

私は自分のサイトでこれを使用していますが、うまく機能します。

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

ファビコンを設定する非常に簡単な方法がありますが、これは長い間知られていたものです。 favicon.icoファイルをデフォルトの場所に配置します。すなわち

http://www.yoursite.com/favicon.ico

これは、<link>タグのないほとんどすべてのブラウザーで機能します。ただし、これは*.icoファイルの場合にのみ機能します。 PNGおよびその他の形式は、<link>タグとリンクする必要があります

7
Akash Kurian Jose

w3 how to を見ることができます。役立つと思います

リンクタグの属性はrel="icon"である必要があります

4
amdorra

Favアイコンに関する情報を以下に示します

FavIconとはFavIconは、アプリケーションのアドレスバーのタイトルとともに左上に表示される小さな画像に過ぎません。favicon.icoの標準サイズの仕様は16です。 16ピクセル。下の添付図をご覧ください。

enter image description here

仕組み？通常、ルートソリューションフォルダにFavIcon.icoイメージを追加し、実行中にアプリケーションが自動的にそれを選択します。しかし、ほとんどの場合、両方のリンク参照の下で使用する必要があります。

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

一部のブラウザは1つを期待しています（rel = "icon"）他のブラウザは他のrel = "shortcut icon"を期待しています

Type =” image/x-icon” OR Type =” image/ico”：正確なico画像と1つの.jpgまたは.pnなどからフォーマットされた画像も必要です。

commonマスターページ、すべてのページで使用されているメインフレームなど、共通ページに上記の2つのタグを使用する必要があります

3
Rinoy Ashokan
<head>
    <link rel="shortcut icon" href="favicon.ico">
</head>
1
tinabelcher
<!DOCTYPE html 
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
</head>
<body>
...
</body>
</html>

rel="shortcut icon"はrel="icon"でなければなりません

ソース： W3C

1
Vivek Jain

Favicon.icoが表示されないという経験から、自分の経験を共有しています。 Webサイトをホストに配置するまで表示することはできません。したがって、XAMPPを使用してlocalhostに配置してみてください- http://www.apachefriends.org/en/xampp.html 。これがファビコンの表示方法であり、他の人が推奨するように、変更します：

rel="shortcut icon"

に
rel="icon"

また、この方法で.pngファビコンを滑らかに使用できます。

1
Shogg

私のサイトでは、これを使用しています：

<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">

<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico"/>

あなたの人生を簡素化するために、このファビコンジェネレーターを使用してください http://realfavicongenerator.net

0
walv

この方法を推奨

<link rel="icon" 
  type="image/png" 
  href="/somewhere/myicon.png" />
0
Aravind Meganathan

これをドキュメントの先頭に置いてみてください：<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>

0
ItsMCB