ファビコンの寸法？
Favicon.pngという名前の高さ= 26ピクセル/幅= 20ピクセルのファビコンがあります。
<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />
しかし、私のブラウザでは、favicon.pngはすべて歪んでいます。
質問：私のfavicon.pngは特定のサイズになっていますか？また、規格外のサイズ/寸法を使用することができますが、その場合はどうすればよいですか？
短い答え
faviconはICOフォーマットで-16_16、32x32、48x48の画像のセットであると仮定されています 。 ICOフォーマットはPNGとは異なります。正方形以外の絵はサポートされていません。
Faviconを生成するには、以下で説明する多くの理由から、 faviconジェネレータ を使用することをお勧めします。完全開示：私はこのサイトの作者です。
長くて総合的な答え
ファビコンは正方形でなければなりません。デスクトップブラウザとApple iOSは、正方形以外のアイコンをサポートしません。
Faviconはいくつかのファイルでサポートされています。
favicon.icoアイコン。- 他のPNGアイコン.
デスクトップブラウザ（Windows/IE、MacOS/Safariなど）で最高の結果を得るには、両方の種類のアイコンを組み合わせる必要があります。
favicon.ico
すべてのデスクトップブラウザでこのアイコンを処理できますが、主に古いバージョンのIE用です。
ICO形式はPNG形式とは異なります。 ICO拡張子で誤って名前が変更された場合でも、一部のブラウザではPNG画像を正しく処理するのに十分なほど賢いため、この点は注意が必要です。
ICOファイルには複数の画像を含めることができ、 マイクロソフトでは、16×16、32×32、および48×48バージョンのアイコンをfavicon.ico に配置することを推奨しています。たとえば、IEはアドレスバーに16 x 16バージョンを使用し、タスクバーのショートカットに32 x 32バージョンを使用します。
Faviconを宣言します。
<link rel="icon" href="/path/to/icons/favicon.ico">
ただし、 favicon.icoをWebサイトのルートディレクトリ に配置し、 と宣言しないことをお勧めします。 そして最近のブラウザにPNGアイコンを選択させる。
PNGアイコン
最近のデスクトップブラウザ（IE11、最近のバージョンのChrome、Firefoxなど）は、PNGアイコンを使用することを好みます。通常予想されるサイズは、 16 x 16、32 x 32、および「できるだけ大きいサイズ」 です。例えば、MacOS/Safariは、それが見つけることができる最大のものであれば196 x 196のアイコンを使います。
推奨サイズは？お気に入りのプラットフォームを選択してください。
- ほとんどのデスクトップブラウザ：16×16、32×32、「できるだけ大きい」
- Android Chrome：192x192
- Google TV：96x96
- ...そして、多かれ少なかれ文書化されているもの。
PNGアイコンは次のように宣言されています。
<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...
注意： Firefoxはsizes属性をサポートせず、最後に見つかった のPNGアイコンを使用します。最後に32x32の画像を宣言するようにしてください。Firefoxにはそれで十分であり、それは必要のない大きな画像をダウンロードすることを妨げます。
また、 Chromeはsizes属性をサポートしていないため、宣言されたすべてのアイコン を読み込む傾向があります。あまりにも多くのアイコンを宣言しないでください。
モバイルプラットフォーム
この質問はデスクトップのファビコンに関するものなので、このトピックを詳しく調べすぎる必要はありません。
AppleはiOSプラットフォーム用のタッチアイコンを定義しています 。 iOSは正方形以外のアイコンをサポートしません。 正方形にならないように、正方形以外の画像を単純に拡大縮小します（Kioskeaの例を参照） 。
Android ChromeはApple touchアイコンに依存し、192x192のPNGアイコン も定義しています。
Microsoftはタイル画像 と browserconfig.xmlファイル を定義しています。
結論
至る所で機能するファビコンを生成することは非常に複雑です。 faviconジェネレータ を使うことをお勧めします。完全開示：私はこのサイトの作者です。
16×16ピクセル、* .ico形式。
2019規格のおかげで faviconit
私は faviconit.com を使って可能な限り最高のブラウザとデバイスサポートを提供します。画像をアップロードすると、このサイトにコード、変換された画像、およびbrowserconfigファイルが表示されます。
私たちは16x16の私達のウェブサイトに手動でfaviconをアップロードすることができ、それはおそらくほとんどすべてのブラウザに現れるでしょう。
しかし、あなたがあなたのスマートフォンやタブレットであなたのお気に入りの一つとしてそれをマークするとき、私たちはより大きな画像（60×60から144×144）が必要になります。
そして、私たちのユーザーの一人が自分のデスクトップにショートカットを作成したとしましょう。その場合、196 x 196の方が見栄えがいいです。
すべての変換された画像の隣に、faviconitがあなたにくれるもののコード例：
<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="Apple-touch-icon" href="/favicon-57.png">
<link rel="Apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="Apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="Apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="Apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="Apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="Apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="Apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="Apple-touch-icon" sizes="180x180" href="/favicon-180.png">
Windows 8以降
しかしそれだけではありません。 Windows 8以降、タイル付きのWebサイトへのショートカットを作成することができます。
<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
Browserconfig.xml
Browserconfig.xmlという名前のファイルをアップロードします（windows> 8のタイルを有効にするため）。
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/favicon-70.png"/>
<square150x150logo src="/favicon-150.png"/>
<square310x310logo src="/favicon-310.png"/>
<TileColor>#FFFFFF</TileColor>
</tile>
</msapplication>
</browserconfig>
ウィキペディア はこう言っています：
さらに、そのようなアイコンファイルのサイズは16×16または32×32ピクセル、色深度は8ビットまたは24ビットのいずれかです（GIFファイルには256色のパレットエントリが制限されていることに注意してください）。
私は最善の方法は32 x 32 GIFを使用して、それを異なるブラウザでテストすることだと思います。
最も簡単な解決策は、1つの（！）PNG画像を使用することです（2018年）。
これをドキュメントの先頭に追加するだけです。
<link rel="shortcut icon" type="image/png" href="/img/icon-196x196.png">
<link rel="shortcut icon" sizes="196x196" href="/img/icon-196x196.png">
<link rel="Apple-touch-icon" href="/img/icon-196x196.png">
最後のリンクはApple（ホーム画面）、2番目のリンクはAndroid（ホーム画面）、そして最初のリンクは残りのリンクです。
このソリューションはWindows 8/10の 'タイル'をサポートしていないことに注意してください。ショートカット、ブックマーク、ブラウザタブの画像をサポートします。
いいえ、アイコンが表示されている場所を問わず、人々のブラウザに大損害を与えるので、標準外のサイズやサイズを使用することはできません。アスペクト比を維持するために12 x 16（12ピクセル側に4ピクセルの白/透明のパディングを含む）にすることはできますが、それ以上大きくすることはできません（できますが、ブラウザでは縮小されます）。
favicon.icoは16 x 16です
<link rel="shortcut icon" href="favicon.ico"/>
そして私はこれらをモバイルやタブレットで美しくするために使います。
<link rel="Apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png">
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png">
<link rel="Apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png">
<link rel="Apple-touch-icon-precomposed" href="img/ico57.png">
多くのブラウザは最初にそこを見つけようとするので、ルートに "favicon.ico"という名前を使うことが重要です。
あなたのファイルは.icoタイプであるべきだと思われます。
Faviconsについてこの記事をチェックしてください。
Faviconのフォーマットは正方形でなければなりません、そうでなければブラウザはそれを伸ばします。残念ながら、Internet Explorer 11未満は.gif、または.pngファイルタイプをサポートしていませんが、Microsoftの.icoフォーマットのみをサポートしています。あなたはのようないくつかの "faviconジェネレータ"アプリを使用することができます。 http://favicon-generator.org/
選択した画像のフォーマットは、8ビットまたは24ビットカラーを使用して、16 x 16ピクセルまたは32 x 32ピクセルでなければなりません。画像のフォーマットは、PNG（W3C規格）、GIF、またはICOのいずれかでなければなりません。 - あなたのサイトにFaviconを追加する方法 - QA @ W3C
Webサイトのファビコンは通常* .icoファイルである必要があり、32×32または16×16にすることができます。標準以外のサイズを使用すると、すべてのブラウザで機能するわけではなく、自分が見たようにすべてが歪んで表示されます。このサイトを使ってその画像を変換してみてください。 http://www.favicon.cc/ そしてそれを試して使ってみませんか？