ファビコンジェネレーター
画像を 1 つドロップすると、何もアップロードせずに、完全なファビコン セット (.ico、すべての PNG サイズ、貼り付ける HTML) を取得できます。
Drag & drop a square image or logo here, or click to choose. PNG, JPG, SVG, WEBP — a square source (512×512 or larger) looks best. Your image never leaves your browser, nothing is uploaded.
Paste this into your <head>
このファビコン ジェネレーターは、ブラウザ内で単一の正方形の画像またはロゴから完全な実稼働準備の整ったファビコン セットを構築します。マルチサイズの favicon.ico (16 ～ 256)、16、32、48、180 (apple-touch-icon)、192、および 512 ピクセルの PNG アイコン、および favicon.ico、apple-touch-icon、PNG サイズ、および site.webmanifest を参照するコピー＆ペーストの HTML ヘッド スニペットを生成します。すべての処理は Canvas API を使用してローカルで行われるため、画像がデバイスから離れることはありません。アップロード、キュー、ウォーターマークはありません。ロゴをドロップし、生成された各サイズをプレビューし、ファイルをダウンロードしてスニペットを貼り付けるだけです。
よくある質問
このファビコンジェネレーターは何を生成しますか?
1 つの画像からの完全なファビコン セット: マルチサイズの favicon.ico (単一ファイル内の 16、32、48、64、128、256 ピクセル)、16×16、32×32、48×48、180×180 (apple-touch-icon)、192×192 および 512×512 の PNG アイコン、およびすぐに貼り付けられる HTML ヘッド スニペット。
私の画像はサーバーにアップロードされていますか?
いいえ。このファビコン ジェネレーターは、Canvas API を使用してブラウザーで 100% 実行されます。画像はローカルでデコードおよび再エンコードされるため、アップロード、保存、共有されることはなく、完全にプライベートです。
ソース画像はどのようなサイズと形式にすべきですか?
最も鮮明な結果を得るには、少なくとも 512×512 の正方形の画像を使用してください。 PNG、JPG、SVG、WEBP はすべて機能します。 SVG および大きな PNG ロゴは、すべてのファビコン サイズに合わせてきれいに縮小されます。
自分のウェブサイトにファビコンを追加するにはどうすればよいですか?
favicon.ico と PNG ファイルをサイトのルート フォルダーにダウンロードし、生成された HTML スニペットをページの <head> にコピーします。 favicon.ico、16/32 PNG、apple-touch-icon、site.webmanifest をリンクします。
apple-touch-アイコンは何ですか?
180×180 の apple-touch-icon は、誰かがサイトをホーム画面に保存するときに iOS および iPadOS が使用するアイコンです。これを含めると、ブックマークがぼやけたスクリーンショットではなくネイティブ アプリのように見えます。
PNG だけでなく .ico ファイルを生成するのはなぜですか?
favicon.ico は、古いブラウザを含むすべてのブラウザがサイトのルートでリクエストする長年のデフォルトです。私たちの .ico は複数の解像度を 1 つのファイルにパックしているので、ブラウザーは常に最も鮮明なサイズを選択します。また、最新の PNG も提供します。
包むか覆うか、どちらを選択すればよいでしょうか?
画像全体を透明なエッジの四角形にレターボックスを含めて、ロゴ全体が見えるようにします。カバーは正方形の端から端まで埋めて、オーバーフローをトリミングします。幅の広いロゴには contains を使用し、すでに正方形のアイコンには cover を使用します。
このファビコンジェネレーターは本当に無料ですか？
はい、完全に無料で、サインアップ、制限、ウォーターマークはありません。作業はブラウザ内で行われるため、好きなだけファビコン セットを生成できます。