Skip to main content

Branding

This chapter provides an overview of the available options for customizing the branding of your GeoGirafe application.

App title and description​

See Configuration > Branding for information on how to customize the application title and description.

If your application supports multiple languages, the title and description must also be translated. See the next section for details.

Overriding and extending translations​

To override existing translations or add new ones, create a set of translation files (.json) following the same structure as the existing translation files and place them in the i18n directory.

Then, add the files to languages > translations in your config.json. See Configuration > Languages for more details.

Translation files are loaded in the order in which they are listed. Values from later files override values from earlier files.

The header logo can be customized through the logo and logoDarkMode configuration options. See Configuration > Branding for more details.

Prototype banner​

The prototype banner can be deactivated through the prototypeBanner configuration option. See Configuration > Branding for more details.

Favicon and app icons​

Further branding customization can be done by replacing the default images in the GeoGirafe build directory listed below.

The easiest approach is to replace the existing files or mount custom files into the container using the same file names.

Favicon​

  • ./favicon.ico - default
  • ./images/logo/favicon_black.svg - light mode
  • ./images/logo/favicon_white.svg - dark mode

Android app icons​

When GeoGirafe is installed on an Android device's home screen, these icons are used as the app icons.

The ./site.webmanifest file contains the app name, description, and references to the icons used for mobile devices.

  • ./images/logo/android-chrome-192x192.png
  • ./images/logo/android-chrome-512x512.png

Apple app icon​

When GeoGirafe is installed on an iOS device's home screen, the following icons are used. Keep these icons at 180 × 180 px.

  • ./images/logo/apple-touch-icon-black.png - light mode
  • ./images/logo/apple-touch-icon-white.png - dark mode