ファビコン作成
完全なファビコンパッケージ(.ico・PNGアイコン、Appleタッチアイコン、Androidアイコン、Webマニフェスト、貼り付け用HTML)をブラウザ内でそのまま生成。アップロードなし。
ファビコンを生成する方法
- PNG・JPG・WebP画像をドロップまたは選択します(正方形のロゴが最適です)。
- パッケージを生成します。favicon.ico、PNGアイコン、AppleタッチアイコンとAndroidアイコン、Webマニフェストが作られます。
- 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が最も鮮明なアイコンになります。正方形でない画像は自動的に中央で正方形に切り抜かれるので、引き伸ばされることはありません。