Favicon 

The favicon of the frontend or backend context will be modified regarding the environment and the associated configuration.

Favicon Example

Favicon Example

Table of Contents

Frontend 

For the frontend, the original favicon will either be fetched from the typoscript configuration page.shortcutIcon (see typoscript reference) or can be handled by your own fluid template via the FaviconViewHelper:

Custom fluid template 
<html xmlns:env="http://typo3.org/ns/KonradMichalik/Typo3EnvironmentIndicator/ViewHelpers"
    data-namespace-typo3-fluid="true">

{f:uri.resource(path:'EXT:your_extension/Resources/Public/Favicon/favicon.png') -> env:favicon()}
{env:favicon(favicon:'EXT:your_extension/Resources/Public/Favicon/favicon.png')}
Copied!

Backend 

For the backend, the favicon will be fetched by the extension configuration of $GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['backend']['backendFavicon'].

Favicon Examples

Favicon Examples

Scope 

By default, the Favicon indicator applies modifications to both frontend and backend. You can restrict it to a specific application type using the Scope enum:

ext_localconf.php 
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Handler;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Indicator;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Trigger;
use KonradMichalik\Typo3EnvironmentIndicator\Enum\Scope;
use KonradMichalik\Typo3EnvironmentIndicator\Image;

Handler::addIndicator(
    triggers: [
        new Trigger\ApplicationContext('Development*'),
    ],
    indicators: [
        // Only modify the frontend favicon
        new Indicator\Favicon(
            configuration: [
                new Image\Modifier\TextModifier([
                    'text' => 'DEV',
                    'color' => '#bd593a',
                ]),
            ],
            scope: Scope::Frontend,
        ),
    ],
);
Copied!

Available scope values:

  • Scope::Global (default): Apply to both frontend and backend.
  • Scope::Frontend: Apply only to the frontend.
  • Scope::Backend: Apply only to the backend.

Modifiers 

The favicon modification configuration can be found in $GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['typo3_environment_indicator'].

Add a configured favicon modifier to the desired environment (e.g. Testing) in your ext_localconf.php:

ext_localconf.php 
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Handler;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Indicator;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Trigger;
use KonradMichalik\Typo3EnvironmentIndicator\Image;

Handler::addIndicator(
    triggers: [
        new Trigger\ApplicationContext('Testing')
    ],
    indicators: [
        new Indicator\Favicon([
            new Image\Modifier\TextModifier([
                'text' => 'TEST',
                'color' => '#f39c12',
                'stroke' => [
                    'color' => '#ffffff',
                    'width' => 3,
                ],
            ])
        ])
    ]
);
Copied!
Favicon Modifier Example

The modifiers will be executed one after the other. You can combine them if you want.

The following modifier classes are available:

TextModifier 

This is the default modifier if no own configuration is set.

ext_localconf.php 
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Handler;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Indicator;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Trigger;
use KonradMichalik\Typo3EnvironmentIndicator\Image;

Handler::addIndicator(
    triggers: [
        new Trigger\ApplicationContext('Development')
    ],
    indicators: [
        new Indicator\Favicon([
            new Image\Modifier\TextModifier([
                'text' => 'DEV',
                'color' => '#bd593a',
                'stroke' => [
                    'color' => '#ffffff',
                    'width' => 3,
                ],
            ])
        ])
    ]
);
Copied!
Favicon TextModifier Example

Additional optional configuration keys:

  • font (string): The font file path for the text. Default is EXT:typo3_environment_indicator/Resources/Public/Fonts/OpenSans-Bold.ttf.
  • position (string): The position of the text. Default is top. Possible values are bottom, top.
  • stroke (array): Optional stroke configuration for the text outline. If set, it requires the sub-keys color (string) and width (numeric).

TriangleModifier 

Adds a triangle indicator to the favicon.

ext_localconf.php 
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Handler;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Indicator;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Trigger;
use KonradMichalik\Typo3EnvironmentIndicator\Image;

Handler::addIndicator(
    triggers: [
        new Trigger\ApplicationContext('Development')
    ],
    indicators: [
        new Indicator\Favicon([
            new Image\Modifier\TriangleModifier([
                'color' => '#bd593a',
            ])
        ])
    ]
);
Copied!
Favicon TriangleModifier Example

Additional optional configuration keys:

  • size (float): The percentage size of the triangle. Default is 0.7.
  • position (string): The position of the triangle. Default is bottom right. Possible values are bottom left, bottom right, top left, top right.

CircleModifier 

Adds a circle indicator to the favicon.

ext_localconf.php 
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Handler;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Indicator;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Trigger;
use KonradMichalik\Typo3EnvironmentIndicator\Image;

Handler::addIndicator(
    triggers: [
        new Trigger\ApplicationContext('Development')
    ],
    indicators: [
        new Indicator\Favicon([
            new Image\Modifier\CircleModifier([
                'color' => '#bd593a',
            ])
        ])
    ]
);
Copied!
Favicon CircleModifier Example

Additional optional configuration keys:

  • size (float): The percentage size of the circle. Default is 0.4.
  • position (string): The position of the circle. Default is bottom right. Possible values are top left, top center, top right, center left, center, center right, bottom left, bottom center, bottom right.
  • padding (float): The percentage padding of the circle. Default is 0.1.

FrameModifier 

Adds a frame around the favicon.

ext_localconf.php 
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Handler;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Indicator;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Trigger;
use KonradMichalik\Typo3EnvironmentIndicator\Image;

Handler::addIndicator(
    triggers: [
        new Trigger\ApplicationContext('Development')
    ],
    indicators: [
        new Indicator\Favicon([
            new Image\Modifier\FrameModifier([
                'color' => '#bd593a',
            ])
        ])
    ]
);
Copied!
Favicon FrameModifier Example

Additional optional configuration keys:

  • borderSize (float): The border size of the frame. Default is 5.

ReplaceModifier 

Replace the original favicon with a custom one regarding the environment.

ext_localconf.php 
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Handler;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Indicator;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Trigger;
use KonradMichalik\Typo3EnvironmentIndicator\Image;

Handler::addIndicator(
    triggers: [
        new Trigger\ApplicationContext('Development')
    ],
    indicators: [
        new Indicator\Favicon([
            new Image\Modifier\ReplaceModifier([
                'path' => 'EXT:sitepackage/Resources/Public/Icons/favicon.png',
            ])
        ])
    ]
);
Copied!
Favicon ReplaceModifier Example

OverlayModifier 

Overlay an additional image to the original favicon regarding the environment.

ext_localconf.php 
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Handler;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Indicator;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Trigger;
use KonradMichalik\Typo3EnvironmentIndicator\Image;

Handler::addIndicator(
    triggers: [
        new Trigger\ApplicationContext('Development')
    ],
    indicators: [
        new Indicator\Favicon([
            new Image\Modifier\OverlayModifier([
                'path' => 'EXT:sitepackage/Resources/Public/Icons/favicon.png',
            ])
        ])
    ]
);
Copied!
Favicon OverlayModifier Example

Additional configuration keys (required by the modifier, but provided via default configuration):

  • size (float): The percentage size of the overlay. Default is 0.5.
  • position (string): The position of the overlay. Default is bottom right. Possible values are top left, top center, top right, center left, center, center right, bottom left, bottom center, bottom right.
  • padding (float): The percentage padding of the overlay. Default is 0.1.

ColorizeModifier 

Colorize the original favicon with a specific color regarding the environment.

ext_localconf.php 
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Handler;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Indicator;
use KonradMichalik\Typo3EnvironmentIndicator\Configuration\Trigger;
use KonradMichalik\Typo3EnvironmentIndicator\Image;

Handler::addIndicator(
    triggers: [
        new Trigger\ApplicationContext('Development')
    ],
    indicators: [
        new Indicator\Favicon([
            new Image\Modifier\ColorizeModifier([
                'color' => '#039BE5',
            ])
        ])
    ]
);
Copied!
Favicon ColorizeModifier Example

Additional optional configuration keys:

  • opacity (float): Controls the opacity of the colorization. Default is 1.
  • brightness (integer): Controls the brightness of the colorization. Possible values are from -100 to 100.
  • contrast (integer): Controls the contrast of the colorization. Possible values are from -100 to 100.