FaviconKit
無料・登録不要・サーバーで動作

あらゆる画像から完璧なファビコンを生成

SVG、PNG、JPG など主要形式に対応し、画像をプロ仕様のファビコンに変換します。すべての端末とブラウザで美しく表示される、各サイズを含む完全なファビコンパッケージをダウンロードできます。

高速処理· SVG 対応· 複数フォーマット
変換を始める

画像をアップロード

画像をドラッグ＆ドロップ、またはクリックして選択。必要なすべてのファビコンサイズを生成します。

画像をここにドロップ

またはクリックしてファイルを選択

ファイルを選択
PNGJPGGIFWEBPBMPSVGICO≤10MB
ファビコンパッケージを生成中…
申し訳ありません、そのファイルは処理できませんでした。10 MB 以下の正方形の PNG、JPG、GIF、WebP、BMP、SVG をご利用ください。
favicon preview

ファビコンパッケージの準備ができました

ICO、PNG、Apple タッチアイコン、Android アイコン、web manifest を含む ZIP。

ファビコンパッケージをダウンロード

テキストからファビコンを生成

文字や短いテキストをすっきりしたファビコンに。イニシャルを入力し、色と形を選んでリアルタイムでプレビューし、完全なアイコンパッケージをダウンロード。

絵文字からファビコンを生成

好きな絵文字をファビコンに。絵文字を選び、背景の形と色を選んでリアルタイムでプレビューし、完全なパッケージをダウンロード。

ピクセル ファビコンエディター

16×16 から 64×64 のグリッドでファビコンをピクセル単位で手描きできます。鉛筆・消しゴム・塗りつぶし・元に戻す/やり直しに対応し、ICO・PNG・Apple/Android アイコンを一式で書き出せます。

ファビコンダウンローダー

任意のウェブサイトの URL を入力して、そのファビコンを PNG と ICO 形式で取得・ダウンロード。

ファビコンチェッカー

任意のウェブサイト URL を入力して、favicon.ico、Apple タッチアイコン、SVG、web manifest の設定を即座に監査。数秒で健全性スコアを確認できます。

完璧なファビコンに必要なすべて

どこでも美しく映える鮮明なアイコンを作るための、あらゆるツールと形式を備えたプロ仕様のジェネレーターです。

高速処理

最適化された変換エンジンで画像を数秒で処理。待ち時間はありません。

SVG 対応

SVG ファイルを完全サポート。最適化とスケーリングで美しい仕上がりに。

あらゆる端末

デスクトップ、モバイル、タブレット、PWA に必要なすべてのサイズを生成。

完全パッケージ

ICO、PNG、Apple タッチアイコン、web manifest をすべてダウンロード。

複数フォーマット

PNG、JPG、GIF、WebP、BMP、SVG に対応 — あらゆる一般形式から変換。

すぐ使える

HTML スニペットと導入手順で、すぐに実装できます。

クロスブラウザ

Chrome、Firefox、Safari、Edge など最新ブラウザと完全に互換。

高品質

高度な画像処理で、どのサイズでもくっきり鮮明。

プロ仕様

世界中の主要サイトが使う業界標準のファビコンパッケージを生成。

8+
対応フォーマット
6
アイコンサイズ
100%
ブラウザ互換
0秒
処理時間

かんたん導入ガイド

次のシンプルな手順で、新しいファビコンをウェブサイトに追加します。

1

ファビコンパッケージをダウンロード

上のジェネレーターで完全なファビコンパッケージを ZIP として作成・ダウンロードします。

2

ファイルを展開

ZIP のすべてのファイルをウェブサイトのルート（index.html と同じフォルダ）に展開します。

3

HTML コードを追加

下の HTML コードをコピーし、ページの <head> 内に貼り付けます。

4

ファビコンをテスト

サイトを公開し、ブラウザタブ、ブックマーク、モバイルで正しく表示されるか確認します。

フレームワーク別の統合コード

技術スタックを選んでコードをコピー。ファイルはサイトルート（Next.js App Router は app/ フォルダ）に配置します。

index.html
<link rel="icon" href="/favicon.ico" sizes="any">
<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">
// app/layout.tsx
// 1. Drop these files into app/ (Next.js auto-detects them):
//    - favicon.ico, icon.png, icon.svg, apple-icon.png
// 2. For extra PNG sizes + a manifest, declare them here:
import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: ['/apple-touch-icon.png'],
  },
  manifest: '/site.webmanifest',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en"><body>{children}</body></html>
  )
}
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="icon" href="/favicon.ico" sizes="any" />
        <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" />
      </Head>
      <body><Main /><NextScript /></body>
    </Html>
  )
}
// Vue (public/index.html) — put files in public/
<link rel="icon" href="/favicon.ico" sizes="any">
<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">

// Nuxt 3 (nuxt.config.ts)
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' },
      ],
    },
  },
})
// 1. npm i gatsby-plugin-manifest
// 2. gatsby-config.js — point icon at a 512x512 PNG
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'Your App Name',
        short_name: 'App',
        start_url: '/',
        display: 'standalone',
        icon: 'src/images/android-chrome-512x512.png',
      },
    },
  ],
}

// Also copy favicon.ico to the static/ folder for the browser fallback.
// src/app.html — files live in static/
<!doctype html>
<html lang="en">
  <head>
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display:contents">%sveltekit.body%</div>
  </body>
</html>
ファイルの配置先は？ favicon.ico、icon.png、apple-icon.png を app/ フォルダに入れるだけです。Next.js が自動検出するため link タグは不要です。
site.webmanifest
{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

含まれるファイル

ファビコンパッケージには次のファイルが含まれます。

favicon.icofavicon-16x16.pngfavicon-32x32.pngapple-touch-icon.pngandroid-chrome-192x192.pngandroid-chrome-512x512.pngfavicon.svgsite.webmanifest

プロのヒント

  • 最良の互換性のため、すべてのファビコンファイルはウェブサイトのルートに置いてください。
  • ファビコン更新後はキャッシュを消して、すぐに変更を確認しましょう。
  • 複数の端末とブラウザでテストし、正しく表示されるか確認してください。

よくある質問

ファビコンの生成と実装に関するよくある質問への回答。

対応している画像形式は？
PNG、JPG、GIF、WebP、BMP、SVG をアップロードできます。最も鮮明に仕上げるには 512×512 以上の正方形画像をおすすめします。ファイルは 10 MB まで対応します。
元画像はどのくらいの大きさが良い？
512×512 以上の正方形が理想的です。ジェネレーターがきれいに縮小するため、大きく鮮明な元画像ほど小さなアイコンが美しくなります。
SVG ファビコンに対応していますか？
はい。SVG はベクターの favicon.svg として保持されるほか、古いブラウザ向けに各 PNG・ICO サイズへラスタライズもされます。
どのサイズが生成されますか？
16×16・32×32 PNG、複数解像度の favicon.ico、180×180 の Apple タッチアイコン、192・512 の Android/PWA アイコン、web manifest が含まれます。
ウェブサイトへの追加方法は？
ZIP をサイトルートに展開し、付属の HTML スニペットをページの <head> に貼り付けます。上に完全な手順とフレームワーク別コードがあります。