ファビコン作成

完全なファビコンパッケージ(.ico・PNGアイコン、Appleタッチアイコン、Androidアイコン、Webマニフェスト、貼り付け用HTML)をブラウザ内でそのまま生成。アップロードなし。

ファビコンを生成する方法

  1. PNG・JPG・WebP画像をドロップまたは選択します(正方形のロゴが最適です)。
  2. パッケージを生成します。favicon.ico、PNGアイコン、AppleタッチアイコンとAndroidアイコン、Webマニフェストが作られます。
  3. ZIPをダウンロードし、ファイルをサイトのルートに置いて、HTMLスニペットを<head>に貼り付けます。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

なぜファビコンパッケージを生成するのか?

ファビコンはもう1つのファイルでは済みません。ブラウザは.icoとPNGを求め、iOSはapple-touch-iconを、Androidはより大きなアイコンとWebマニフェストを求めます。OptImgは1枚の画像からそのすべてを高品質なリサンプリングフィルターで描画し、すぐに使えるZIPにまとめ、貼り付ける正確なHTMLも用意します。すべてお使いのデバイス上で、アップロードは一切ありません(ロゴをサーバーにアップロードする人気のオンラインジェネレーターとは違います)。

よくある質問

画像はサーバーにアップロードされますか?
いいえ。各アイコンはすべてブラウザ内で描画・パッケージ化されます。ロゴがデバイスから外に出ることはありません。ほとんどのファビコンジェネレーターは画像をアップロードしますが、これは違います。
パッケージには何が含まれますか?
favicon.ico(16/32/48px)、favicon.svg、favicon-16x16.pngとfavicon-32x32.png、apple-touch-icon.png(180px)、android-chrome-192x192.pngとandroid-chrome-512x512.png、そしてsite.webmanifest。さらに貼り付ける正確なHTMLスニペットも含まれます。ダークアイコンを追加すると、全ファイルのダーク版も一対として生成されます。
ファイルはどこに置きますか?
すべてのファイルをサイトのルートディレクトリに置き(/favicon.icoや/apple-touch-icon.pngなどで解決されるように)、用意されたHTMLをページの<head>に貼り付けます。
どんな画像を使えばよいですか?
512×512以上の正方形のPNGが最も鮮明なアイコンになります。正方形でない画像は自動的に中央で正方形に切り抜かれるので、引き伸ばされることはありません。