Favicon

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

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')}

See also

View the sources on GitHub:

FaviconViewHelper

Backend

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

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 application context (e.g. Testing) in your ext_localconf.php:

ext_localconf.php

\KonradMichalik\Typo3EnvironmentIndicator\Utility\ConfigurationUtility::configByContext(
    applicationContext: 'Testing',
    faviconModifierConfiguration: [
        \KonradMichalik\Typo3EnvironmentIndicator\Image\TextModifier::class =>
        [
            'text' => 'TEST',
            'color' => '#f39c12',
            'stroke' => [
                'color' => '#ffffff',
                'width' => 3,
            ],
        ]
    ],
);

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

Note

If you want to specify the frontend or backend favicon separately, you can add the another parameter for the request context faviconModifierFrontendConfiguration or faviconModifierBackendConfiguration to the configByContext() method.

The following modifier classes are available:

TextModifier

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

ext_localconf.php

\KonradMichalik\Typo3EnvironmentIndicator\Utility\ConfigurationUtility::configByContext(
    applicationContext: 'Development',
    faviconModifierConfiguration: [
        \KonradMichalik\Typo3EnvironmentIndicator\Image\TextModifier::class =>
        [
            'text' => 'DEV',
            'color' => '#bd593a',
            'stroke' => [
                'color' => '#ffffff',
                'width' => 3,
            ],
        ]
    ],
);

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.

See also

View the sources on GitHub:

TextModifier

TriangleModifier

Adds a triangle indicator to the favicon.

ext_localconf.php

\KonradMichalik\Typo3EnvironmentIndicator\Utility\ConfigurationUtility::configByContext(
    applicationContext: 'Development',
    faviconModifierConfiguration: [
        \KonradMichalik\Typo3EnvironmentIndicator\Image\TriangleModifier::class =>
        [
            'color' => '#bd593a',
        ]
    ],
);

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.

See also

View the sources on GitHub:

TriangleModifier

CircleModifier

Adds a circle indicator to the favicon.

ext_localconf.php

\KonradMichalik\Typo3EnvironmentIndicator\Utility\ConfigurationUtility::configByContext(
    applicationContext: 'Development',
    faviconModifierConfiguration: [
        \KonradMichalik\Typo3EnvironmentIndicator\Image\CircleModifier::class =>
        [
            'color' => '#bd593a',
        ]
    ],
);

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.

See also

View the sources on GitHub:

CircleModifier

FrameModifier

Adds a frame around the favicon.

ext_localconf.php

\KonradMichalik\Typo3EnvironmentIndicator\Utility\ConfigurationUtility::configByContext(
    applicationContext: 'Development',
    faviconModifierConfiguration: [
        \KonradMichalik\Typo3EnvironmentIndicator\Image\FrameModifier::class =>
        [
            'color' => '#bd593a',
        ]
    ],
);

Additional optional configuration keys:

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

See also

View the sources on GitHub:

FrameModifier

ReplaceModifier

Replace the original favicon with a custom one regarding the application context.

ext_localconf.php

\KonradMichalik\Typo3EnvironmentIndicator\Utility\ConfigurationUtility::configByContext(
    applicationContext: 'Development',
    faviconModifierConfiguration: [
        \KonradMichalik\Typo3EnvironmentIndicator\Image\ReplaceModifier::class =>
        [
            'path' => 'EXT:sitepackage/Resources/Public/Icons/favicon.png',
        ]
    ],
);

See also

View the sources on GitHub:

ReplaceModifier

OverlayModifier

Overlay an additional image to the original favicon regarding the application context.

ext_localconf.php

\KonradMichalik\Typo3EnvironmentIndicator\Utility\ConfigurationUtility::configByContext(
    applicationContext: 'Development',
    faviconModifierConfiguration: [
        \KonradMichalik\Typo3EnvironmentIndicator\Image\OverlayModifier::class =>
        [
            'path' => 'EXT:sitepackage/Resources/Public/Icons/favicon.png',
        ]
    ],
);

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.

See also

View the sources on GitHub:

OverlayModifier

ColorizeModifier

Overlay an additional image to the original favicon regarding the application context.

Warning

This modifier is only available with "Imagick" image driver.

ext_localconf.php

\KonradMichalik\Typo3EnvironmentIndicator\Utility\ConfigurationUtility::configByContext(
    applicationContext: 'Development',
    faviconModifierConfiguration: [
        \KonradMichalik\Typo3EnvironmentIndicator\Image\ColorizeModifier::class =>
        [
            'color' => '#039BE5',
        ]
    ],
);

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.

See also

View the sources on GitHub:

ColorizeModifier

Note

If you want to modify the image to your own need, implement a custom modifier class and add it to the configuration.