  Favicon 🎨 This Powered by Automatically generates comprehensive favicon sets during build, including:
Important Place the 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:
To install Using NPM: npx astro add @playform/faviconUsing Yarn: yarn astro add @playform/faviconUsing PNPM: pnpx astro add @playform/faviconFirst, install the npm install -D -E @playform/faviconThen, apply this integration to your
export default {
integrations: [(await import("@playform/favicon")).default()],
};The integration will now automatically generate favicon files during the build process using the default settings. Default settings include:
Add the You can use the
---
import Favicon from "@playform/favicon/Favicon";
---
<html>
<head>
<Favicon />
</head>
<body>
<slot />
</body>
</html>
Custom Path <Favicon Path="/assets/icons/" />Disable Meta Tags <Favicon Meta={false} />Custom App Title <Favicon AppTitle="My Application" />Disable Cache Busting <Favicon BustURL={false} />The integration generates favicon files during build time and can optionally inject HTML directly into your built HTML files.
The interface Settings {
Desktop?: DesktopSettings | boolean;
Touch?: TouchSettings | boolean;
WebAppManifest?: WebAppManifestSettings | boolean;
}Settings can be set to All icon types support transformation settings:
interface DesktopSettings {
RegularIconTransformation?: TransformationSettings;
DarkIconType?: "auto" | "specific";
DarkIconTransformation?: TransformationSettings;
}Default Desktop Settings: {
RegularIconTransformation: {
Type: "background",
BackgroundColor: "#eaeaea",
BackgroundRadius: 0.4,
ImageScale: 0.7,
},
DarkIconType: "specific",
DarkIconTransformation: {
Type: "background",
BackgroundColor: "#151515",
BackgroundRadius: 0.4,
ImageScale: 0.7,
},
}interface TouchSettings {
Transformation?: TransformationSettings;
AppTitle?: string;
}Default Touch Settings: {
Transformation: {
Type: "background",
BackgroundColor: "#eaeaea",
BackgroundRadius: 0,
ImageScale: 0.7,
},
AppTitle: "PlayForm",
}interface WebAppManifestSettings {
Transformation?: TransformationSettings;
BackgroundColor?: string;
ThemeColor?: string;
Name?: string;
ShortName?: string;
Display?: string;
StartUrl?: string;
}Default Web App Manifest Settings: {
Transformation: {
Type: "background",
BackgroundColor: "#eaeaea",
BackgroundRadius: 0,
ImageScale: 0.8,
},
BackgroundColor: "#eaeaea",
ThemeColor: "#eaeaea",
Name: "PlayForm",
ShortName: "PlayForm",
}Custom Icons
export default {
integrations: [
(await import("@playform/favicon")).default({
Source: "Source/Asset/CustomIcon.svg",
DarkSource: "Source/Asset/CustomDarkIcon.svg",
}),
],
};Custom Output Path
export default {
integrations: [
(await import("@playform/favicon")).default({
Path: "/assets/favicons/",
}),
],
};Disable Favicon Generation
export default {
integrations: [
(await import("@playform/favicon")).default({
Settings: false,
}),
],
};Custom Settings
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",
},
},
}),
],
};Cache busting adds a timestamp query parameter to all favicon URLs to ensure browsers fetch updated files during development and rebuilds. Enable in Component: <Favicon BustURL={true} />Enable in Integration: export default {
integrations: [
(await import("@playform/favicon")).default({
BustURL: true,
}),
],
};Cache busting adds <link href="/favicon.ico?Time=1234567890" rel="icon" />When Add a comment in your HTML: <!DOCTYPE html>
<html>
<head>
<!-- PlayForm/Favicon -->
</head>
<body>
<!-- Your content -->
</body>
</html>Enable HTML Injection: export default {
integrations: [
(await import("@playform/favicon")).default({
InjectHtml: true,
}),
],
};The integration will:
HTML Injection Options:
The integration generates the following favicon files:
You can provide a custom logger function to control build output: export default {
integrations: [
(await import("@playform/favicon")).default({
Logger: (message) => {
// Custom logging logic
if (message.includes("✓")) {
console.info(message);
}
},
}),
],
};Or disable output entirely: export default {
integrations: [
(await import("@playform/favicon")).default({
Logger: () => {},
}),
],
};When Example output: See | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
PlayForm/Favicon
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
