ピクセル単位で正確なプレビュー
すべてのプレビューを 16〜256 ピクセルの実寸でレンダリングし、16×16 の拡大表示も用意。見えているものが、そのままブラウザに表示されます。
16
24
32
48
64
ファビコン作成ツール：SVG・PNG・ICO・アプリアイコンに対応した無料のファビコンジェネレーター
ファビコンジェネレーター
ファビコンをデザインする
出発点を選び、納得いくまで調整すると、すべてのサイズがリアルタイムで更新されます。完成したら SVG・PNG・ICO・アプリアイコンをダウンロード。
文字
小さなサイズでは 1〜2 文字がおすすめです。
フォント
太さ
文字間隔0
読み込み中…
プリセットから始める
20 スタイル実寸プレビュー
16×16、6 倍に拡大ファビコンの出来を左右するサイズです。ここで形が読めれば、どこでも読めます。
実際の表示
マイサイト
新しいタブ
yoursite.com
書き出し
.ico、SVG、16〜512px の PNG、Apple・Android アイコン、Web マニフェスト
設置用コード
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">サイトのルートフォルダに解凍し、これを <head> 内に貼り付けてください。
FavMint が選ばれる理由
Web でいちばん小さなキャンバスのために
ファビコンは 16 ピクセルの第一印象。FavMint には、きちんとデザインするための操作と、それが機能することを確かめるプレビューがそろっています。
実際に使われる場所で確認
ライト／ダークのブラウザタブ、検索結果、スマホのホーム画面。訪問者より先に問題に気づけます。
FavMint — ファビコン作成
文字・アイコン・シンボル
厳選した 12 のフォントで文字やイニシャルを入力したり、2,100 以上のオープンソースアイコンから選んだり、小さなサイズ向けに作られた 20 のシンボルから始めたりできます。
必要な操作はすべて、ごちゃごちゃはなし
グラデーション、回転、枠線、余白、不透明度、影、正確な位置調整を、4 つのシンプルなタブにまとめました。
設計からプライベート
登録なし、アップロードなし、ファイルにトラッキングピクセルもなし。すべてブラウザ内で生成されます。
ワンクリックでファイル一式
マルチサイズの .ico、くっきりした SVG、Apple と Android のアイコン、Web マニフェスト、貼り付けるだけの HTML。文字はベクターのアウトラインに変換されるので、SVG はどこでも同じ見た目になります。
- favicon.ico
- favicon.svg
- favicon-32x32.png
- apple-touch-icon.png
- android-chrome-512x512.png
- site.webmanifest
元に戻す・リミックス・共有
無制限の取り消し履歴、新しいアイデアをくれる「おまかせ」ボタン、デザインを URL にそのまま保存する共有リンク。
Mintly
AKATELIER KAI
north
ファビコン作成ガイド
Web でいちばん小さなキャンバスのための無料ファビコン作成ツール
FavMint は、ブラウザだけで動く無料のファビコン作成ツール（ファビコンジェネレーター）です。1 文字やイニシャル、アイコン、シンボルから数分でファビコンをオンライン作成し、今の Web サイトに必要なファイルをすべてダウンロードできます：SVG、PNG、ICO、Apple touch アイコン、Android アプリアイコン、Web マニフェスト。アカウント作成も透かしもなく、サーバーへのアップロードも一切ありません。完成したデザインはそのまま無料のロゴ作成ツールに引き継がれるので、ファビコンとロゴを最初から統一できます。
ファビコンとは？なぜ大切なのか
ファビコンとは、ブラウザのタブ、ブックマーク、履歴、検索結果、そしてサイトを保存したときのスマホのホーム画面に表示される小さなサイトアイコンです。訪問者が最初に目にするブランドの要素であることも多く、表示サイズはわずか 16 または 32 ピクセル。ぼやけたアイコンやありきたりなアイコンは、サイトを未完成に見せ、たくさんのタブの中で見つけにくくします。はっきりとした個性あるファビコンはその逆で、タブを切り替えるたびに認知を高め、Google がページタイトルの横にファビコンを表示する検索結果でも目立たせてくれます。
4 ステップでファビコンをオンライン作成する方法
- 1
出発点を選ぶ
文字やイニシャルを入力するか、2,100 以上のオープンソースアイコンを検索するか、20 のシンボルから選ぶか、プリセットから始めます。
- 2
スタイルを整える
背景のシェイプ、単色またはグラデーションの塗り、フォントを選び、サイズ・回転・余白・枠線・影を微調整します。
- 3
実寸で確認する
16〜256 ピクセルのライブプレビューを見ながら、16×16 のグリッドを拡大し、ブラウザタブや検索結果、スマホのホーム画面での見え方を確認します。
- 4
ダウンロードして設置する
SVG、PNG、またはファイル一式を書き出し、サイトのルートに置いて、用意された HTML を貼り付けるだけです。
変更はすぐに反映され、作業内容はブラウザに自動保存されます。無制限の取り消し・やり直し、新しいアイデアをくれるおまかせボタン、デザイン全体を URL に保存する共有リンクがあるので、気に入ったバージョンを失わずに気軽に試せます。
小さなサイズのためのファビコンデザイナー
多くのアイコン作成ツールは、大きな画像を縮小してうまくいくことを祈るだけです。FavMint はその逆の発想で作られています。すべてのプレビューを実際のピクセルサイズでレンダリングするので、見えているものがそのままブラウザに表示されます。16×16 の拡大表示で細い線が消えていないか、文字がつぶれていないかがわかり、読みやすさのヒントがコントラスト不足、文字数の多さ、グリフの欠けを訪問者より先に知らせます。スクワークル、円、六角形、盾、葉など 8 つの背景シェイプ、単色・線形・放射状のグラデーション、厳選した 12 のフォント、位置や間隔の細かな調整が使えます。
SVG・PNG・ICO を書き出せるファビコンジェネレーター
ブラウザやデバイスはそれぞれ異なるファイルを探すため、FavMint はそのすべてを書き出します。SVG 出力に対応したファビコンジェネレーターとして、書き出し前に文字をベクターのアウトラインに変換するので、選んだフォントがインストールされていないパソコンでも SVG ファビコンはまったく同じに見えます。ワンクリックで、すぐに使える ZIP パッケージをダウンロードできます：
favicon.ico古いブラウザや Windows 向けの 16・32・48 px マルチサイズアイコンfavicon.svgどんな画面でもくっきり表示される拡大縮小自在のベクターファビコンapple-touch-icon.pngiPhone・iPad のホーム画面用 180×180 アイコンandroid-chrome-192x192.png と 512×512Android と PWA（プログレッシブウェブアプリ）用アイコンsite.webmanifestスマホにどのアプリアイコンを使うかを伝えるマニフェストPNG 書き出し16〜1024 ピクセルの 11 サイズ。アプリストア、SNS のプロフィール、資料などに
パッケージには README と、ページの <head> に貼り付ける HTML タグも含まれます。ファイルをサイトのルートにアップロードしてタグを追加すれば、Chrome、Safari、Firefox、Edge、iOS、Android でファビコンが表示されます。
アプリアイコン作成と Web サイトアイコン作成をひとつに
16 ピクセルで機能するデザインは、512 や 1024 でも美しく見える必要があります。FavMint はアプリアイコン作成ツールとしても使えます。PWA、アプリストアの掲載ページ、ブラウザ拡張機能、Discord や Slack のワークスペース、SNS のプロフィール画像向けに高解像度の PNG を書き出せます。すべてを最初にベクターで描くため、1 枚のビットマップを拡大縮小するのではなく、各サイズをくっきりとレンダリングします。新しいサイドプロジェクトのサイトアイコンでも、既存プロダクトの統一されたアイコンセットでも、一度デザインすればどこにでも書き出せます。
ファビコンとおそろいの無料ロゴ作成ツール
ファビコンが単独で使われることはまれです。FavMint のロゴ作成ツールは、作ったばかりのファビコンを取り込んで本格的なブランドロゴに仕上げる、無料のオンラインロゴ作成ツールです。ワードマーク、レターマーク、モノグラム、アイコン＋名前のレイアウトから選び、ブランド名を入力して、きれいな SVG または 1×・2×・4× の PNG を書き出せます。デザイナーを雇ったりサブスクリプションを払ったりせずにプロらしい見た目を手に入れたいスタートアップ、個人開発者、クリエイター、小規模ビジネスのための、シンプルなオリジナルロゴ作成ツールです。FavMint のほかの機能と同じく、ロゴ作成も無料・オンラインで、登録も透かしもありません。
プライベート・高速・無料
FavMint にはバックエンドがありません。レンダリング、PNG 変換、ICO エンコード、ZIP 作成はすべてお使いのデバイス上で行われるため、デザインがサーバーにアップロード・保存されることはありません。そのため動作も高速で、順番待ちやサーバーの応答を待つ必要もありません。アイコンはオープンソースの Lucide（ISC ライセンス）、フォントは SIL Open Font License なので、作ったものは商用プロジェクトも含めて自由に使えます。
目立つファビコンを作るコツ
- 1〜2 文字か、太いシンボル 1 つにとどめましょう。16 ピクセルでは細部は消えてしまいます。
- シンボルと背景のコントラストを強くして、ライトでもダークでもタブで読めるようにしましょう。
- スペースを埋めましょう。余白を小さくすると、アイコンが頼りなく見えず堂々とします。
- ブランドカラーをそろえて、ファビコン・アプリアイコン・ロゴをひとつのファミリーに見せましょう。
- 16×16 のプレビューを確認しましょう。そこで読めれば、どこでも読めます。
さっそく試してみませんか？上のファビコンジェネレーターを開いて、数分で無料のファビコンを作成しましょう。
料金
無料。本当に無料です。
すべてがお使いのデバイス上で動くので、支払うサーバー代も、有料の壁で隠すものもありません。
無料
¥0ずっと
スタジオのすべての機能。アカウントも透かしも、落とし穴もありません。
- ファビコンとロゴを無制限に作成
- ファイル一式：ICO、SVG、PNG、Apple・Android アイコン
- 2,100 以上のアイコン、12 フォント、20 シンボル、20 プリセット
- 商用利用可 — ファイルはあなたのもの
- ブラウザだけで動作
サポーター
金額は自由1 回のみ
ツールも機能も同じです。FavMint を無料・広告なしで続けるための支援をお願いします。
- 無料プランのすべて
- 心からの感謝
- 新しいフォント・アイコン・シェイプの開発資金に
よくある質問
ファビコンとロゴの疑問にお答えします
ファビコンの作り方、サイズ、設置方法から、長く使えるブランドロゴのデザインまで、知っておきたいことをまとめました。
ファビコンの基本
ファビコン（favicon、「favorite icon」の略）は、Web サイトを表す小さな正方形のアイコンです。ブラウザはタブ、ブックマーク、履歴に表示し、Google は検索結果の横に表示し、スマホではサイトをホーム画面に追加したときに使われます。
Web サイトでは、ファビコンは favicon.ico、favicon.svg、PNG などの小さな画像ファイルで、HTML の head 内の rel="icon" の link タグで指定します。ブラウザがそれをダウンロードしてサイトを示すあらゆる場所に表示するので、訪問者はたくさんのタブの中からひと目であなたのサイトを見つけられます。
まずは 16 ピクセルでも読めるものから始めましょう：1〜2 文字、イニシャル、または太いシンボル 1 つ。FavMint なら、文字を入力するか 2,100 以上のアイコンから選び、背景のシェイプと色を決めて、16×16 のライブプレビューで確認してからファイルをダウンロードするだけ。デザインソフトも登録も不要です。
FavMint のようなファビコンジェネレーターを使いましょう。ブラウザでアイコンをデザインし、ワンクリックでファイル一式を書き出せます。favicon.ico、favicon.svg、11 サイズの PNG、Apple touch と Android のアイコン、Web マニフェスト、サイトに貼り付ける HTML を、すべてお使いのデバイス上で生成します。
どのサイズでもくっきり表示される SVG をメインのファビコンにし、古いブラウザや Windows 向けのフォールバックとして favicon.ico（16・32・48 px）を用意しましょう。さらに iPhone 用に 180×180 の PNG の apple-touch-icon、Android 用に 192×192 と 512×512 の PNG を追加します。FavMint のパッケージにはこれらがすべて含まれています。
はい。最新のブラウザはすべて PNG のファビコンに対応しています。type="image/png" と sizes="32x32" のようなサイズを指定した rel="icon" タグでリンクしてください。Apple touch アイコンと Android アイコンには PNG が必須です。最も幅広く対応させるには、PNG に SVG と favicon.ico を組み合わせましょう。
ブラウザのタブではファビコンが 16×16 と 32×32 ピクセルで表示されるので、まずそのサイズに向けてデザインしましょう。加えて favicon.ico 内に 48×48、Apple touch アイコンに 180×180、Android と Web アプリのマニフェスト用に 192×192 と 512×512 を用意します。SVG のファビコンなら 1 つのファイルですべてのサイズをカバーできます。
ファビコンのファイルをサイトのルートフォルダにアップロードし、各ページの head に link タグを追加します：favicon.ico 用の rel="icon" タグ、favicon.svg 用のもう 1 つ、apple-touch-icon.png 用の rel="apple-touch-icon" タグ。FavMint ならこのコードをそのままコピーできます。古いアイコンがキャッシュされている場合は、ページを強制再読み込みしてください。
ロゴデザイン
まずスタイルを決めましょう：ワードマーク（特徴的なフォントで名前を表記）、レターマーク（イニシャル）、モノグラム、または名前の横にアイコン。次に 1〜2 色と読みやすいフォントを選びます。FavMint の無料ロゴ作成ツールはファビコンから 4 つのレイアウトすべてを作れるので、ロゴとサイトアイコンがそろい、SVG と PNG で書き出せます。
ブランドにどんな印象を持たせたいかを明確にし、デザインはシンプルに、フォントは 1〜2 種類、色数も少なく抑えましょう。いくつかの方向性をスケッチし、白黒や小さなサイズで試して、率直な意見をもらいます。どこでもきれいに拡大縮小できるよう、ベクター（SVG）の元データを必ず残しておきましょう。
成功するロゴは、シンプルで覚えやすく、個性があります。16 px のファビコンから看板まで読みやすく、単色でも機能し、ターゲットや業界に合い、流行を追わずに何年も通用します。一貫して使い続けることで、ひと目でわかる存在になります。
FavMint の使い方
はい。ファビコンジェネレーター、すべての書き出し形式、ロゴ作成ツールが、透かしなし・制限なし・登録なしで無料です。
いいえ。スタジオを開いてすぐにデザインを始められます。作業内容はブラウザに自動保存され、共有リンクをコピーすればどこでも続きから作業できます。
いいえ。レンダリング、PNG 変換、.ico ファイル、ZIP パッケージはすべてお使いのデバイス上で作成されます。サーバーには何も送信されません。
パッケージは最新のすべてのブラウザとデバイスに対応しています：旧環境向けの favicon.ico、くっきり拡大縮小できる favicon.svg、iPhone のホーム画面用の apple-touch-icon.png、Android アイコン、Web マニフェスト。フォルダをサイトのルートにコピーして、インストール用コードを貼り付けてください。
はい。FavMint は SVG 出力に対応したファビコンジェネレーターです。拡大縮小自在の favicon.svg を単体でダウンロードしたり、SVG コードをコピーしたり、PNG や ICO と一緒にパッケージで受け取ったりできます。
はい。パッケージには 180×180 の Apple touch アイコン、192×192 と 512×512 の Android アイコン、Web マニフェストが含まれるので、同じデザインを iPhone や Android のホーム画面のアプリアイコンとして使えます。
はい。作ったものはすべてあなたのものです。アイコンは Lucide（ISC ライセンス）、フォントはオープンソース（SIL Open Font License）で、どちらも商用利用可能です。
変わりません。FavMint は書き出し前に文字をベクターのアウトラインに変換するので、フォントがインストールされていない環境でも SVG はどのパソコンでも同じに見えます。
1〜2 文字か太いシンボル 1 つ、強いコントラスト、シンプルな形。16×16 の拡大表示を使いましょう。そこで読めれば、どこでも読めます。