← ツール一覧

ファビコン生成

画像1枚から favicon.ico・各サイズ PNG・apple-touch-icon・manifest をまとめて作ります。ファイルは端末から出ません。

このツールについて

画像1枚からウェブサイト用アイコン一式を作ります。ブラウザのタブに使う favicon.ico（16・32・48 の3サイズを1ファイルに収録）、サイズ別の PNG、iPhone のホーム画面用 apple-touch-icon、Android 用アイコンとマスカブルアイコン、site.webmanifest をまとめて作り、ZIP にします。

サイトの <head> に貼り付けるコードも一緒に作るので、ファイルをアップロードしてコードを貼れば完了です。実際の大きさでの見え方を確かめながら、背景色・余白・角の丸みを調整できます。

使い方

  1. アイコンにしたい画像を1枚ドラッグするか、クリックして選びます。正方形でなくても大丈夫です。
  2. ドラッグとズームで、アイコンに入れる部分を決めます。
  3. 背景を透明にするか色で塗るかを選び、余白と角の丸みを調整します。16 ピクセルのプレビューでも見分けがつくか確かめてください。
  4. 「ZIP をダウンロード」でファイルを受け取ってサイトにアップロードし、画面に出た <head> のコードをコピーして貼り付けます。

よくある質問

ZIP には何が入っていますか？

favicon.ico、favicon-16x16・32x32・48x48・96x96.png、apple-touch-icon.png（180）、icon-192.png、icon-512.png、icon-maskable-512.png、site.webmanifest、そして <head> に貼るコードを収めた head-snippet.html です。

マスカブルの安全領域とは何ですか？

Android は機種によって、アイコンを円や角丸四角形などさまざまな形に切り抜いて表示します。マスカブルアイコンは、どう切り抜かれても大事な部分が残るよう中央に余裕を持たせたアイコンです。安全領域の表示をオンにすると、切れない範囲を画面で確かめられます。

角の丸みはオンにすべきですか？

通常はオフのほうがよいです。iOS と Android はホーム画面でアイコンの角を自動で丸めるため、先に丸めておくと二重に丸くなることがあります。

ファイルはサーバーにアップロードされますか？

いいえ。処理はすべて、いまお使いのブラウザの中で行います。ファイルをどこにも送らないので、写真や書類が他の場所に残る心配はありません。

無料ですか？登録は必要ですか？

無料で、会員登録やログインも不要です。ページを開けばすぐに使えます。

あわせて使えるツール