ファビコンについて検索すると、すべてのブラウザーとデバイスで動作するために10種類以上のファイルが必要であることがわかりました:(
私は腹を立てて自分のファビコンジェネレータを作成しました。ファビコンジェネレータは、これらすべてのファイルと各ファイルの正しいHTMLヘッダーを作成します。 faviconit.com
楽しんでください。
ファビコンに変換するロゴ画像が既にある場合は、 http://www.favicomatic.com/ を使用して変換できます。鮮明なファビコンを作成します。作成後に編集する必要はありません。 16x16および32x32でファビコンを生成し、それらを引用すると、「いまいましいサイズだね！」このサイトは、いくつかのPNGに存在する透明度もサポート/保持しています。また、彼らのサイトは見栄えがよく、使いやすいです。
たとえば、stackoverflowのロゴは次のとおりです。 
生成されたファビコンの一部を次に示します。
また、必要なhtmlも生成します。
<link rel="Apple-touch-icon-precomposed" sizes="57x57" href="Apple-touch-icon-57x57.png" />
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="Apple-touch-icon-114x114.png" />
<link rel="Apple-touch-icon-precomposed" sizes="72x72" href="Apple-touch-icon-72x72.png" />
<link rel="Apple-touch-icon-precomposed" sizes="144x144" href="Apple-touch-icon-144x144.png" />
<link rel="Apple-touch-icon-precomposed" sizes="60x60" href="Apple-touch-icon-60x60.png" />
<link rel="Apple-touch-icon-precomposed" sizes="120x120" href="Apple-touch-icon-120x120.png" />
<link rel="Apple-touch-icon-precomposed" sizes="76x76" href="Apple-touch-icon-76x76.png" />
<link rel="Apple-touch-icon-precomposed" sizes="152x152" href="Apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<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="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
最初の20件ほどのGoogleの結果を見たところ、これが圧倒的に最高でした。
[〜＃〜] gimp [〜＃〜] はそのための良いプログラムです。画像をPNGとして保存し、追加するだけです
<link rel="SHORTCUT ICON" HREF="/favicon.png">
<HEAD>ページのセクション。
16x16または32x32または64x64のアイコンファイルを作成します。 favicon.icoという名前を付けて、Webサイトのパブリックフォルダーのルートに配置します。
他のグラフィック形式を.icoに変換するWebサイトがあります。すなわち。 http://tools.dynamicdrive.com/favicon/
最高のオンラインファビコンツールの1つは、 FaviconGenerator.com です。高速でモダンなデザイン、毛羽立ちはありません。
.icoファイルを作成する場合は、 [〜＃〜] gimp [〜＃〜] を使用してfaviconsを作成することもできます。最新のブラウザは通常の画像ファイルを使用できますが、元々は単なる.icoファイルだと思います。 Photoshopに似たオープンソースの画像エディターです。適切なサイズ（たとえば32 x 32）の画像を作成および編集し、1つのレイヤーにフラット化し（同じファイルに複数のアイコンが必要な場合を除く）、. icoとして保存します。正しくフォーマットしてから、Stefanoの<link rel="SHORTCUT ICON" HREF="/favicon.ico"> Webページで使用します。
Asp.netを使用している場合は、この方法でページにファビコンを適用してみてください：
<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />
しかし、あなたはここでより多くの情報を見つけることができます： http://doctype.com/
ファビコンを作成するときは、次の要素を考慮に入れます。
- サポートされているプラットフォーム10年前、あなたはデスクトップブラウザのみをサポートしたかったので、解決策は古典的な
favicon.ico画像を生成することでした。最近では、iOS（およびiOS Safari）およびAndroid（およびAndroid Chrome）。Windows10（およびEdge）と新しいMac Bookをサポートする場合があります。 Pro Touch Bar（macOS Safari）：単一の「すべてのサイズに適合する」画像を使用することはできなくなりました。 - 設計複数のプラットフォームをサポートするとすぐに、複数の設計ガイドラインに直面します。たとえば、GoogleはAndroidの独自のネイティブアプリに透明なアイコンを使用していますが、iOSのアイコンはまったく透明にできません。 「すべてに適合する単一設計」アプローチを使用することはできません。
- 生成されたアイコンとHTMLコード2年または3年の間、すべてのケースをカバーするために可能な限り多くのアイコンを生成することが参照されてきました。私はこのトレンドをすべて自分で作成したのではないかと心配しています：-/問題は、20行程度の行またはHTMLになってしまうことです。満足のいく技術的ソリューションを得るには、生成されるアイコン/ HTMLの量とサポートされるプラットフォームのバランスを取る必要があります。
通常どおり、これらすべてのアセットを手動で作成できます。非常に具体的なニーズと予算がない限り、これは絶対に進むべき方法ではありません。
ほとんどの人にとって正しい方法は、ファビコンジェネレーターを使用して、すべてのアイコンの外観を決定し、すべての詳細を処理することです。これを行うのは Real Favicon Generator のみです。完全開示：私はこのサイトの著者です。
Photoshopを使用して、ファビコンを16 x 16または32 x 32にします。それをgifとして保存し、 IrfanView を使用してgifをicoに変換します。