私はWordPressサイトで忙しくて、最後の仕上げを追加するためにステージに来ました。ファビコンです。私は主に開発者なので、グラフィックスとアイコンは私の最大のポイントではありません。

ファビコンを作成するときのベストプラクティスは何ですか（サイズなどの面で、既にデザインを持っています）。モバイル、タブレット、Retinaディスプレイなど、可能性のあるすべてのデバイスに対応したいと思います。また、ぼやけてしまうことを望まないため、使用するピクセル密度とすべてを知る必要があります。

あなたのためにこれを行う（そして適切に行う）Macアプリやオンラインツールがあれば、それも素晴らしいでしょう。それ以外の場合、IllustratorおよびPhotoshopを回避する方法を知っています。

Faviconsの基本-2013年のベストプラクティス：

ICO favicon.ico（32x32）

PNG favicon.png（96x96）

タイルアイコンtileicon.png（144x144）

Apple Touchアイコンapple-touch-icon-precomposed.png（152x152）

また、GitHubのファビコンのサイズ/タイプに対する「苦痛に取りつかれた」チートシート。

常に読む価値があります：http : //www.jonathantneal.com/blog/understand-the-favicon/

何を含めるのですか？

最小値の

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

強迫観念のために

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs)  -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

favicon.ico

favicon.icoはファビコンの中で最も古く、これを読んでいる多くの人々が生まれてから今日まで完全に機能しています。

16x16、32x32、および48x48のサイズの画像を含めることをお勧めします。

ファビコンを定義する標準的な方法：

<link rel="shortcut icon" href="/favicon.ico" />

ブラウザはWebサイトのルートディレクトリを検索するfavicon.icoため、リンクを省略できます。一部の古いブラウザfavicon.icoは、より適切なサイズのPNGが宣言されている場合でも、デフォルトで宣言されます。そのため、ルートでICOを宣言せずに、異なるサイズのPNGを宣言することをお勧めします。

favicon.png

HTML5では、sizes複数のサイズのアイコンの宣言に役立つ属性が導入されました。特定のPNGを使用すると、使用するサイズをより細かく制御でき、正しい画像のみが読み込まれます。

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

• www.w3.org-HTML5-リンクタイプ「アイコン」

宣言するサイズは、サポートするデバイスによって異なります。一般的なサイズとそれほど一般的でないサイズ：

• 32x32
• 48x48
• 64x64
• 96x96
• 128x128 Chromeウェブストアアイコン
• Android向け160x160 Chrome
• 192x192 Chrome for Android
• 195x195 Operaスピードダイヤルアイコン
• 196x196 Chrome for Android
• 228x228 Opera Coastアイコン

Apple Touchアイコン

iOS Webクリップのアイコンには、さまざまなデバイスと解像度に応じたさまざまなサイズがあります。1つまたは複数のサイズのアイコンを指定できます。関連するサイズのアイコンが見つからない場合、サイズが宣言されていない汎用アイコンが使用されます。

リンク要素を使用してアイコンが指定されていない場合、iOSはルートディレクトリでapple-touch-iconプレフィックスの付いたアイコンを検索します。iOSデバイスは、これらのアイコン（Android Chromeなど）を使用する唯一のデバイスではないため（奇妙なことに）、宣言する方が安全なオプションです。

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

• iOSヒューマンインターフェイスガイドライン-アイコンサイズ

• iOS開発者ライブラリ-WebクリップのWebページアイコンの指定

Windowsタイル

タイルは、WebサイトをWindowsまたはWindows Phoneのスタート画面に固定し、さまざまなサイズで表示するときに使用されます。

<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

推奨される画像サイズは、それらの画像の名前が示すよりも大きいです。これらは、microsoft.comからの推奨サイズです

                   | Minimum   | Recommended
Small  | 70 x 70   | 56 x 56   | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide   | 310 x 150 | 248 x 120 | 558 x 270
Large  | 310 x 310 | 248 x 248 | 558 x 558

タイルの色とタイトル

タイルのデフォルトの動作は、<title>タグからタイルのタイトルを取得し、タイル画像の透明度を尊重して背景色を表示することです。次のメタタグを使用して、色とタイトルをカスタマイズできます。

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

browserconfig.xml

すべてのmsapplicationメタタグを削除し、ルートフォルダ内のXMLファイルに置き換えることができますbrowserconfig.xml。XMLファイルは次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/tile-small.png"/>
      <square150x150logo src="images/tile-medium.png"/>
      <wide310x150logo src="images/tile-wide.png"/>
      <square310x310logo src="images/tile-large.png"/>
      <TileColor>#582686</TileColor>
    </tile>
  </msapplication>
</browserconfig>

さらに読むとリソース

• ファビコンチートシート

• ファビコン、タッチアイコン、タイルアイコンなど、どれが必要ですか？-クイズとして書かれていますが、多くの有用な情報が含まれています（そして、あなたはそれを記事として読むことができます、それはクイズであることを忘れてください）

• アイコンハンドブック

• ImageMagick-画像を変換するための便利なコマンドラインツール。

• RealFaviconGenerator.net-包括的なファビコンジェネレーター。

• FAVIC-O-MATIC-簡単にカスタマイズ可能な出力形式を備えた包括的なファビコンジェネレーター。

このツールは非常に時間を節約できます。やってみて！それはあなたのためにすべての世話をします。

800px x 800px付近に画像をアップロードしてください。

http://realfavicongenerator.net/

また、このメタタグを追加して、iOSデバイスにアイコンが保存されている場合にアイコンに名前を付けられるようにします。

<meta name="apple-mobile-web-app-title" content="Website Name">

お役に立てば幸いです！

このGRUNTタスクを使用して、考えられるすべてのバリアントを生成します。

https://github.com/gleero/grunt-favicons

PNG画像からすべての既知のタイプとサイズのアイコンを生成します。ImageMagickを使用します。

入力： pngの正方形のロゴ。また、source.16x16.pngなどの解像度プレフィックスを付けてソースファイルの近くに保存することもできます。

出力：

favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

HTMLファイルに変更を追加します。

http://faviconit.com

1つの高解像度PNGからすべてのデバイスに対して約15の異なるアイコンサイズを作成します。

私もファビコンソリューションを探していましたが、サードパーティのWebサービスに依存したくありませんでした。単純なビルドステップとして機能する一般的なソリューションが見つからなかったため、faviconbuildを作成しました。ImageMagickに依存しているため、システムの最新バージョンをダウンロードしたり、リリースで提供したものを使用したりできます。

私はMITライセンスの下でそれをリリースしたので、誰でも自由に商業的または個人的な使用に使用したり、単にそこからインスピレーションを得たりします。バグを見つけたり、拡張したい場合は、気軽に参加してください。

プロジェクトページをより詳細な情報で更新しますが、既に非常に便利で標準的なヘルプメニューがあり、Unix、Mac、およびWindowsで動作します。

ターミナルで.batまたは.shスクリプトを実行するだけです。

ex for Windows：

faviconbuild.bat -h

またはUnix / Mac（またはCygwinを使用している場合はWindows）：

faviconbuild.sh -h

これにより、使用可能なオプションとともにバージョン情報が提供されます。このスクリプトは、入力画像を取得し、必要なすべての画像をWebサイトに含めるために必要なHTMLマークアップとともに出力するように設計されています。

これは、現在私のプロジェクトの1つでそれを使用している例です。

./faviconbuild/faviconbuild.sh -i ./source.png

faviconbuildフォルダーをプロジェクト固有のフォルダーに配置しただけなので、実際のプロジェクトファイルに触れたり、source.pngを配置したりする必要はありませんでした。スクリプトのデフォルトの動作は、gitを使用している場合にプロジェクトと衝突しないように、すべてをgitignoredのネストされたビルドフォルダーに入れることです。

何か足りない場合は、機能のリクエストを送信してください。

また、詳細情報を含むブログ投稿もあります。

これがあなたのお役に立てば幸いです。

ファビコンのサイズとジェネレーターに関する多くの有用な情報がここにあります。

さまざまなサイズの設計ニーズを説明することで、ディスカッションに追加できます。

はい、ファビコン、アイコン、シンボル、およびロゴのサイズは同じアートに基づくことができますが、最も正確に表示されるようにそれぞれをそのサイズに合わせてレンダリングする必要があります（自動ジェネレーターは、 16ピクセルサイズと自動生成された画像は、小さく開始した場合、128ピクセルサイズに最適化されません。

あなたが望むすべての3Dトリックを使用して、128ピクセルまたは任意の大きなサイズの正方形フォーマットでアートを描きます。異なるサイズのアイコンを一度に1つずつエクスポートし、結果を調べて、そのサイズで最適に動作するようにマスターを調整します。

16 x 16の場合、16x16の正方形のグリッドを作成し、出力を最も制御できるように個別に色付けします。