Related
	Compress 🗜️

---

Favicon 🎨

This Astro integration brings favicon generation utilities to your Astro project.

Automatically generates comprehensive favicon sets during build, including:

• Desktop icons (regular and dark mode)
• iOS touch icons
• Web app manifest
• Android icons
• Windows tile icons
• And more...

Note

Favicon generates static favicon files during the Astro build phase.

Installation 🚀

There are two ways to add integrations to your project. Let's try the most convenient option first!

astro add command

Astro includes a CLI tool for adding first party integrations: astro add. This command will:

1. (Optionally) Install all necessary dependencies and peer dependencies
2. (Also optionally) Update your astro.config.* file to apply this integration

To install Favicon, run the following from your project directory and follow the prompts:

Using NPM:

npx astro add @playform/favicon
Copy

Using Yarn:

yarn astro add @playform/favicon
Copy

Using PNPM:

pnpx astro add @playform/favicon
Copy

Install dependencies manually

First, install the Favicon integration like so:

npm install -D -E @playform/favicon
Copy

Then, apply this integration to your astro.config.* file using the integrations property:

astro.config.ts

export default {
	integrations: [(await import("@playform/favicon")).default()],
};
Copy

Getting started

The integration will now automatically generate favicon files during the build process using the default settings.

Default settings include:

• Desktop icons with light/dark mode support
• iOS touch icons
• Web app manifest
• Output to the root of your public directory

Configuration

You can override any of the default options. You can see the full option interface here: Source/Interface/Integration.ts

Option: source

The path to the source icon file (SVG).

• Type: string
• Default: "Source/Asset/PlayForm.svg"

Option: darkSource

The path to the dark mode source icon file (SVG).

• Type: string | undefined
• Default: "Source/Asset/Dark/PlayForm.svg"

Option: path

The output path for favicon files (relative to the public directory).

• Type: string
• Default: "/"

Option: settings

Favicon generation settings. Pass false to disable favicon generation, or an object with specific settings.

• Type: IconSettings | boolean
• Default: {} (uses built-in defaults)

settings.desktop

Desktop favicon settings including light and dark mode icons.

• Type: DesktopSettings | boolean
• Default:

{
	regularIconTransformation: {
		type: "background",
		backgroundColor: "#eaeaea",
		backgroundRadius: 0.4,
		imageScale: 0.7,
	},
	darkIconType: "specific",
	darkIconTransformation: {
		type: "background",
		backgroundColor: "#151515",
		backgroundRadius: 0.4,
		imageScale: 0.7,
	},
}
Copy

settings.touch

iOS touch icon settings.

• Type: TouchSettings | boolean
• Default:

{
	transformation: {
		type: "background",
		backgroundColor: "#eaeaea",
		backgroundRadius: 0,
		imageScale: 0.7,
	},
	appTitle: "PlayForm",
}
Copy

settings.webAppManifest

Web app manifest settings.

• Type: WebAppManifestSettings | boolean
• Default:

{
	transformation: {
		type: "background",
		backgroundColor: "#eaeaea",
		backgroundRadius: 0,
		imageScale: 0.8,
	},
	backgroundColor: "#eaeaea",
	themeColor: "#eaeaea",
	name: "PlayForm",
	shortName: "PlayForm",
}
Copy

Option: inject

Whether to inject favicon HTML into the build output logs.

• Type: boolean
• Default: true

Option: logger

Custom logger function for build output messages.

• Type: (message: string) => void
• Default: console.log

Examples

Custom Icons

astro.config.ts

export default {
	integrations: [
		(await import("@playform/favicon")).default({
			source: "Source/Asset/CustomIcon.svg",
			darkSource: "Source/Asset/CustomDarkIcon.svg",
		}),
	],
};
Copy

Custom Output Path

astro.config.ts

export default {
	integrations: [
		(await import("@playform/favicon")).default({
			path: "/assets/favicons/",
		}),
	],
};
Copy

Custom Settings

astro.config.ts

export default {
	integrations: [
		(await import("@playform/favicon")).default({
			settings: {
				desktop: {
					regularIconTransformation: {
						type: "background",
						backgroundColor: "#ffffff",
						backgroundRadius: 0.5,
						imageScale: 0.8,
					},
				},
				touch: {
					appTitle: "My App",
				},
				webAppManifest: {
					name: "My Application",
					shortName: "MyApp",
					backgroundColor: "#ffffff",
					themeColor: "#ffffff",
				},
			},
		}),
	],
};
Copy

Changelog

See CHANGELOG.md for a history of changes to this integration.