1枚の画像を、あらゆる画面で。

SVGからファビコンへの変換

小さなアイコンで、印象に残るサイトに。

安全なSVGからICOとPNGのサイト用アイコンを作成します。小さなサイズでラスター化した結果を確認し、端末内で保存できます。

PNG ICO PWA

アイコンパックを作成する

画像から、ファビコンやアプリアイコンなどを作成。

1アップロード
2調整
3ダウンロード

画像待ち

ここに画像をドロップ

SVG · 最大5 MB

画像が端末の外に送信されることはありません。すべてブラウザー内で処理します。

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

アイコンを調整する

どの画面でも見やすくなるように調整できます。

画像の収め方

背景

透明

単色

#FFFFFF

余白6%

角の丸み0%

ICOサイズ（複数選択可）

256

マスク可能なアイコン

実際の表示を確認(画像をアップロードすると、アイコンのプレビューが表示されます。)

ブラウザーのタブ

https://example.com

iOSのホーム画面

ここにアイコンを表示

PWA / Android

ここにアイコンを表示

3 ステップでファビコンを作る方法

アイコン一式を、数秒で。

1画像をアップロード

安全なSVGからICOとPNGのサイト用アイコンを作成します。小さなサイズでラスター化した結果を確認し、端末内で保存できます。

2調整してプレビュー

画像の収め方、背景、余白を選び、小さなサイズでも仕上がりを確認します。

3ダウンロードしてサイトに追加

アイコンパックを書き出し、ファイルをアップロードして、HTMLにアイコンのリンクを追加します。

ひとつのロゴを、あらゆる画面へ。

生成されるファイルと、それぞれの用途をご紹介します。

サイトのファビコン

私のサイト×

16 × 16

32 × 32

16 × 16、32 × 32のアイコンで、ブラウザーのタブやブックマークでもサイトを見分けやすく。

iPhone & iPad

私のサイト

180 × 180

サイトをホーム画面に追加するために、180 × 180のapple-touchアイコンを使います。

PWA & Android

アプリをインストール

192 × 192

512 × 512

アプリのインストールやホーム画面に使う192×192、512×512のアイコン。

アイコンパックには何が入っていますか？

さまざまなサービスでそのまま使えるアイコン一式。

favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
apple-touch-icon.png180 × 180
icon-192.png192 × 192
icon-512.png512 × 512
site.webmanifestウェブアプリマニフェスト

サイトにアイコンを追加

これらのリンクをHTMLの<head>内に追加してください。

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

アイコンパックを Nuxt プロジェクト直下の public/ に展開します。ファイル名は変えず、site.webmanifest と favicon.ico を同じ場所に置きます。app/ には置きません。
app/app.vue の script setup ブロックにコードを追加します。古いファイルを指すアイコンリンクを置き換え、再ビルドして公開します。

useHead({
  "link": [
    {
      "rel": "icon",
      "type": "image/x-icon",
      "href": "/favicon.ico"
    },
    {
      "rel": "apple-touch-icon",
      "sizes": "180x180",
      "href": "/apple-touch-icon.png"
    },
    {
      "rel": "manifest",
      "href": "/site.webmanifest"
    }
  ]
})

自分のサイトで /favicon.ico、/apple-touch-icon.png、/site.webmanifest を開きます。成功応答と画像または JSON の実データを確認します。HTML エラーページが返る 200 応答も誤ったパスです。manifest 内の全アイコン URL も確認します。

古いアイコンが残る場合は head 内の重複リンクを確認し、開発者ツールでキャッシュを無効にして再読み込みします。CDN や service worker を使う場合はそのキャッシュも確認します。16・32 ピクセルの実際のプレビューで小さな文字や細線を簡略化します。

これらはアイコンと manifest メタデータです。これだけでインストール可能な PWA にはなりません。ドメイン直下への配信を想定しているため、サブディレクトリでは全リンクと manifest のアイコンパスを変更してください。

Nuxt 4 · public/ · Nuxt 4 · useHead

SVGからファビコンへの変換

安全なSVGからICOとPNGのサイト用アイコンを作成します。小さなサイズでラスター化した結果を確認し、端末内で保存できます。

安全な SVG パスはベクターのままです。ラスター画像や文字画像はベクター化しません。

SVGには安全で外部リソースに依存しない図形を使用してください。

作成を始める

よくある質問

ファビコンとは何ですか？

ブラウザーのタブやブックマークに表示される、サイトを表す小さな画像です。

どの画像形式を使えばよいですか？

透明なロゴにはPNGがおすすめです。JPG、WebP、安全なSVGも使えます。

正方形ではない画像も使えますか？

はい。「全体を収める」「切り抜き」「引き伸ばす」から選び、プレビューで確認できます。

複数のサイズのアイコンが必要なのはなぜですか？

ブラウザーやホーム画面では異なるサイズを使います。小さなアイコンはタブではっきり表示され、大きなアイコンはアプリのショートカットに適しています。