How to
favicon生成は、画像または短いテキストから favicon 一式をブラウザ内で作れるツールです。左側で素材と見た目を調整し、右側で favicon.ico、PNG、SVG、manifest、HTML 例、ZIP を確認して保存できます。
Use Cases
Capabilities
Guide
設定、入力、プレビュー、結果、保存など、画面内のエリアごとに操作方法を説明します。
01 HOWTO
上部ツールバーで画像入力かテキスト入力を選び、左側の「入力と調整」で favicon の元になる素材を指定します。
上部ツールバーの入力方法セレクタで、画像から作るかテキストから作るかを切り替えます。
左側のテキストロゴ欄に、favicon に使う短い文字を入力します。
入力した文字や画像が favicon の正方形内に収まるか確認します。
素材を入れると右側の出力ファイル一覧へ生成結果が反映されます。
02 HOWTO
左側の補助設定で、背景、余白、角丸、ブランド色、文字色を調整し、小さいサイズでも判別しやすい見た目に整えます。
テキスト、書体、太さ、文字サイズ、主色、文字色を同じ設定エリアで調整します。
背景、余白、角丸、文字色が小さい favicon として成立するか確認します。
見えづらい場合は、上部ツールバーで画像入力とテキスト入力を切り替えます。
調整後の favicon 一式が右側の出力ファイル一覧へ反映されます。
03 HOWTO
右側の「出力ファイル一覧」で、favicon.ico、PNG、SVG、manifest、HTML 例、ZIP が生成されているか確認します。
入力や見た目の変更後、右側の一覧で生成済みファイルを確認します。
favicon.ico、PNG、SVG、manifest、HTML 例、ZIP の有無と用途を確認します。
左側のプレビューに戻って、潰れや色の見え方を再確認します。
問題がなければ、一覧右上や各行の保存ボタンからファイルを保存します。
04 HOWTO
右側の一覧から ZIP をまとめて保存し、必要に応じて PNG、SVG、manifest、HTML 例を個別に保存またはコピーします。
一覧右上の ZIP 保存、各行のコピー・保存ボタンを使います。
保存前に必要なファイルが揃っているか一覧で確認します。
見た目を変えたい場合は左側の背景・色・文字設定を直します。
別案を作る場合は、入力方法や素材を変更して再生成します。
Notes
使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。
確認すること
favicon は 16x16 や 32x32 でも表示されます。細かい文字や複雑な画像より、短い文字や単純なマークの方が見分けやすくなります。
確認すること
単色やグラデーション背景を使う場合は、文字やマークが背景に埋もれないかを正方形プレビューとサイズ別プレビューで確認してください。
確認すること
生成した favicon ファイルだけでなく、HTML 例や manifest の内容もサイト側へ反映すると、ブラウザやホーム画面で使いやすくなります。
FAQ
使う前に判断しやすい質問を先に整理します。
いいえ。favicon の生成はブラウザ内で実行し、画像ファイルは外部へ送信しません。
favicon.ico、複数サイズの PNG、SVG favicon、site.webmanifest、HTML 例をまとめて生成できます。
はい。テキストロゴ補助を使うと、短い文字列から簡易 favicon を生成できます。
はい。生成した favicon 一式は ZIP でまとめて保存できます。
はい。出力プリセットに応じて site.webmanifest を生成できます。
はい。16x16 や 32x32 などのサイズ別プレビューで見え方を確認できます。
次に見る使い方
関連する使い方を続けて見られるように、次に確認しやすい導線をまとめています。
