絵文字から作る場合
絵文字はOSやブラウザのフォントに依存するため、生成時の環境で見た目が決まります。サイトのロゴとして見た目を固定したい場合は、PNGやSVGなどの画像素材を使う方法も検討してください。
基本操作ガイド
favicon・Webアイコン生成ツールの使い方
文字・絵文字・画像から素材を作り、デザインと各環境の表示を確認して、favicon・Apple Touch Icon・PWAアイコン・設置コードを保存するまでを6つの手順で説明します。
favicon・Webアイコン生成ツールを開く基本操作
素材から保存までの6ステップ
1
素材とモードを選ぶ
テキスト・絵文字・画像から作り方を選び、アイコンの元になる素材を用意します。
テキストモードは1〜2文字、絵文字モードは1つの絵文字を入力します。画像モードではPNG・JPEG・WebP・SVGを1ファイル選択でき、ファイルサイズは最大20MBです。
2
デザインを調整する
配色、透明背景、サイズ、拡大率、余白、位置、角丸を調整します。
最初は配色プリセットを選ぶと調整を始めやすくなります。透明背景にする場合は、Apple Touch IconやPWAの表示で背景とのコントラストが下がらないかも確認します。
スライダーは、文字サイズ、描画領域内の拡大率、余白、水平・垂直位置、角丸の順に調整できます。リセットボタンで初期値に戻せます。
3
各サイズの表示を確認する
16px・32px・Android・PWA・maskable・ブラウザ表示を見比べ、切れや読みにくさを確認します。
入力や設定を変更したら「プレビューに反映」を押して、16px・32px・Android・PWA・maskable・ブラウザの表示を更新します。iPhoneホームのプレビューはリアルタイムで更新されます。16pxと32pxでは細い線や小さな文字が潰れやすく、Androidの円形・角丸では外側が切れることがあります。
maskableの点線は、重要な部分を収める目安です。点線の外側に文字やロゴの主要部分がある場合は、拡大率を下げるか余白を増やしてから再確認してください。
4
出力ファイルを選ぶ
基本セット、PWAセット、補助ファイルから必要なファイルを選びます。
基本セットにはfavicon.ico、16・32・48pxのPNG、Apple Touch Iconが含まれます。PWAセットには192・512px、maskable用512px、manifestが含まれ、補助ファイルにはHTMLタグとREADMEが含まれます。
サイトの用途に合わせて、セット選択ボタンまたは各チェックボックスを使います。迷う場合は、画面に選択されているファイルを確認してから次へ進みます。
5
設置コードを確認する
manifestの設定値と、HTML・Next.js・WordPress向けの設置コードを確認します。
manifestを選んだ場合は、サイト名、短縮名、開始URL、表示モード、背景色、テーマ色を入力できます。実際のサイトに合わせた値を入れると、生成後の設置時に置き換える箇所を減らせます。
通常HTML、Next.js App Router、WordPress向けのコードを切り替え、コピーして利用します。コピー後は、実際に配置するファイル名とコード内の参照先が一致しているか確認してください。
6
ZIPまたは個別に保存する
まとめて保存するか、必要なファイルだけを個別にダウンロードします。
ZIP一括ダウンロードでは、選択したファイルをまとめて保存できます。個別ダウンロードでは、favicon.icoや必要なPNGだけを選んで保存できます。
保存後は、ZIPのファイル数や個別ファイル名を確認し、サイトへ配置する前にブラウザや端末で表示を確認します。
補足
モード別の使い分け
画像から作る場合
画像モードでは、読み込み可能な形式とファイルサイズを確認してから素材を選びます。SVGに外部画像や外部フォントの参照がある場合は、環境によって表示が変わることがあるため、必要に応じてラスタライズした画像を用意します。
確認ポイント
よくあるつまずきと対処
文字を入力しても小さい表示で読みにくい
16pxや32pxでは、文字数が多いほど読みにくくなります。1文字に減らす、文字サイズを下げて余白を確保する、背景とのコントラストを上げるなどを試し、16pxプレビューで確認します。
Androidやmaskableのプレビューで端が切れる
円形・角丸の表示では、正方形の端が隠れることがあります。maskableのsafe zone内に重要部分が収まるよう、拡大率を下げるか余白と位置を調整します。
保存したあと、サイトでアイコンが表示されない
ファイル名、配置場所、HTMLやmanifestの参照先、キャッシュを確認します。favicon.ico・PNG・manifestのうち、実際に選択して保存したファイルだけが出力されているため、ZIPの中身も確認してください。
絵文字やSVGの見た目が環境によって違う
絵文字は生成時のOS・ブラウザのフォントに依存します。SVGは外部参照の有無でも描画が変わる場合があります。公開用に見た目を固定したい場合は、生成環境でプレビューを確認し、必要ならPNGなどに変換した素材を使います。