実際に必要なファイルは？

多くのサイトでは、ルートの favicon.ico、iPhone・iPad 用の apple-touch-icon.png、Android とインストール可能な Web アプリ用に 192・512 px のアイコンを含むマニフェストがあれば十分です。ZIP 内のコード片がすべてを読み込むので、に貼り付け、入力したフォルダにファイルをアップロードしてください。

透明を選んだのに Apple アイコンに背景があるのはなぜ？

iOS はホーム画面アイコンの透明部分を黒で塗りつぶし、角丸も自動で付けます。そのため 180 px の Apple アイコンには必ず塗りつぶした四角い背景（選んだ色か白）を付けています。

maskable アイコンとは？

Android はアプリアイコンを円・角丸四角・しずく形などに切り抜くことがあります。maskable アイコンは全面の背景の上で、中央 80% の「セーフゾーン」内に図柄を収めるので、大事な部分が切れません。Android のプレビューは円形の切り抜きを表示しています。

ファビコン作成

画像・テキスト・絵文字からファビコン一式を作成：favicon.ico、Apple タッチアイコン、Android と maskable アイコン、Web マニフェスト、貼り付け用 HTML。ブラウザ内で動作します。

画像がこのデバイスから出ることはありません。

文字フォント文字色

背景透明

形

余白: 10%

プレビュー

ダークモード

サイト名（マニフェスト用）サイト上のアイコンフォルダ

ZIP の中身：favicon.ico (16, 32, 48 px), PNG 16/32/180/192/512, maskable 512, site.webmanifest, head-snippet.html。

ページの <head> に貼り付け

<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

アップロード不要で、最近のサイトに必要なファビコンをすべて作成できます。ロゴ、1〜2文字、または絵文字から始め、背景・形・余白を選び、実寸のブラウザタブ、スマホのホーム画面、Android のアダプティブアイコンで仕上がりを確認。複数サイズ入りの favicon.ico、ブラウザやスマホが求める各サイズの PNG、Android の円形切り抜きにも耐える maskable アイコン、すぐ使える site.webmanifest、貼り付けるだけの <head> タグを ZIP でダウンロードできます。

ファビコン作成

プレビュー

よくある質問

関連ツール