How to
favicon生成は、ブラウザ内で画像またはテキストロゴを元に、Web サイトで使う favicon 一式をまとめて生成できるツールです。正方形プレビューで背景、角丸、文字サイズ、色を確認しながら調整し、生成後にサイズ別プレビューと出力ファイルを確認できます。
Use Cases
Capabilities
Steps
画面を見ながら進められるように、操作の順番と確認ポイントをまとめています。
STEP 1
画像から作成するか、テキストから作成するかを選び、背景、角丸、文字サイズ、色を正方形プレビューで確認しながら調整します。
画像から作成する場合はファイルを追加し、テキストから作成する場合は短い文字を入力します。
書体、太さ、文字サイズ、文字色を選び、背景との見え方を確認します。
生成前に、背景、角丸、文字や画像の見え方を正方形の状態で確認できます。
STEP 2
設定を確認したら favicon を作成し、サイズ別プレビュー、出力ファイル一覧、HTML 例、manifest を確認して保存します。
設定内容を元に favicon セットを生成します。生成後に右側のプレビューとファイル一覧が更新されます。
16x16、32x32、180x180、192x192 の見え方を確認し、小サイズで潰れていないかを見ます。
個別ファイルまたは ZIP を保存し、HTML 例や manifest をコピーしてサイトへ反映できます。
Notes
使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。
確認すること
favicon は 16x16 や 32x32 でも表示されます。細かい文字や複雑な画像より、短い文字や単純なマークの方が見分けやすくなります。
確認すること
単色やグラデーション背景を使う場合は、文字やマークが背景に埋もれないかを正方形プレビューとサイズ別プレビューで確認してください。
確認すること
生成した favicon ファイルだけでなく、HTML 例や manifest の内容もサイト側へ反映すると、ブラウザやホーム画面で使いやすくなります。
FAQ
使う前に判断しやすい質問を先に整理します。
いいえ。favicon の生成はブラウザ内で実行し、画像ファイルは外部へ送信しません。
favicon.ico、複数サイズの PNG、SVG favicon、site.webmanifest、HTML 例をまとめて生成できます。
はい。テキストロゴ補助を使うと、短い文字列から簡易 favicon を作成できます。
はい。生成した favicon 一式は ZIP でまとめて保存できます。
はい。出力プリセットに応じて site.webmanifest を生成できます。
はい。16x16 や 32x32 などのサイズ別プレビューで見え方を確認できます。
次に見る使い方
関連する使い方を続けて見られるように、次に確認しやすい導線をまとめています。
