ファビコン生成

1. 透かしを読み込む

PNG、JPG、WebPをドロップしてください。少なくとも512 pxの正方形画像で最良の結果が得られます。生成する最大ファイルが512で、拡大によって存在しない細部を作ることもないためです。正方形でない画像には、長辺に沿ってドラッグできる正方形の切り抜き枠が付きます。「全体を収める」に切り替え、帯状の余白を加えることもできます。どちらでも引き伸ばしはしません。パネルには寸法と透明度の有無が表示され、原画像が512 px未満なら警告します。その場合は512 pxのファイルが拡大され、ぼやけるためです。何も切れない場合は「全体を収める」が正直な選択ですが、その代償にも注意してください。横長のロゴは、上下に空の帯がある小さなマークになり、16 pxのタブでは大きな無駄な空間になります。

2. 実寸プレビューを確認

3つの正方形は、明るい色と暗い色の両方で、実際の16、32、180ピクセルで描画されます。下の模擬ブラウザータブでは、通常どおりページタイトルの横に16 px版を置きます。大半の生成ツールが省くこの手順こそが役立ちます。16 pxの正方形がただの染みに見えるなら、何度書き出しても直らず、より簡単なマークが必要です。画像サイズと角丸スライダーも同じプレビューに反映されるので、ダウンロード前に余白と丸みを確認できます。

このパネルで知っておくべき点は2つです。各正方形を囲む破線はアイコンの実際の境界です。これがなければ、余白付きまたはサイズスライダーで縮小されたアイコンは、空白が色見本と同じ色になるため、小さいアイコンと区別できません。また、明暗の色見本はいずれも、背景選択後に残る透明部分を表示します。そのため、絵柄に焼き付いた明るい縁は暗い見本、暗い縁は明るい見本でわかります。模擬ブラウザータブは同じ16 pxキャンバスを囲むCSSのUIであり、実際のブラウザーではありません。単独の16 pxはページタイトル横より大きく感じるため、表示する価値があります。

3. セットを選んでダウンロード

最小セットまたはレガシーセットを選び、「生成」を押してから、個別のファイルまたはZIPをダウンロードします。下のパネルからhead用のコードとマニフェストをコピーしてください。どちらにも、生成したファイルだけが正確に列挙され、それ以外は含まれません。マニフェストのブロックは完全なJSONオブジェクトで、そのまま次へ保存できます site.webmanifest；それでも次が必要です theme_color および background_color、自由に選べます。アプリ名を入力すると、次の項目に表示されます apple-mobile-web-app-title head内と、次として name マニフェスト内です。空ならどちらの行も出力されず、iOSはページタイトルを使います。通常はそれが適切です。