Favicons - a Statamic Addon

A tiny Statamic favicon add-on for projects that use the statamic-favicons generator. The generator is a simple CLI that creates a complete favicon set in a few seconds from one source image. It auto-detects a Statamic project, finds likely source icons, previews them in the terminal, suggests Tailwind theme colors, detects common Antlers partial and layout conventions, writes the generated assets, and can create an Antlers partial for your layout.

The primary workflow is still the NPX generator:

npx statamic-favicons generate

That command generates the favicon assets, manifest metadata, Antlers partial, and JSON data directly in your Statamic project. This add-on is optional. It exists as a small Statamic-native convenience layer for teams that prefer a tag in their layout.

CLI Preview

The generator is wizard-first. A typical run looks like this:

$ npx statamic-favicons generate
 
Statamic Favicons
 
Detected
Project: /sites/example
Sources found: 2
Layouts found: 1
Theme colors found: 3
App name: Example Site
 
Source preview
resources/images/favicon.svg
 
? Select source favicon
  resources/images/favicon.svg
 
? Use resources/images/favicon.svg?
  Yes
 
? Assets output directory
  public/assets/favicons
 
? Where should the Antlers partial be written?
  resources/views/partials/favicons.antlers.html
  Hint: detected Statamic partial convention
 
? Public path for generated tags
  /assets/favicons/
 
? Website name
  Example Site
 
? Short website name
  Example
 
? Browser theme color
  brand: #ff6633
  Hint: detected from Tailwind theme colors
 
? Manifest background color
  white: #ffffff
  Hint: detected from Tailwind theme colors
 
? Icon background color
  transparent
  Hint: keep source image transparency
 
? Generate favicon assets and partial?
  Yes
 
Generated
public/assets/favicons/favicon.ico
public/assets/favicons/favicon.svg
public/assets/favicons/favicon-96x96.png
public/assets/favicons/apple-touch-icon.png
public/assets/favicons/site.webmanifest
resources/views/partials/favicons.antlers.html
resources/favicons.json

What This Add-on Does

It adds one Antlers tag:

{{ favicons }}

The tag renders favicon markup from the files generated by the NPX package:

resources/views/partials/favicons.antlers.html
resources/favicons.json

If neither file exists, the tag renders nothing in production. In local debug mode it can output a short HTML comment reminding you to run the generator.

When To Use It

Use the generator only if you want the simplest setup:

{{ partial:partials/favicons }}

Install this add-on if you prefer this instead:

{{ favicons }}

That is intentionally the whole feature. The generator does the real favicon work; the add-on only gives Statamic a clean runtime hook for the generated output.

Installation

composer require eminos/statamic-favicons

Then generate your favicons from the Statamic project root:

npx statamic-favicons generate

Add the tag inside your layout <head>:

{{ favicons }}

Configuration

Publishing the config is optional:

php artisan vendor:publish --tag=statamic-favicons-config

The defaults are:

return [
    'partial' => resource_path('views/partials/favicons.antlers.html'),
    'data' => resource_path('favicons.json'),
    'debug_missing_comment' => true,
];

Development

composer install
composer test

License

MIT