ツール › デザイン

ファビコン・アプリアイコン作成ツール

1 つのロゴから favicon.ico、apple-touch-icon、Android のアダプティブアイコンとマスカブルアイコン、iOS の AppIcon セット、site.webmanifest を作成します。

ロゴをドロップまたはクリックして選択 · SVG か 512×512 以上の PNG がおすすめです

アプリ名テーマカラー背景色（iOS、Android）余白 0%

内容

favicon.ico（16、32、48）、PNG ファビコン、apple-touch-icon、Android Chrome 用とマスカブルアイコン、site.webmanifest、Xcode 用の iOS AppIcon セット、アダプティブアイコン付きの Android mipmap、そしてこの HTML スニペット：

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#F39A3D">

しくみ

ロゴは各サイズで canvas に描画され、マスカブルアイコンやアダプティブアイコン用のセーフゾーンも確保します。
favicon.ico には 16、32、48 px の PNG が入っており、現在のどのブラウザでも読み込めます。

よくある質問

どんな元画像が最適ですか？

SVG、または 512×512 以上の正方形の PNG で、マークの周りに少し余白があるものがおすすめです。