Favicon ジェネレーター

512x512 の PNG または SVG 画像から、各種サイズの favicon を一括生成します。

512x512 の PNG または SVG をドロップ

または

ファイルを選択

生成されるファイル

ファイル名	サイズ	用途
`favicon-16x16.png`	16x16	ブラウザタブ
`favicon-32x32.png`	32x32	ブラウザタブ（高解像度）
`favicon-96x96.png`	96x96	高解像度favicon
`apple-touch-icon.png`	180x180	iOS ホーム画面
`web-app-manifest-192x192.png`	192x192	PWA アイコン
`web-app-manifest-512x512.png`	512x512	PWA スプラッシュ
`favicon.ico`	32x32	レガシーブラウザ
`site.webmanifest`	-	PWA設定ファイル
`favicon-snippet.html`	-	HTMLへの埋め込みコード

使い方

512x512px の正方形画像を用意する（PNG または SVG）
上のエリアに画像をドラッグ＆ドロップ、またはファイルを選択
「Favicon を生成してダウンロード」をクリック
favicons.zip がダウンロードされる

生成されるファイルの配置

ダウンロードした ZIP を展開し、Laravel プロジェクトの public/ ディレクトリに配置します。

public/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-96x96.png
├── apple-touch-icon.png
├── web-app-manifest-192x192.png
├── web-app-manifest-512x512.png
└── site.webmanifest

HTML への埋め込み

favicon-snippet.html の内容を <head> タグ内に追加します。

Laravel (Blade) の場合

resources/views/app.blade.php:

html

<head>
    <!-- ... -->

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <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>

VitePress の場合

.vitepress/config.js:

export default defineConfig({
  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: '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' }],
  ],
})

site.webmanifest の編集

生成された site.webmanifest のサービス名を編集してください：

json

{
  "name": "あなたのサービス名",
  "short_name": "短縮名",
  "icons": [...],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

推奨事項

ロゴ作成のヒント

シンプルなデザイン - 小さいサイズでも認識できるように
余白を確保 - 端ギリギリまで使わない
コントラスト - 背景と区別しやすい色を使う
SVG で作成 - 拡大縮小に強い

注意

アップロードした画像はブラウザ内でのみ処理され、サーバーには送信されません
正方形でない画像は歪んで表示される場合があります

Favicon ジェネレーター ​

生成されるファイル

使い方 ​

生成されるファイルの配置 ​

HTML への埋め込み ​

Laravel (Blade) の場合 ​

VitePress の場合 ​

site.webmanifest の編集 ​

推奨事項 ​