Favicon

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

Favicon Example

Favicon Example

Inhaltsverzeichnis

local
 
depth

2

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

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;

Configuration\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;

Configuration\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 bottom. Possible values are bottom, top.

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;

Configuration\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;

Configuration\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 bottom left, bottom right, top left, top 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;

Configuration\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;

Configuration\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;

Configuration\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 optional configuration keys:

  • 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 bottom left, bottom right, top left, top right.
  • padding (float): The percentage padding of the overlay. Default is 0.1.

ColorizeModifier

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;

Configuration\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.