Components

Favicon

Basics

Used to create MoonShine layouts.

The Favicon designed is used to add a favicon to an HTML page.

 namespaces
use MoonShine\UI\Components\Layout\Favicon;
 
Favicon::make();
 namespaces
use MoonShine\UI\Components\Layout\Favicon;
 
Favicon::make();
<x-moonshine::layout.favicon />
<x-moonshine::layout.favicon />

Parent component: head.

Configuration

The simplest way to change favicons is through the config/moonshine.php configuration file.

config/moonshine.php
'favicons' => [
    'apple-touch' => '/images/apple-touch-icon.png',
    '32' => '/images/favicon-32x32.png',
    '16' => '/images/favicon-16x16.png',
    'safari-pinned-tab' => '/images/safari-pinned-tab.svg',
],
'favicons' => [
    'apple-touch' => '/images/apple-touch-icon.png',
    '32' => '/images/favicon-32x32.png',
    '16' => '/images/favicon-16x16.png',
    'safari-pinned-tab' => '/images/safari-pinned-tab.svg',
],

For more information about configuration, see Configuration.

Custom favicons

To change favicons, you need to use the customAssets() method or specify the corresponding parameter in the Blade component.

assets(array $assets);
assets(array $assets);
Favicon::make([
    // ...
])
    ->customAssets([
        'apple-touch' => Vite::asset('favicons/apple-touch-icon.png'),
        '32' => Vite::asset('favicons/favicon-32x32.png'),
        '16' => Vite::asset('favicons/favicon-16x16.png'),
        'safari-pinned-tab' => Vite::asset('favicons/safari-pinned-tab.svg'),
    ]);
Favicon::make([
    // ...
])
    ->customAssets([
        'apple-touch' => Vite::asset('favicons/apple-touch-icon.png'),
        '32' => Vite::asset('favicons/favicon-32x32.png'),
        '16' => Vite::asset('favicons/favicon-16x16.png'),
        'safari-pinned-tab' => Vite::asset('favicons/safari-pinned-tab.svg'),
    ]);
<x-moonshine::layout.favicon :assets="[
    'apple-touch' => asset('favicons/apple-touch-icon.png'),
    '32' => asset('favicons/favicon-32x32.png'),
    '16' => asset('favicons/favicon-16x16.png'),
    'safari-pinned-tab' => asset('favicons/safari-pinned-tab.svg'),
]" />
<x-moonshine::layout.favicon :assets="[
    'apple-touch' => asset('favicons/apple-touch-icon.png'),
    '32' => asset('favicons/favicon-32x32.png'),
    '16' => asset('favicons/favicon-16x16.png'),
    'safari-pinned-tab' => asset('favicons/safari-pinned-tab.svg'),
]" />

The assets array is as follows:

  • apple-touch - URL for the Apple Touch Icon,
  • 32 - URL for the 32x32px favicon,
  • 16 - URL for the 16x16px favicon,
  • safari-pinned-tab - URL for the Safari pinned tab,

Pinned tab color

For the Safari browser, you can set the pinned tab color using the bodyColor() method or specify the corresponding parameter in the Blade component.

bodyColor(string $color);
bodyColor(string $color);
Favicon::make([
    // ...
])
    ->bodyColor('#7843e9');
Favicon::make([
    // ...
])
    ->bodyColor('#7843e9');
<x-moonshine::layout.favicon bodyColor='#7843e9' />
<x-moonshine::layout.favicon bodyColor='#7843e9' />