ファビコン生成: favicon.ico・PNG・Apple Touch Icon を作成
画像やテキストから favicon.ico、PNG ファビコン、Apple Touch Icon、Web アプリマニフェストをブラウザ上で作成し、HTML タグもコピーできます。
ここに画像をドロップするか、画像を選択
PNG、JPG、WebP、GIF（最初のフレーム）、BMP、SVG に対応します。512 × 512 ピクセル以上の正方形の画像が最適です。
テキストはこの端末にインストールされたフォントで描画されるため、別のパソコンやスマートフォンでは文字や絵文字の見た目が変わることがあります。ダウンロードした PNG と ICO ファイルは、ここに表示されている見た目のまま保存されます。
プレビュー
16、32、48 は実際のサイズで、それより大きいアイコンは縮小して表示しています。市松模様は透明な部分を示します。
ブラウザのタブでの表示
明るいテーマと暗いテーマの簡易的なタブバーです。どちらでもアイコンが見えることを確認してください。透明な背景に暗い色のロゴを置くと、暗いタブバーでは見えなくなることがあります。
ファイル
一部の Apple 端末では、ホーム画面アイコンの透明な部分が黒く表示されるため、apple-touch-icon.png は透明なしで保存され、透明な部分はこの色で塗りつぶされます。iPhone と iPad はホーム画面アイコンの角を自動的に丸めるため、形の設定はこのアイコンには適用されません。
HTML タグとマニフェストで使われます。「/」はウェブサイトのルートフォルダーを表します。
背景、形、余白、切り抜きの設定は、favicon.svg には適用されません。
ブラウザは、テーマカラーをアドレスバーやウィンドウのタイトルの色付けに使うことがあります。アプリの背景色は、インストールした Web アプリの起動中に表示されます。
画像を選択するか、テキストに切り替えて始めてください。
site.webmanifest の内容
注意事項
- ファイルはウェブサイトのルートフォルダー（トップページがあるフォルダー）にアップロードしてください。別のフォルダーに置く場合は、HTML とマニフェストのパスが一致するよう、上でそのフォルダーを入力してください。
- favicon.ico には、PNG データとして保存した 16 × 16、32 × 32、48 × 48 の画像が含まれます。現在のブラウザと Windows Vista 以降はこれを読み込めますが、非常に古いプログラムの中には、非圧縮のアイコン画像しか読み込めないものもあります。
- 64 × 64 の画像のような小さな素材は、大きいアイコン用に拡大されるため、ぼやけて見えます。できれば 512 × 512 ピクセル以上の画像か SVG ファイルを使ってください。
- テキストのアイコンには、作成に使った端末にインストールされたフォントが使われます。PNG と ICO ファイルではその見た目が保たれますが、別の端末でアイコンを作り直すと結果が変わることがあります。
- SVG ファイルはブラウザが描画します。SVG ファイルがほかのファイルやウェブサイトから読み込む画像、フォント、スタイルは読み込まれないため、アイコンから欠けることがあります。
- ブラウザはファビコンを長期間キャッシュします。ファビコンを差し替えた後も、しばらくは古いものが表示されることがあります。強制再読み込み、プライベートウィンドウ、HTML 内のファイル名の変更などが役立ちます。
- 画像とテキストはブラウザ内で処理され、LeedyBox にはアップロードされません。
使い方
- 「画像」を選んでロゴを選択またはドロップするか、「テキストまたは絵文字」を選んで3文字までのテキストを入力します。
- 背景、形、余白を設定し、プレビューと、明るいテーマ・暗いテーマのブラウザタブでの表示を確認します。
- 必要に応じて、ウェブサイト名、短い名前、テーマカラー、ファイルを保存するフォルダーを入力します。
- 「ファビコンファイルを作成」を押し、ファイルを1つずつ、または favicon-package.zip でまとめてダウンロードします。
- ファイルをウェブサイトにアップロードし、コピーした HTML タグを各ページの head セクションに貼り付けます。
よくある質問
画像はサーバーにアップロードされますか？
いいえ。画像やテキストはブラウザ内で描画・変換され、ファイルはお使いの端末上で作成されます。LeedyBox には何も送信されません。ページの読み込み時にダウンロードされるのは、leedybox.com の ZIP ライブラリだけです。
どのような画像を使えますか？制限はありますか？
PNG、JPG、WebP、GIF（最初のフレーム）、BMP、SVG ファイルを使えます。SVG ファイルは 10 MB まで使用できます。非常に大きな写真（約5,000万画素超）は、必要なメモリが多いため、スマートフォンでは失敗することがあります。512 × 512 ピクセル以上の正方形の画像か SVG ファイルを使うと、最もくっきりした結果になります。
ファビコンがぼやけたり読みにくかったりするのはなぜですか？
16 ピクセルのアイコンには、ほとんどスペースがありません。細かいロゴや長いテキストよりも、シンプルな形、強いコントラスト、1〜2文字のほうが見やすくなります。小さな素材画像は大きいサイズ用に拡大されるため、ぼやけて見えます。プレビューを確認し、余白を減らしたり、ロゴを簡略化したものを試したりしてください。
これらのファイルのうち、どれが必要ですか？
favicon.ico と 16・32 ピクセルの PNG ファイルはデスクトップのブラウザで、apple-touch-icon.png は iPhone と iPad で使われます。192・512 ピクセルのアイコンと site.webmanifest は、サイトをホーム画面に追加したときや、Web アプリとしてインストールしたときに使われます。HTML タグと一緒にすべてを使えば、一般的なケースに対応できます。
apple-touch-icon.png に透明な部分がないのはなぜですか？
一部の Apple 端末では、ホーム画面アイコンの透明な部分が黒く表示されます。そのため、このツールは透明な部分を選んだ色（初期値は白）で塗りつぶし、角は四角いままにします。角は iPhone と iPad が丸めるためです。