   |   Compress 🗜️ |    |   Inline 🦔 |
Favicon 🎨
This Astro integration brings favicon generation
utilities to your Astro project.
Desktop icons (light & dark) 🎁
Note
Favicongenerates static icon files during your Astro build, not on request.
Important
Place the Favicon component in your layout's <head> section to include the
generated favicon links in your HTML.
There are two ways to add integrations to your project. Let's try the most convenient option first!
Astro includes a CLI tool for adding first party integrations: astro add. This
command will:
- (Optionally) Install all necessary dependencies and peer dependencies
- (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/faviconUsing Yarn:
yarn astro add @playform/faviconUsing PNPM:
pnpx astro add @playform/faviconFirst, install the Favicon integration like so:
npm install -D -E @playform/faviconThen, apply this integration to your astro.config.* file using the
integrations property:
astro.config.ts
export default {
integrations: [(await import("@playform/favicon")).default()],
};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";
---
<html>
<head>
<Favicon />
</head>
<body>
<slot />
</body>
</html>The following favicon files will be generated:
favicon.icofavicon.svgfavicon-96x96.pngapple-touch-icon.pngmstile-144x144.pngbrowserconfig.xmlmanifest.json
You can override any of the default options from the configurations of:
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",
},
},
}),
],
};or disable generation entirely:
astro.config.ts
export default {
integrations: [
(await import("@playform/favicon")).default({
Settings: false,
}),
],
};You can see the full option map here:
Source/Interface/Option.ts
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",
}),
],
};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/",
}),
],
};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 -->astro.config.ts
export default {
integrations: [
(await import("@playform/favicon")).default({
InjectHtml: true,
}),
],
};By default Favicon logs the generated favicon HTML snippet to the build
console after generating files. You can disable this with Inject: false:
astro.config.ts
export default {
integrations: [
(await import("@playform/favicon")).default({
Inject: false,
}),
],
};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: () => {},
}),
],
};See CHANGELOG.md for a history of changes to this integration.
