元画像選択
画像をドラッグ&ドロップ
またはクリックしてファイルを選択
推奨: 正方形の画像（256x256px以上）
対応形式: JPEG, PNG, WebP, SVG など
Favicon生成について
各サイズの用途
- 16x16, 32x32: ブラウザタブ、ブックマーク
- 48x48: Windowsタスクバー、ショートカット
- 96x96: Androidホーム画面
- 180x180: iOS Safari（apple-touch-icon）
- 192x192, 512x512: Android Chrome（PWA）
最適化のコツ
- 正方形の画像を使用する
- シンプルで認識しやすいデザインにする
- 小さいサイズでも視認できるよう太い線を使用
- 背景が透明な場合は適切な背景色を設定
設置方法
- 各Faviconファイルを個別にダウンロード
- 画像ファイルをWebサイトのルートディレクトリに配置
- HTMLコードを<head>タグ内に追加
- PWA対応の場合はmanifest.jsonも配置して参照を追加
注意事項
- Faviconの生成処理はブラウザ内で完結します
- 画像はサーバーに送信されません
- PNG形式での出力となります
- ブラウザによってはキャッシュの影響で変更が反映されない場合があります
広告
このツールでできること
Favicon生成では画像からFaviconを生成ができます。ブラウザ上で条件を変えながら動作や結果を確認したいときに使いやすいツールです。
基本的な使い方
- 1元になる画像を読み込みます。
- 2必要なサイズや出力形式を選びます。
- 3生成した favicon 一式を保存してサイトに配置します。
使う前のポイント
小さいサイズでは細かい図柄が潰れやすいため、16px や 32px の見え方も確認してください。
関連ツール
基本的な使い方
- 1元になる画像を読み込みます。
- 2必要なサイズや出力形式を選びます。
- 3生成した favicon 一式を保存してサイトに配置します。
使う前のポイント
小さいサイズでは細かい図柄が潰れやすいため、16px や 32px の見え方も確認してください。