ファビコン生成ツール — favicon.ico・アプリアイコンセット

ブラウザタブ、スマートフォンのホーム画面、検索結果に表示されるアイコンを、全サイズ分まとめて作成し、ZIPで一括取得できます。

ファイルはサーバーに送信されません — この端末のブラウザ内でのみ処理

文字または絵文字 (1~2文字) 文字色

太さ

形

背景を塗りつぶす背景色

内側のマージン 12%

アプリ情報 (site.webmanifest)

サイト名短い名前(ホーム画面のアイコンの下に表示、12文字以内) テーマカラー(モバイルのアドレスバーの色)

自分のサイト

新しいタブ

180・iPhone

192・Android

512

<head>内に貼り付けるHTML

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<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="#3182f6">

ZIP内のファイルをサイトのルート(/)パスにアップロードした場合を基準としています。同じコードがhead.htmlにも含まれています。

ファビコンを作るの使い方

1画像をアップロードするか、文字・絵文字と色を指定します。
2プレビューでサイズごとの見た目を確認します。
3[ZIPを取得]をクリックし、案内されたHTMLコードを<head>内に貼り付けます。

よくある質問

元の画像はどんなものが良いですか？

512×512以上の正方形のPNG・SVGが最適です。小さいサイズではシンプルな形が見やすくなります。

favicon.icoが1つあれば十分ではないですか?

旧式のブラウザ向けには十分ですが、iPhoneのホーム画面(180px)やAndroid(192・512px)には別途PNGが必要です。