ファビコン生成ツール

画像・テキスト・絵文字をアップロードまたは入力するだけで、各サイズ(16/32/48/180/192/512px)のPNGファビコン・favicon.ico・apple-touch-iconを生成。プレビュー確認、個別/ZIP一括ダウンロード、貼り付け用の<link>タグHTMLも出力します。すべての処理はブラウザ内で完結し、画像がサーバーに送信されることはありません。

ドラッグ&ドロップ

または

Ctrl+V Ctrl+V で画像を直接貼り付け

JPEG, PNG, WebP, SVG, iPhoneのHEIC(最大10MB / 正方形・512px以上推奨)

共通設定
0%

プレビュー&ダウンロード

貼り付け用 HTML(<head> 内)

ZIP内のファイルをサイトのルートに配置し、上記のタグを <head> に貼り付けてください。

使い方

1

ソースを用意

「画像から」タブで画像をアップロード(ドラッグ&ドロップ・Ctrl+V対応)するか、「テキスト・絵文字から」タブで文字や絵文字を入力します。

2

デザインを調整

背景色・形状(四角/角丸/円形)・配置・サイズなどを設定し、「ファビコンを生成」ボタンを押します。

3

ダウンロードして設置

個別またはZIPで一括ダウンロードし、出力された<link>タグをサイトの<head>に貼り付ければ完了です。

ファビコン生成ツールとは

ファビコン(favicon)は、ブラウザのタブやブックマーク、検索結果に表示される小さなサイトアイコンです。本ツールは1枚の画像や1文字のテキスト・絵文字から、16×16〜512×512pxまでの各種PNGと、複数サイズを内包したfavicon.ico、iOS用apple-touch-icon、Android/PWA用アイコンをまとめて生成します。HTMLの<link>タグも自動出力。すべてHTML5 Canvasによりブラウザ内で処理され、画像がサーバーに送信されることは一切ありません。

関連ツール・ガイド

ファビコンと合わせて、SNSシェア用の画像はOGP画像生成ツール、元画像のサイズ調整は画像リサイズツール、PNG・WebPなどの形式変換は画像変換ツールが便利です。作り方のコツや設置手順はファビコンの作り方ガイドで詳しく解説しています。

機能・特徴

  • 全サイズを一括生成16/32/48/180/192/512pxのPNGに加え、複数サイズ内包のfavicon.icoも自動生成します。
  • 画像・テキスト・絵文字対応ロゴ画像はもちろん、文字や絵文字からもおしゃれなファビコンを作成できます。
  • HTMLタグを自動出力コピペで使える<link>タグとsite.webmanifestを生成。設置がすぐ完了します。
  • 完全ブラウザ処理すべての処理はブラウザ内で完結。画像がサーバーに送信されることは一切ありません。

活用シーン

  • 個人ブログ・コーポレートサイトのファビコン作成
  • ロゴ画像から各デバイス用アイコンを一括生成
  • PWA(プログレッシブウェブアプリ)のアイコン準備
  • 絵文字や頭文字でサクッとサイトアイコンを作る
  • iOS/Androidのホーム画面追加用アイコン作成

よくある質問

ファビコンに最適な元画像は?
正方形で512×512px以上のPNGまたはSVGがおすすめです。小さく表示されても判別しやすいシンプルなデザインが効果的です。横長・縦長の画像は「全体表示」で余白を付けるか、「切り抜き」で中央をフィットできます。
favicon.ico は作れますか?
はい。16px・32px・48pxの3サイズを内包した本物のfavicon.icoを生成し、単体ダウンロードまたはZIPに含めて出力します。古いブラウザや管理画面でも確実に表示されます。
apple-touch-icon とは何ですか?
iPhone・iPadでWebサイトをホーム画面に追加した際に使われる180×180pxのアイコンです。本ツールが自動で生成し、対応する<link>タグも出力します。
画像はサーバーにアップロードされますか?
いいえ。すべての処理はお使いのブラウザ内(HTML5 Canvas)で完結します。画像やテキストがサーバーに送信・保存されることは一切ありません。
生成したファビコンはどう設置しますか?
ZIP内のファイルをサイトのルートディレクトリに配置し、出力された<link>タグをHTMLの<head>内に貼り付けてください。site.webmanifestも同梱されるためPWAにも対応できます。
絵文字でファビコンを作れますか?
はい。「テキスト・絵文字から」タブで絵文字を入力すれば、お使いの端末の絵文字フォントでレンダリングしたファビコンを作成できます。
結局どのサイズを用意すればよいですか?
最低でも favicon.ico(16/32/48px内包)と 32px のPNGがあればデスクトップ・主要ブラウザに対応できます。スマホ対応まで含めるなら apple-touch-icon(180px)とAndroid/PWA用の192px・512pxも用意するのが安全です。本ツールは「すべてダウンロード(ZIP)」で全サイズ+site.webmanifest+<link>タグHTMLを一括出力するため、必要なものがすべて揃います。
背景を透過したPNGファビコンは作れますか?
はい。「共通設定」の背景色にある「透過」にチェックを入れると、背景が透明なPNGとして各サイズを書き出します。なお favicon.ico は透過に対応しますが、古いブラウザでは背景が黒く表示される場合があるため、透過を使う場合はPNGの<link>指定も併用するのがおすすめです。