Related
	Compress 🗜️		Inline 🦔

---

Favicon 🎨

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

Desktop icons (light & dark) 🎁

iOS touch icons 🎁

Web app manifest 🎁

Android icons 🎁

Windows tile icons 🎁

Note

Favicon generates static icon files during your Astro build, not on request.

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 Astro build phase. Add the Favicon component to your layout to include the generated links in your HTML:

src/layouts/Layout.astro

---
import Favicon from "@playform/favicon/Favicon";
---


	
		
	
	
		
	

Copy

The following favicon files will be generated:

• favicon.ico
• favicon.svg
• favicon-96x96.png
• apple-touch-icon.png
• mstile-144x144.png
• browserconfig.xml
• manifest.json

Default Settings

You can override any of the default options from the configurations of:

• @realfavicongenerator/generate-favicon

astro.config.ts

export default {
	integrations: [
		(await import("@playform/favicon")).default({
			Settings: {
				Desktop: {
					RegularIconTransformation: {
						Type: "background",
						BackgroundColor: "#ffffff",
						BackgroundRadius: 0.4,
						ImageScale: 0.7,
					},
				},
				Touch: {
					AppTitle: "My App",
				},
				WebAppManifest: {
					Name: "My Application",
					ShortName: "MyApp",
					BackgroundColor: "#ffffff",
					ThemeColor: "#ffffff",
				},
			},
		}),
	],
};
Copy

or disable generation entirely:

astro.config.ts

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

You can see the full option map here: Source/Interface/Option.ts

Custom Source

By default Favicon uses Source/Asset/PlayForm.svg as the icon source. If you'd like to use a different source, add it to the Favicon Source option, as well:

export default {
	integrations: [
		(await import("@playform/favicon")).default({
			Source: "Source/Asset/Icon.svg",
			DarkSource: "Source/Asset/Dark/Icon.svg",
		}),
	],
};
Copy

Output Path

By default Favicon outputs files to the root of your site. If you'd like to use a different path, add it to the Favicon Path option, as well:

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

Inject HTML

You can inject the generated favicon HTML directly into your built HTML files by enabling InjectHtml. Add a comment in your layout to control where it is inserted:

<!-- PlayForm/Favicon -->
Copy

astro.config.ts

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

Controlling Logging

You can control the logging by providing a custom Logger function. Pass an empty function to disable all output:

astro.config.ts

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

Changelog

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