web-dev-qa-db-ja.com

Google Chrome間違ったサイズのファビコンを使用しています

「IconComposer」を使用してMacでICOファイルを作成すると、5つの画像（16x16、24x24、32x32、48x48、256x256）を指定できます。 16x16と32x32を指定した場合Google Chrome（Mac OS X）は、タブの名前の横とお気に入りの下に表示されるアイコンとして32x32の画像を使用します（16x16にサイズ変更されます） 。これにより、アイコンがぼやけて見えます。

Favicon.icoを正しく作成していますか？ブラウザに16x16の画像を使用するように指示するには、他に何かする必要がありますか？私は現在持っています：

<head>
  <link rel="shortcut icon" href="/favicon.ico" />
</head>
google-chromefavicon
21
Kevin Sylvestre

これをChromeで正しく機能させるには、setsizesを最大のアイコンサイズに設定します利用可能：

<link rel="shortcut icon" href="favicon.ico" sizes="256x256">

Visual Studio Image Library のアイコンでテストしました。これには、16x16、32x32、48x48、および256x256のサイズが含まれています。これにより、ブラウザーのタイトルバーに16x16サイズ、タスクバーに32x32サイズ、およびWindows 7デスクトップに適切なサイズ（異なる場合があります）が正しくレンダリングされます。

複数のサイズごとにlink要素をリストすること、または1つのlink要素に複数のサイズをリストすることについて多くのアドバイスを見つけましたが、利用可能な最大サイズを使用することが唯一の方法でした。ファビコンを取得して、適切なすべてのサイズで正しくレンダリングします。 Chromedownは、大きすぎるファビコンから、可能な場合は適切な小さいサイズを見つけることで拡大縮小しますが、拡大縮小しますupすでに持っている小さいサイズを爆破することにより、sizes属性を使用可能な最大サイズに設定する必要があります。

サイズを256x256に設定しても、他のブラウザで問題が発生することはないようです。 IE、Firefox、Safariはすべて、期待どおりに16x16サイズを使用します。

15
Ryan Lundy

Icoファイルで16pxバージョンを使用します。 Chromeは、ファブアイコンの複数の解像度もサポートしています。例：

<link rel="icon" href="/fav32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/fav64.png" sizes="64x64" type="image/png">
<link rel="icon" href="/fav128.png" sizes="128x128" type="image/png">

アイコンに3つの異なる画像サイズを提供します。詳細については、仕様[1]を参照してください。

[1] http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon

12
Kinlan

いくつかのテストの後、それは私には次のように見えます：

  1. 最初に検出されたアイコンはchromeのタブ、またはアプリケーションモードの場合は左上隅で使用されます。最初のリンクにも使用されます。メニュー。
  2. サイズ値が最大のアイコンデスクトップショートカットとタスクバーに使用されます

私が次の注文をしたとき：

<link rel="icon" href="icon64x64.png" sizes="64x64" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon16x16.png" sizes="16x16" type="image/png" />

すべてのアイコンの64x64アイコンのサイズを変更しました。

私が次の注文をしたとき：

<link rel="icon" href="icon16x16.png" sizes="16x16" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon64x64.png" sizes="64x64" type="image/png" />

chromeのタブ/左上とスタートメニューのショートカットにある16x16アイコンを使用しましたが、デスクトップとタスクバーにある64x64アイコンを使用しました。

私がこれをしたとき：

<link rel="icon" href="icon64x64.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="64x64" type="image/png" />

タブ/スタートメニューのアイコンに最初の画像（icon64x64.png）を使用しました。デスクトップとタスクバーの画像には、最大サイズ（sizes = "64x64"）の値の画像を使用しました。最大の画像ではなく、サイズの値が最大の画像です。

16x16に拡大縮小されたぼかしのアイコンがあるので、そのサイズの別のアイコンが必要でした。

4
tBone77

これは私にとってはうまくいきました：64x64と128x128が埋め込まれた32x32のアイコンを作成し、htmlにsizes = "64x64"を追加しました

<link rel="shortcut icon" href="favicon.ico" sizes="64x64">
1
Juke