Change an Application’s Logo

When a web app uses the Redwood theme, here’s how you can customize the application to use your company logo.

Note: Company logo and application title only display in desktop mode.

  1. In the Designer’s Navigator, click Web Applications and expand your web app.

  2. Expand Fragments and double-click shell-header to open it in the Page Designer.

    Web apps by default use a Redwood icon as a placeholder for the company logo. You’ll need to remove this icon and add your own image.
    Image shows a web application's shell-header fragment open in the Page Designer. The Icon component in the header is selected

  3. Select the icon component on the canvas, then click Code to switch to the fragment’s code view.

  4. Add an img tag just above the span, similar to <img :src="" ></img>. Place your cursor inside the src attribute’s quotation marks, then click Design to return to design view:

    Image shows the page's code with the img tag highlighted

  5. In the image’s Properties pane, click the Data tab.

  6. Drag your image into the drop target area in the Data tab.

    Image shows an empty image component in the application header. On the right, the Data tab in the Properties pane shows where you can drag and drop an image of your logo.

    Once you add the image, the Source URL field updates to show the path to the image.

  7. Click the All tab to view and edit image attributes. For example, you can add a description in the Alt field and select oj-sm-margin-2x-end in the class field to add space after the image.

  8. After you’ve made your changes, delete the icon component on the canvas.

  9. Click Preview to see how your logo appears.