この作業例に従い、同じコントロールを自分の画像に適応させてください。 ファビコン / ICOジェネレーターを開く.
明確なロゴを選択するか、イニシャルから始めましょう
「Favicon / ICO Generator」を開き、「Image（画像）」を選択します。PNG、JPG、JPEG、WebP、またはGIFをアップロードするか、「Try a sample（サンプルを試す）」を選択します。この例では、透明な角を持つ512 × 512ピクセルの紫色の軌道マークであるfavicon-orbit.pngを使用します。入力サイズは202,491バイトです。
完成したロゴがないブランドの場合は、ツールページで「Text（テキスト）」を選択します。1〜2文字を入力して「Continue（続行）」を選択します。エディタでは、モダンなサンセリフ体、クラシックなセリフ体、等幅フォントが提供され、テキストと背景の色を個別に設定できます。最大3文字まで入力可能ですが、文字数が多いと小さいサイズでは認識しにくくなる場合があります。
元のアートワークは保持してください。ジェネレーターは新しいアイコンファイルを作成し、ソースを上書きすることはありません。GIF入力は、アニメーションファビコンではなく静止アイコンになります。
モノグラムの場合、フォントメニューには3つのスタイルが含まれています。対応しているデスクトップブラウザで「Use system fonts（システムフォントを使用）」を選択し、デバイスにインストールされているフォントへのアクセスを許可します。前後の矢印を使用して隣接するフォントを比較するか、ファミリーを選択してライブプレビュー（特に16ピクセル）を確認します。フォントはデバイス内に留まり、含まれているスタイルは許可なしで動作します。
シンプルなシルエットを使用してください。詳細な写真は512ピクセルでは魅力的に見えても、16ピクセルでは不明瞭な点になってしまう可能性があります。
フレーミングを調整し、小さなプレビューを確認する
エディタには、明るいタブと暗いタブのブラウザプレビューと、一般的なアイコンサイズのプレビューが表示されます。まずは16ピクセルの例を確認してください。これは、マークが認識可能かどうかを判断する最も厳しいテストです。Apple Touchプレビューは180ピクセルのエクスポートを表しており、ワークスペース内では小さく表示されます。
スマートフォンで「Settings（設定）」を開きます。「Create from（作成元）」を「Uploaded image（アップロードされた画像）」に、「Image fit（画像のフィット）」を「Show the whole image（画像全体を表示）」に設定したままにします。このサンプルでは、「Space around content（コンテンツ周辺の余白）」を0に設定し、「Transparent background（透明な背景）」を有効にします。ソースにはすでに独自の丸みを帯びた紫色の形状と透明な余白が含まれているため、追加の背景色は必要ありません。
別のソースを使用する場合、「Show the whole image（画像全体を表示）」は端を維持しますが、「Fill the icon（アイコンを塗りつぶす）」は端をトリミングする可能性があります。「Rounded square（角丸正方形）」、「Square（正方形）」、「Circle（円）」で外側の形状を定義します。「Transparent background（透明な背景）」は透明な領域を保持しますが、写真にすでに描かれている不透明な背景を削除することはできません。フレーミングを変更するたびに、最小のプレビューを確認してください。
透明な角を持つロゴの場合、別の不透明な背景を追加すると、不要な2つ目の枠が表示されることがあります。両方の背景の選択肢をプレビューしてください。
このガイドの例
サンプルを試す: favicon-orbit.png、512 × 512 px。アップロードされた画像、画像全体を表示、角丸正方形、コンテンツ周囲の余白 0%、透明な背景を有効化、ウェブサイトアイコンパッケージ (ZIP)、ウェブサイト名 My website。
- ソース画像
- 512 × 512 PNG · 202,491 バイト
- ICO フレーム
- 16、24、32、48、64、128、256 px
- パッケージ
- 9 ファイル · 304,351 バイト
- 表示された結果
- 実際の 256 × 256 ICO フレーム
マルチサイズのICOまたはウェブサイトパッケージを選択してください
「ダウンロード」で、この例では「ウェブサイトアイコンパッケージ (ZIP)」を選択します。サンプルとして「ウェブサイト名」は「My website」のままにするか、自身のプロジェクトに合わせて実際のブランド名に変更してください。この名前は site.webmanifest で使用され、画像上にテキストとして追加されることはありません。
「スタート」を選択します。ブラウザは、favicon.ico の正方形画像（16、24、32、48、64、128、256 ピクセル）を含む 7 フレームを生成します。また、PNG アイコン（16、32、48、180、192、512 ピクセル）、マニフェスト、インストール手順も作成されます。結果はアイコンごとに個別のダウンロードボタンがあるのではなく、1 つの ZIP ファイルとして提供されます。
従来の favicon.ico のみが必要な場合は、代わりに「マルチサイズ ICO」を選択してください。これは、ウェブサイトのプラットフォームが ICO のアップロードを受け入れ、個別のパッケージを必要としない場合に便利です。
このパッケージはウェブサイトアイコンアセットのセットです。サイトを自動的にプログレッシブウェブアプリ（PWA）に変えるものではありません。
アイコンファイルのダウンロード、インストール、確認
「ダウンロード」で website-icons.zip が保存されます。実際の作業例には 9 つのファイルが含まれており、サイズは 304,351 バイトです。上記の比較では、シミュレートされたブラウザのスクリーンショットではなく、エクスポートされた ICO から抽出された実際の 256 ピクセルのフレームと、512 ピクセルのソースを並べて表示しています。
ZIP を解凍し、アイコンファイルをウェブサイトのルートディレクトリにアップロードして INSTALL.txt を読み取ります。これには ICO、PNG アイコン、Apple Touch アイコン、ウェブマニフェスト用の HTML リンクタグが含まれています。ファイルをサブフォルダに配置する場合は、HTML パスと site.webmanifest 内のアイコンパスの両方を更新してください。
新しいブラウザタブや、確認したいデバイスでサイトをチェックしてください。ブラウザはファビコンをキャッシュすることがあるため、古いアイコンが表示されてもインストールが失敗したとは限りません。エディタを更新するとメインツールページに戻ってしまうため、更新する前にソース画像とダウンロードしたパッケージを保持しておいてください。
アイコンの配置場所を 1 つの正規の場所に決め、HTML パスを一貫させてください。このジェネレーターはアセットを作成しますが、それらを公開するのはウェブサイトのワークフローの一部です。
よくある質問
ロゴをアップロードせずにファビコンを作成できますか？
はい。「テキスト」を選択し、イニシャルを入力してから、エディターでフォント、色、形状、間隔を選択してください。
ICO ファイルにはどのサイズが含まれていますか？
ICO には、PNG ベースの7つのフレーム（16、24、32、48、64、128、256 ピクセルの正方形）が含まれています。ブラウザが適切なフレームを選択します。
ウェブサイトZIPには何が含まれていますか？
これには favicon.ico、ブラウザ・Apple・Android用の6つの PNG アイコン、site.webmanifest、および HTML リンクタグを含む INSTALL.txt が含まれています。
ファビコンに透明な背景を使用できますか？
はい。「透明な背景」を有効にしてください。これによりソース周囲の透明な領域が保持されますが、写真から不透明な背景が削除されるわけではありません。
画像は変換のためにアップロードされますか？
いいえ。このツールはブラウザ内でアイコンファイルを生成・パッケージ化します。エディターは永続的なプロジェクトストレージではないため、ダウンロードしたファイルは保存しておいてください。
コンピューターにインストールされているフォントを使用できますか？
はい、ブラウザがローカルフォントアクセスをサポートしている場合に使用可能です。「テキスト / モノグラム」を選択し、「システムフォントを使用」を選択してブラウザの許可を与えてください。利用可能なフォントファミリーがフォントリストに表示されます。許可が拒否された場合やローカルフォントアクセスが利用できない場合でも、含まれているスタイルは引き続き使用できます。
次のウェブサイトに、明確で小さな署名を与えましょう。
サンプルを試すか、独自のファイルを使用して、共有前に結果を確認します。
