Webサイトにファビコンを追加するにはどうすればよいですか？

私のサイトにファビコンを追加するための最新の標準はどのマークアップですか？標準の画像形式とサイズは何ですか？

すべてのブラウザで動作するように、.icoサイズに関しては、32×32であり、好ましい最も広く使用され、16×16にも（これはほとんどの場所で、ブラウザで使用される実際のサイズです）動作します。

また、あなたの質問ではありません、彼らは8または24ビットの色深度でなければなりません。

iWhateverユーザーがあなたのサイトをブックマークすることを計画しているなら、それ<link>は画像のために別のものであることに注意する価値があるかもしれません、例えばStackOverflowの：

<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">

どちらですか：

http://www.favicon.cc/などのツールを使用して、写真をインポートしてファビコンに変換するか、ゼロから作成することができます。

その後、ファイルに名前favicon.icoを付けてWebサイトのルートに配置すると、ほとんどのWebブラウザーが自動的にファイルを取得します。

ただし、次のようにHTMLファイルで明示的に宣言することもできます。

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

以外の形式を使用する利点があるためico、異なるページで異なるファビコンを使用し、ファビコンを別の場所に配置し、faviconなどとは異なる名前を使用します。

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

IEの完全なドメインhttpパスでマークアップし、ドキュメントフォルダーにファビコンを保持します。

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

標準画像形式：

• .ico
• 16 x 16ピクセル

さまざまなデバイス、ブラウザ、OSに対して、さまざまなアイコンを使用できます。たとえば、次のリストは、あなたに刺激を与えるかもしれません。物事の進行に合わせてリストを修正/編集してください。

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />

リンクはもう必要ありませんが、便利です。代わりに、favicon.icoという名前のファイル（およびico）をルートに残している限り、ファビコンとして使用されます。

GIMPで.icoファイルを作成するのに少し苦労しましたが、この投稿では詳細な手順を説明します。トリックは、まずGIF形式で保存してインデックス付きカラーテーブルに変換し、次にそれをICO形式に変換するように見えます。