### Manual Installation

Source: https://github.com/acp-code/astro-favicons/blob/main/README.md

Install the package manually using npm.

```shell
npm install astro-favicons
```

--------------------------------

### Install via Astro CLI

Source: https://github.com/acp-code/astro-favicons/blob/main/README.md

Use the Astro CLI to automatically add the integration to your project.

```shell
npx astro add astro-favicons
```

--------------------------------

### Install astro-favicons using Astro CLI

Source: https://context7.com/acp-code/astro-favicons/llms.txt

Quickly add astro-favicons to your Astro project using the Astro CLI for automatic installation and configuration. Alternatively, use npm for manual installation and then add the integration to `astro.config.mjs`.

```bash
# Automatic installation (Astro >= 4.0.0)
npx astro add astro-favicons

# This command will:
# 1. Install the astro-favicons package
# 2. Add the integration to astro.config.mjs
# 3. Create necessary configuration

# Manual installation alternative:
npm install astro-favicons

# Then add to astro.config.mjs:
# import favicons from "astro-favicons";
# integrations: [favicons()]

# Start development server - assets available immediately
npm run dev

# Build for production - generates all favicon assets
npm run build
```

--------------------------------

### Astro Favicons Integration Configuration

Source: https://github.com/acp-code/astro-favicons/blob/main/README.md

Example configuration for the favicons integration, demonstrating how to define source images, localized names, and platform-specific icon settings.

```ts
// @ts-check
import { defineConfig } from "astro/config";
import favicons from "favicons";
import { readFile } from "fs/promises";

export default defineConfig({
  i18n: {
    defaultLocale: "zh-CN",
    locales: ["zh-CN", "en", "ar"],
  },
  compressHTML: import.meta.env.PROD,
  integrations: [
    favicons({
      input: {
        favicons: [
          "public/favicon.svg",
          await readFile("src/assets/pixel.png"),
        ], // select best source image by its size
        // Add other platform-specific sources if needed.
      },
      name: "twitter",
      name_localized: {
        "zh-CN": "推特",
        ar: {
          value: "ضحك على نحو نصف مكبوت",
          dir: "rtl",
          lang: "ar",
        },
      },
      short_name: "x",
      manifest: {},
      icons: {
        favicons: true,
        android: true,
        appleIcon: true,
        appleStartup: true,
        windows: true,
        yandex: true,
      },
      pixel_art: true,
      manifestMaskable: false,
      shortcuts: {},
      screenshots: {},
      output: {
        images: true,
        files: true,
        html: true,
        assetPrefix: "/",
      },
      // Extra options...
    }),
  ],
});
```

--------------------------------

### Automatically Injected HTML Tags

Source: https://github.com/acp-code/astro-favicons/blob/main/README.md

Example of the tags injected into the document head by the integration.

```html
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
<meta name="application-name" content="Astro Favicons" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/apple-touch-icon-precomposed.png"
/>
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fff" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
  name="apple-mobile-web-app-status-bar-style"
  content="black-translucent"
/>
<meta name="apple-mobile-web-app-title" content="Astro Favicons" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="msapplication-TileColor" content="#fff" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json" />
```

--------------------------------

### Advanced Astro Favicons Configuration

Source: https://context7.com/acp-code/astro-favicons/llms.txt

Customize favicon generation with advanced options, including multiple input sources, localized app names, platform-specific icon configurations, and output settings. This example also demonstrates integrating with i18n and enabling Capo.js for head optimization.

```typescript
// astro.config.mjs
import { defineConfig } from "astro/config";
import favicons from "astro-favicons";
import { readFile } from "fs/promises";

export default defineConfig({
  i18n: {
    defaultLocale: "en",
    locales: ["en", "zh-CN", "ar"],
  },
  compressHTML: import.meta.env.PROD,
  integrations: [
    favicons({
      // Custom input sources - can be string path, Buffer, or array
      input: {
        favicons: [
          "public/favicon.svg",
          await readFile("src/assets/pixel.png"),
        ],
        // Platform-specific sources can be defined separately
        android: "public/android-icon.svg",
        appleIcon: "public/apple-icon.svg",
      },

      // App name and localization (W3C spec compliant)
      name: "My App",
      name_localized: {
        "zh-CN": "我的应用",
        ar: {
          value: "تطبيقي",
          dir: "rtl",
          lang: "ar",
        },
      },
      short_name: "App",

      // Platform icon configuration
      icons: {
        favicons: true,                    // Generate standard favicons
        android: [
          "android-chrome-192x192.png",
          {
            name: "android-chrome-512x512.png",
            sizes: [{ width: 512, height: 512 }],
            purpose: "maskable",
            transparent: true,
            rotate: false,
            offset: 13,
          },
        ],
        appleIcon: [
          "apple-touch-icon.png",
          "apple-touch-icon-precomposed.png",
          "safari-pinned-tab.svg",
        ],
        appleStartup: true,               // Generate Apple startup screens
        windows: true,                     // Generate Windows tiles
        yandex: true,                      // Generate Yandex browser assets
      },

      pixel_art: true,                    // Optimize for pixel art
      manifestMaskable: false,

      // Output configuration
      output: {
        images: true,
        files: true,
        html: true,
        assetPrefix: "/",                 // Asset URL prefix
      },

      // Head optimization (powered by Capo.js)
      withCapo: true,                     // Auto-organize <head> tags
    }),
  ],
});

```

--------------------------------

### Build Output Log

Source: https://github.com/acp-code/astro-favicons/blob/main/README.md

Displays the list of files generated in the dist directory after running the build command.

```shell
17:57:14 [vite] dist/yandex-browser-manifest.json       0.15 kB │ gzip: 0.13 kB
17:57:14 [vite] dist/browserconfig.xml                  0.37 kB │ gzip: 0.19 kB
17:57:14 [vite] dist/favicon-16x16.png                  0.38 kB
17:57:14 [vite] dist/manifest.webmanifest               0.56 kB
17:57:14 [vite] dist/favicon-32x32.png                  0.77 kB
17:57:14 [vite] dist/favicon-48x48.png                  1.17 kB
17:57:14 [vite] dist/safari-pinned-tab.svg              1.24 kB │ gzip: 0.57 kB
17:57:14 [vite] dist/favicon.svg                        1.24 kB │ gzip: 0.57 kB
17:57:14 [vite] dist/yandex-browser-50x50.png           1.24 kB
17:57:14 [vite] dist/mstile-70x70.png                   1.76 kB
17:57:14 [vite] dist/mstile-144x144.png                 3.84 kB
17:57:14 [vite] dist/mstile-150x150.png                 3.96 kB
17:57:14 [vite] dist/mstile-310x150.png                 4.26 kB
17:57:14 [vite] dist/apple-touch-icon.png               4.97 kB
17:57:14 [vite] dist/apple-touch-icon-precomposed.png   4.97 kB
17:57:14 [vite] dist/android-chrome-192x192.png         5.00 kB
17:57:14 [vite] dist/mstile-310x310.png                 8.40 kB
17:57:14 [vite] dist/android-chrome-512x512.png        14.99 kB
17:57:14 [vite] dist/favicon.ico                       33.31 kB
```

--------------------------------

### Default Build Output for Astro Favicons

Source: https://context7.com/acp-code/astro-favicons/llms.txt

The default configuration generates 19 files, including various icon formats, manifest files, and browser configuration files. These assets are emitted via Vite's `emitFile` API.

```bash
# Default build output (19 files):
dist/favicon.ico                       33.31 kB  # Multi-size ICO file
dist/favicon.svg                        1.24 kB  # Original SVG
dist/favicon-16x16.png                  0.38 kB  # Standard favicon
dist/favicon-32x32.png                  0.77 kB  # Standard favicon
dist/favicon-48x48.png                  1.17 kB  # Standard favicon
dist/apple-touch-icon.png               4.97 kB  # iOS home screen
dist/apple-touch-icon-precomposed.png   4.97 kB  # iOS legacy
dist/safari-pinned-tab.svg              1.24 kB  # Safari pinned tab
dist/android-chrome-192x192.png         5.00 kB  # Android home screen
dist/android-chrome-512x512.png        14.99 kB  # Android splash
dist/mstile-70x70.png                   1.76 kB  # Windows small tile
dist/mstile-144x144.png                 3.84 kB  # Windows medium tile
dist/mstile-150x150.png                 3.96 kB  # Windows medium tile
dist/mstile-310x150.png                 4.26 kB  # Windows wide tile
dist/mstile-310x310.png                 8.40 kB  # Windows large tile
dist/yandex-browser-50x50.png           1.24 kB  # Yandex browser icon
dist/manifest.webmanifest               0.56 kB  # PWA manifest
dist/browserconfig.xml                  0.37 kB  # IE11 config
dist/yandex-browser-manifest.json       0.15 kB  # Yandex manifest

# Access during development at:
# http://localhost:4321/manifest.webmanifest
# http://localhost:4321/favicon.ico
# http://localhost:4321/apple-touch-icon.png
# etc.
```

--------------------------------

### Project Structure

Source: https://github.com/acp-code/astro-favicons/blob/main/README.md

Required placement of the source favicon file in the public directory.

```plaintext
/
├── public/
│   └── favicon.svg
├── src/
│   └── pages/
│       └── index.astro
└── astro.config.mjs
```

--------------------------------

### Basic Astro Favicons Integration

Source: https://context7.com/acp-code/astro-favicons/llms.txt

Set up the default Astro Favicons integration in your astro.config.mjs file. Ensure your source favicon is placed in the public/ directory.

```typescript
// astro.config.mjs
import { defineConfig } from "astro/config";
import favicons from "astro-favicons";

export default defineConfig({
  integrations: [favicons()],
});

// Project structure required:
// /
// ├── public/
// │   └── favicon.svg      <- Place your source favicon here
// ├── src/
// │   └── pages/
// │       └── index.astro
// └── astro.config.mjs
```

--------------------------------

### Configure Astro Integration

Source: https://github.com/acp-code/astro-favicons/blob/main/README.md

Register the integration in your astro.config file.

```ts
// @ts-check
import { defineConfig } from "astro/config";
import favicons from "astro-favicons";

export default defineConfig({
  integrations: [favicons()],
});
```

--------------------------------

### Configure Favicon Input Sources

Source: https://context7.com/acp-code/astro-favicons/llms.txt

Configure favicon generation by providing various input formats to the `favicons` function. This includes default behavior, single sources, buffers, arrays of sources, or platform-specific configurations.

```typescript
// 1. Default behavior - uses public/favicon.svg for all platforms
favicons();
```

```typescript
// 2. Single source for all platforms
favicons({
  input: "public/my-icon.svg",
});
```

```typescript
// 3. Buffer input (useful for dynamically loaded images)
import { readFile } from "fs/promises";

favicons({
  input: await readFile("src/assets/icon.png"),
});
```

```typescript
// 4. Array of sources (best quality selected automatically)
favicons({
  input: [
    "public/favicon.svg",
    "public/favicon-large.png",
    await readFile("src/assets/icon-512.png"),
  ],
});
```

```typescript
// 5. Platform-specific sources
favicons({
  input: {
    favicons: "public/favicon.svg",
    android: "public/android-chrome.svg",
    appleIcon: "public/apple-touch-icon.svg",
    appleStartup: "public/apple-startup.png",
    windows: "public/windows-tile.svg",
    yandex: "public/yandex-icon.svg",
  },
});
```

--------------------------------

### Configure Named Icon Options in Astro Config

Source: https://context7.com/acp-code/astro-favicons/llms.txt

Customize individual icon generation using `NamedIconOptions` in your `astro.config.mjs`. This allows fine-grained control over sizes, transparency, and other properties for specific icons.

```typescript
// astro.config.mjs
import { defineConfig } from "astro/config";
import favicons from "astro-favicons";

export default defineConfig({
  integrations: [
    favicons({
      icons: {
        android: [
          // Simple string reference uses defaults
          "android-chrome-192x192.png",

          // Full NamedIconOptions for customization
          {
            name: "android-chrome-512x512.png",
            sizes: [{ width: 512, height: 512 }],
            purpose: "maskable",    // "maskable" | "any" | "monochrome"
            transparent: true,       // Allow transparency
            rotate: false,           // Don't rotate the icon
            offset: 13,              // Percentage offset from edges
          },
        ],

        appleIcon: [
          "apple-touch-icon.png",
          "apple-touch-icon-precomposed.png",
          {
            name: "safari-pinned-tab.svg",
            // SVG icons for Safari pinned tabs
          },
        ],

        // Boolean to enable/disable with defaults
        favicons: true,
        windows: true,
        yandex: true,
        appleStartup: false,  // Disabled - won't generate startup screens
      },
    }),
  ],
});
```

--------------------------------

### Manual HTML Tag Injection

Source: https://github.com/acp-code/astro-favicons/blob/main/README.md

Use the middleware to manually inject localized tags into your components.

```ts
---
import { localizedHTML as favicons } from 'astro-favicons/middleware';
---
<meta charset="utf-8" />
<Fragment set:html={favicons(Astro.currentLocale)} />
```

--------------------------------

### Inject Localized Favicon HTML in Astro

Source: https://context7.com/acp-code/astro-favicons/llms.txt

Use the `localizedHTML` middleware to inject localized favicon HTML tags into your Astro `<head>`. Pass the current locale to the function.

```typescript
--- 
import { localizedHTML as favicons } from 'astro-favicons/middleware';
---
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Inject localized favicon HTML tags -->
  <Fragment set:html={favicons(Astro.currentLocale)} />

  <!-- Output includes tags like:
    <link rel="manifest" href="/manifest.webmanifest" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
    <meta name="application-name" content="My App" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    ... and more
  -->
</head>
```

--------------------------------

### Auto-Injected HTML Tags for Favicons

Source: https://context7.com/acp-code/astro-favicons/llms.txt

These HTML tags are automatically injected into the `<head>` of all pages by the astro-favicons integration. They ensure proper display of favicons and PWA assets across various devices and browsers.

```html
<!-- Automatically injected into <head> of all pages -->
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
<meta name="application-name" content="Astro Favicons" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-precomposed.png" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fff" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Astro Favicons" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="msapplication-TileColor" content="#fff" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json" />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.