Favicon 生成ツール
このツールについて
正方形の PNG または SVG ロゴから、ウェブサイト用のアイコン一式を作成します。ZIP ファイルには 16×16、32×32、180×180、192×192、512×512 ピクセルの PNG アイコンと、複数のサイズを含む favicon.ico が収録されます。明るい背景と暗い背景で表示を確認してからダウンロードできます。
使い方
- 複数サイズの PNG アイコン
- 一般的なサイズを含む favicon.ico
- Apple Touch と PWA に適したサイズ
- 明るい背景と暗い背景でのプレビュー
- ZIP ファイルとしてダウンロード
- ロゴをアップロード: 縮小後も見やすくなるよう、512×512 ピクセル以上の正方形画像を使用します。
- サイズを確認: 16 ピクセルと 32 ピクセルでもロゴを識別できるか確認します。
- ZIP をダウンロード: 生成したファイルをウェブサイトの公開用ディレクトリに配置し、HTML とウェブアプリマニフェストで各サイズを指定します。
例
- Vite や React で作成した静的サイトの favicon を用意する
- ブランド変更後に PWA アイコンとウェブアプリマニフェストを更新する
- iOS のブックマーク用 Apple Touch アイコンを作成する
- 追加のコマンドラインツールなしでアイコン一式を作成する
制限事項
- 細かい要素が多いロゴは、16×16 ピクセルまで縮小すると識別しにくくなる場合があります
- SVG ファイルは選択した最大サイズで PNG と favicon.ico に変換されます
- アップロードしたロゴはブラウザ上で処理され、サーバーには送信されません。
よくある質問
- どのサイズが含まれますか？
- 通常は 16、32、48、180、192、512 ピクセルのアイコンと、複数サイズを含む favicon.ico が生成されます。
- 透明なロゴは暗いタブでどのように表示されますか？
- 暗い背景のプレビューで確認してください。小さいサイズでは、薄い背景を追加すると見やすくなる場合があります。
- ウェブサイトにはどのように設置しますか？
- 生成したアイコンを public/ ディレクトリに配置し、HTML とウェブアプリマニフェストで各サイズを指定します。