Latest Updates! π See the change log for details.
A Multi-platform (iOS13+γAndroidγWindowsγmacOSγchromeOS etc.), All Browser(Chromeγ SafariγFirefoxγYandexγIEγEdge ) Favicon generator for Astro Project.
Features Β· Installation Β· Usage Β· Configuration Β· Change Log
- Generates and inserts standard-compliant favicon link tags.
- Automatically creates favicon assets for different environments using one source file.
- Simplify or optimize communication between teams to avoid missing files.
- Change Favicon for Light and Dark Mode.
This package is compatible with Astro 4.0.0 and above, which support the Integrations API.
npm install astro-favicons
Adding the configuration for Integration.
To use this integration, add it to your astro.config.*
file using the integrations property:
// astro.config.mjs
import { defineConfig } from "astro/config";
import favicons from "astro-favicons"; // Add code manually
export default defineConfig({
compressHTML: import.meta.env.PROD,
integrations: [
favicons({
// masterPicture: "./src/favicon.svg",
// emitAssets: true,
// You should adjust the following options accordingly
appName: "",
appShortName: "",
appDescription: "",
// dir:"auto",
lang: "en-US",
// display: "standalone",
// orientation: "any",
// start_url: "/?homescreen=1",
background: "#fff",
theme_color: "#fff",
faviconsDarkMode: false, // default `true`, Make favicon compatible with light and dark modes
// appleStatusBarStyle: "black-translucent",
//....
}),
],
});
Generate favicons from masterPicture.
-
Provide a
favicon.svg
image in thesrc
directory. -
Run
npm run dev
ornpm run build
in terminal.
Following HTML Code will automatically insert in thehead
section of all pages.
<!-- Astro Favicons v1.1.0 - https://github.com/ACP-CODE/astro-favicons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/x-icon" href="/favicon-dark.ico" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16-dark.png" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32-dark.png" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48-dark.png" media="(prefers-color-scheme: dark)">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#fff">
<meta name="application-name" content="Welcome to Astro Favicons.">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="mask-icon" href="/safari-pinned-tab.svg" color="#fff">
<meta name="msapplication-TileColor" content="#fff">
<meta name="msapplication-config" content="/browserconfig.xml">
<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json">
<!-- Astro Favicons -->
If compressHTML default, it will be compressed
- Emit or not emit assets by
emitAssets
options.
npm run build
/
βββ public/
β βββ android-chrome-192x192.png
β βββ android-chrome-512x512.png
β βββ apple-touch-icon.png
β βββ browserconfig.xml
β βββ favicon-16x16.png
β βββ favicon-16x16-dark.png
β βββ favicon-32x32.png
β βββ favicon-32x32-dark.png
β βββ favicon-48x48.png
β βββ favicon-48x48-dark.png
β βββ favicon.ico
β βββ favicon-dark.ico
β βββ favicon.svg
β βββ manifest.webmanifest
β βββ mstile-150x150.png
β βββ safari-pinned-tab.svg
β βββ yandex-browser-50x50.png
β βββ yandex-browser-manifest.json
βββ src/
β βββ faicon.svg
βββ package.json
The default output is a total of 18 files, which will reach 66 files in full configuration
This is the underlying API of the plugin masterPicture
and emitAssets
export default defineConfig({
integrations: [
favicons({
masterPicture: "./src/favicon.svg",
emitAssets: true,
faviconsDarkMode: true,
}),
],
});
Since FaviconConfig extends FaviconOptions, please refer to favicons or JSDOc of favicons-lib for other available interfaces.
DifferenceοΌ I simply added the
Safari
platform on top of favcions to supportsafari-pinned-tab.svg
generation and tag logging.
Future upgrades of the core may be spent more on the favicons-lib library
Submit your issues or feedback on our GitHub channel.
Check out the CHANGELOG.md file for a history of changes to this integration.