web-dev-qa-db-ja.com

複数のファビコンサイズを使用しながら、デフォルトで16x16のみを配信する方法

一般に、複数のサイズでfavicon.icoを提供することをお勧めします。これは、ショートカットが作成されたとき、またはサイトが固定されたとき（IE9）によく見えるためです。ただし、ファビコンのサイズは簡単に10倍になり、サイトの読み込みが遅くなります（私の場合、16x16ファビコンは1kb、16、32、64 = 30kbです）。

FacebookやYahooなどのサイトでは、デフォルトで1x16未満の16x16ファビコンが提供されますが、これらのサイトを固定すると、使用される画像は適切なサイズになります。大きな画像は必要なときにだけ読み込まれ、ジレンマが修正されると思います。これらのサイトがこれをどのように行うかを理解しようとして失敗しました。誰もこれを知っていますか？

favicon
30
user1190803

更新：

私の元の答えは以下ですが、この投稿を書いているので、HTML 5でファビコンを処理するより良い方法があるかもしれないと信じています。モバイルデバイスを含む他のブラウザ用の高解像度のファビコン（PNGファイルタイプ）。追加情報については、 こちらの回答をご覧ください をご覧ください。

質問に対する元の回答：

方法は次のとおりです。

  1. png2icoをダウンロード 。 c：\に抽出します

  2. お気に入りのプログラムでアイコンを作成します。 64x64、32x32、16x16を作成します。 （注：64x64はおそらく必要ないため、ファイルサイズが大きくなります。ただし、少なくとも32x32および16x16を使用してください）icon-64.png（64x64サイズの場合）icon-32.png（32x32）およびicon-16.png（ 16x16）png2icoと同じフォルダ内。色を最小限に抑えます。

  3. コマンドプロンプトを開く-ディレクトリをpng2icoフォルダーに変更します。 （cd \png2ico）

  4. 適切なディレクトリで次のコマンドを実行します。

    png2ico.exe favicon.ico --colors 16 icon-64.png icon-32.png icon-16.png

    注：64x64サイズのアイコンを追加した場合のファイルサイズの違いにより、ファイルが2kb増加しました。 32x32と16x16を使用します。 （icon-64.pngを削除して上記と同じコードを実行します）

  5. Png2icoフォルダーからfavicon.icoファイルを取得します。サーバーにアップロードして、ヘッダーに<link rel="shortcut icon" href="http://example.com/favicon.ico" />を追加してください。

作業中に、iPadおよびiPhone用のアイコンを作成してください。 推奨サイズの詳細と、それらをサイトに実装する方法についてはこちらを参照してください 。

また、 より一般的な情報 Faviconsについてはこちらをご覧ください。

注：これがFacebookやYahooのやり方なのかどうかはわかりませんが、どのようにすればよいかというあなたの質問に答えます。

36
L84

Facebookの「favicon.ico」には、16x16と32x32の2つのサイズが含まれています。 2つのicoイメージを1つに結合する方法を知っていると思いますが、「トリック」は2つの非常に最適化されたイメージを使用していることです。

Photoshopが肥大化したPNGファイルと肥大化したICOファイルを作成することがわかりました。 （注：Photoshopでは、ICOファイルを作成するためのプラグインが必要です。）

小さな、最適化されたICOファイルを作成するために見つけた最良の方法は、「Gimp」と呼ばれる有名な無料の画像エディタを使用することです。要するに、ICOファイルを作成するには、このチュートリアルに従ってください。
http://egressive.com/tutorial/creating-a-multi-resolution-favicon-include-transparency-with-the-gimp
重要なヒント：.icoイメージを保存する手順に進み、ピクセルあたりのビット数（bpp）を指定できる場合は、4bppまたは類似したものに変更します（確認するには実験が必要です）画質を落とさずにどれだけ低くできるか）。

上記の手順を使用して、16x16および32x32の画像を含む1kbのファビコンを作成できました。それに比べて、Photoshop、プラグイン、その他のさまざまなツールを使用して同じファビコンを取得できる最小サイズは5kbでした。

19
Doug S

または、ImageMagickがインストールされている任意のLinuxボックスにログインし、ソース画像（解像度が少なくとも256x256ピクセルでPNG形式のファイル）を「favicon.png」に変更し、次のコマンドを実行します。

convert favicon.png -bordercolor white -border 0 \
      \( -clone 0 -resize 16x16 \) \
      \( -clone 0 -resize 32x32 \) \
      \( -clone 0 -resize 48x48 \) \
      \( -clone 0 -resize 57x57 \) \
      \( -clone 0 -resize 64x64 \) \
      \( -clone 0 -resize 72x72 \) \
      \( -clone 0 -resize 110x110 \) \
      \( -clone 0 -resize 114x114 \) \
      \( -clone 0 -resize 120x120 \) \
      \( -clone 0 -resize 128x128 \) \
      \( -clone 0 -resize 144x144 \) \
      \( -clone 0 -resize 152x152 \) \
      \( -clone 0 -resize 180x180 \) \
      \( -clone 0 -resize 228x228 \) \
      -delete 0 -alpha off -colors 256 favicon.ico

そして、よく知られているほとんどの形式のfavicon.icoを1つのファイルに焼き付けます。

また、ファビコンの詳細については、ファビコンのチートシート@ https://github.com/audreyr/favicon-cheat-sheet も必ずチェックアウトしてください。

5
Henry van Megen

スクリプトが好きなら、ImageMagickを使用して任意の画像をマルチ解像度のファビコンに変換するスクリプトを作成しました。

http://blog.lavoie.sl/2012/11/multi-resolution-favicon-using-imagemagick.html

FacebookとYahooが高解像度の「ピン留め」画像を持つことができる理由についての質問については、 Apple-touch-icon および og：image もあるためです。

0
sebastien

複数のサイズの.PNGを作成し、それらを1つの.ICOファイルにマージするWindowsバッチファイル：

@echo off

set inkScape="C:\SOFTWARE\GRAPHIC\INKSCAPE\inkscape.exe"
set imageMagick="C:\SOFTWARE\DEVELOPER\IMAGEMAGICK\magick.exe"
set fileName=favicon
set importType=svg
set exportType=png
set exportDpi=300
set imageSizes=(16 24 32 48 57 60 64 70 72 76 96 114 120 128 144 150 152 180 192 196 256 300 320 400 450 460 480 512 600)

for %%s in %imageSizes% do (
 %inkScape% -z -f %~dp0%fileName%.%importType% -w %%s -h %%s -e %~dp0%fileName%-%%sx%%s.%exportType% -d %exportDpi%
 echo CREATED: %fileName%-%%sx%%s.%exportType%
 set e=%fileName%-%%sx%%s.%exportType%
 call :concat (e)
)

%imageMagick% %exportFileNames%"%~dp0%fileName%.ico"
echo MERGED IN: %fileName%.ico

pause goto :eof


:concat (e) (
 set exportFileNames=%exportFileNames%"%~dp0%e%" 
)

.PNGファイルが必要ない場合は、del FILEでそれらを削除（または削除）するか、削除可能なディレクトリ内にすべてのPNGを保存できます（%imageMagick% %exportFileNames%"%~dp0%fileName%.ico"の後）。

それが誰かを助けることを願っています。 :)

0
Froschkoenig84