An application displays a logo in several places. All of these logos are shipped as resources with fixed names and can be replaced by the application without touching any configuration.

The logo resources

Resource	Displayed in	Theme variable
`/images/appLogo.svg`	Header of the expanded sidebar, as well as the login and logout page	`IMAGES_APP_LOGO`, `com.top_logic.layout.Icons.APP_LOGO`
`/images/appLogoMinimized.svg`	Header of the collapsed (minimized) sidebar	`IMAGES_APP_LOGO_MINIMIZED`
`/images/favicon.png`	Browser tab next to the application name	`DEFAULT_ICON`

The two sidebar logos are displayed at very different sizes. Use the shipped templates as a guideline: appLogo.svg is a landscape logo including the lettering (default template 220 × 50), appLogoMinimized.svg is a square mark without lettering (default template 64 × 64).

Providing your own logos

Add a file with the same name at the same location in your application:

src/main/webapp/images/appLogo.svg
src/main/webapp/images/appLogoMinimized.svg
src/main/webapp/images/favicon.png

The application's resources take precedence over the resources of the same name provided by the engine modules. No further configuration is required, in particular the theme variables need not be adjusted.

Replacing logos per theme

If a logo should look different in one specific theme only (e.g. a light variant for a dark theme), additionally place the file below the theme directory:

src/main/webapp/themes/<theme-id>/images/appLogo.svg

Images are always looked up in the active theme first, then in its parent themes, and only finally at the given path in the root directory of the web application. A theme that does not bring its own variant therefore automatically uses the file from /images/.

Using different file names

If you do not want to adopt the naming convention, redirect the theme variable instead – either in the theme editor or directly in the file src/main/webapp/WEB-INF/themes/<theme-id>/theme-settings.xml:

<settings>
    <icon name="IMAGES_APP_LOGO"
        value="/images/my-logo.svg"
    />
    <icon name="IMAGES_APP_LOGO_MINIMIZED"
        value="/images/my-logo-small.svg"
    />
</settings>

The theme variables only provide the default for the sidebar view (LogoViewConfiguration). In a layout, the logo can also be specified directly for an individual sidebar:

<view class="com.top_logic.layout.structure.LogoViewConfiguration"
    logo="/images/my-logo.svg"
    logoMinimized="/images/my-logo-small.svg"
/>

Favicon

The favicon is announced to the browser through the theme variable DEFAULT_ICON, which points to /images/favicon.png by default.

To replace the favicon, add your own file at that path in your application, just like for the logos. Placing it below a theme directory as src/main/webapp/themes/<theme-id>/images/favicon.png works for the favicon as well. Unlike the SVG logos, a raster image is expected here.