What image format should I start with?

Use a square PNG or SVG image with a transparent background, at least 512×512 pixels, for best results at all sizes.

Where do I put the favicon files?

Place them in the root of your website or in a /icons/ folder, then add the provided tags to your section.

Do I need an ICO file?

The ICO format is still needed for Internet Explorer 11 compatibility and some browser tab implementations.

What favicon sizes do I need for modern browsers and mobile?

The minimum set is: 16×16 and 32×32 for browser tabs and address bars, 180×180 for Apple Touch Icon (iOS bookmarks and home screen), 192×192 and 512×512 for Android PWA icons (web app manifest), and 144×144 for Windows Metro tiles. Many implementations also include 48×48 (Windows taskbar) and 96×96 (Google TV). Use the HTML link tags: <link rel="icon" sizes="32x32" href="favicon-32.png"> and <link rel="apple-touch-icon" href="apple-touch-icon.png">.

Should I use PNG or ICO format for my favicon?

Modern browsers support PNG favicons directly, making ICO format largely unnecessary for contemporary websites. However, favicon.ico placed in the site root provides a reliable fallback for older browsers and tools that automatically request /favicon.ico. Best practice: provide favicon.ico as a fallback (containing 16×16 and 32×32 images), plus separate PNG files at larger sizes for modern devices. The PNG format supports transparency, which is important for favicons displayed on colored browser chrome.

Home
All Tools
Favicon Generator — Create Favicon from Text

⊞

Favicon Generator — Create Favicon from Text

Generate favicons (16×16, 32×32, 64×64, 128×128px) from text with custom colors and rounded corners.

Source

Image upload

📁

Drop image here

or click to select

Generation Sizes

16×1632×3248×4864×64128×128180×180 (Apple)192×192 (Android)512×512 (PWA)

※ All processing is done in your browser — no images are uploaded.

Related Tools

Image Resizer
SVG to PNG Converter
Image Cropper

View all tools

SEO

Favicon Complete Guide: Sizes, HTML, iOS, Android & PWA

Everything you need to know about favicons — which sizes to generate, …

About Favicon Generator — Create Favicon from Text

Favicon Generator creates favicon files in all required sizes from any image or icon. Download a zip with all sizes and the HTML link tags needed for cross-browser favicon support including ICO, PNG, and Apple Touch Icon formats.

How to Use

1Upload your logo or icon image (at least 512×512 pixels recommended).
2Preview the generated favicon at different sizes.
3Download the zip file containing all favicon sizes and the HTML code to add to your site.

Features

Generates all required favicon sizes in one step
Includes ICO, PNG, and Apple Touch Icon formats
Provides ready-to-use HTML link tag code
No upload to any server — everything runs in your browser

ファビコンとは？必要なサイズと用途

ファビコン（favicon）はブラウザのタブ・ブックマーク・ホーム画面ショートカットに表示される小さなアイコンです。Webサイトのブランド認知と信頼感に直結する重要な要素で、設定を怠ると全ページのリクエストで404エラーが発生します。

ブラウザタブ・ブックマーク用（16px・32px）

PCのブラウザタブに表示される最も基本的なファビコンです。16pxは通常解像度、32pxはRetinaディスプレイやHiDPI環境向けです。この2サイズはすべてのWebサイトで必須です。HTMLには <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> のように記述します。

iOS「ホーム画面に追加」用（180px）

iPhoneやiPadでWebサイトをホーム画面に追加したときに表示されるアイコンです。<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> で指定します。iOSが自動で角丸を付けるため、元画像に角丸処理は不要です。透明背景は黒で塗りつぶされるため、必ず背景色付きの画像を使ってください。

Android・PWA用（192px・512px）

Android Chromeのホーム画面ショートカットには192px、PWA（プログレッシブWebアプリ）のスプラッシュ画面には512pxが必要です。site.webmanifestファイルにアイコンを登録することでAndroidとPWA環境に対応できます。PWA化を検討しているサイトは512pxも必ず用意してください。

ファビコンのHTML設置方法

ファビコンは複数の方法でWebページに設定します。<head>セクション内に適切なlinkタグを追加し、各プラットフォームに対応したファイルを用意することが重要です。

基本HTMLの記述

<head>内に以下を追加します。<link rel="icon" type="image/x-icon" href="/favicon.ico">（レガシー対応）、<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">、<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">、<link rel="manifest" href="/site.webmanifest">（Android対応）。それぞれの目的に応じて必要な記述を組み合わせてください。

ファイルの配置場所

favicon.icoとapple-touch-icon.pngはドメインのルート（example.com/favicon.ico）に配置することを強く推奨します。ブラウザはHTMLの記述なしに/favicon.icoを自動で探しに行くため、ルートに置いておくだけで多くのブラウザで表示されます。その他のファイルはサブフォルダに置いてもHTMLのパスが合っていれば問題ありません。

WordPressとNext.jsでの設定

WordPressは「外観→カスタマイズ→サイト基本情報→サイトアイコン」から設定できます。512px以上の正方形画像をアップロードするだけで各サイズが自動生成されます。Next.js（App Router）はapp/ディレクトリにfavicon.icoを置くだけで自動認識されます。Astro・Hugoはpublic/またはstatic/フォルダに配置します。

ファビコンデザインのベストプラクティス

16×16pxは256ピクセルしかありません。ブランドロゴを小さくしただけでは判読不能になることが多く、ファビコン専用のデザインが必要なケースもあります。

シンプルに作る

複雑なロゴやテキストは16pxで潰れてしまいます。ロゴの頭文字1文字・シンプルなシェイプ・ブランドの象徴的なアイコンマークに絞ることを推奨します。確定前に必ず16px×16pxの実寸でテストしてください。高コントラスト配色（明るい背景に濃いアイコン、または逆）が視認性を高めます。

元画像の要件

最低512×512px以上の正方形PNG画像から始めてください。SVGをソースにする場合はPNGに変換してから使います。細い線・グラデーション・小さなテキストは小サイズで消えやすいため避けましょう。iOS用（apple-touch-icon）は透明背景を使わず、ブランドカラーの背景を持つ画像を用意してください。

ダークモード対応

SVG形式のファビコンはモダンブラウザ（Chrome 80+・Firefox 84+）で対応しており、CSSの@media (prefers-color-scheme: dark)を使ってダークモードとライトモードで異なる配色を表示できます。<link rel="icon" href="/favicon.svg" type="image/svg+xml">でSVGを指定し、<link rel="icon" href="/favicon.ico" sizes="any">でレガシーブラウザ向けフォールバックを追加するのがベストプラクティスです。

FAQ

What image format should I start with?: Use a square PNG or SVG image with a transparent background, at least 512×512 pixels, for best results at all sizes.
Where do I put the favicon files?: Place them in the root of your website or in a /icons/ folder, then add the provided <link> tags to your <head> section.
Do I need an ICO file?: The ICO format is still needed for Internet Explorer 11 compatibility and some browser tab implementations.
What favicon sizes do I need for modern browsers and mobile?: The minimum set is: 16×16 and 32×32 for browser tabs and address bars, 180×180 for Apple Touch Icon (iOS bookmarks and home screen), 192×192 and 512×512 for Android PWA icons (web app manifest), and 144×144 for Windows Metro tiles. Many implementations also include 48×48 (Windows taskbar) and 96×96 (Google TV). Use the HTML link tags: <link rel="icon" sizes="32x32" href="favicon-32.png"> and <link rel="apple-touch-icon" href="apple-touch-icon.png">.
Should I use PNG or ICO format for my favicon?: Modern browsers support PNG favicons directly, making ICO format largely unnecessary for contemporary websites. However, favicon.ico placed in the site root provides a reliable fallback for older browsers and tools that automatically request /favicon.ico. Best practice: provide favicon.ico as a fallback (containing 16×16 and 32×32 images), plus separate PNG files at larger sizes for modern devices. The PNG format supports transparency, which is important for favicons displayed on colored browser chrome.

bug_report

Found a bug or something not working as expected?

Report a bug →