Logos and Images Used in the WebUI
NocodilySuite WebUIs support setting logos, favicons, and other image assets.
These are registered through the media management section in the console and referenced from the WebUI editor.
Types of Images You Can Configure
| Type | Purpose | Recommended Size |
|---|---|---|
| Logo | Displayed in the WebUI header and authentication screens | Width 200px or more, PNG / SVG recommended |
| Favicon | Icon shown in the browser tab | 32×32px or 64×64px, ICO / PNG |
| OGP Image | Thumbnail shown when sharing on social media | 1200×630px recommended |
| Other images | General-purpose images used in WebUI components | Depends on usage |
Supported formats: PNG / JPG / SVG / WebP / ICO
Steps to Upload an Image
- Select a team in the console.
- Open the "Media" menu.
- Click "Upload Image" and select a file.
- After uploading, a URL for the image will be issued.
How to Reference an Image in the WebUI Editor
Registered images can be referenced from component settings or CSS settings in the WebUI editor.
Example: Setting the logo
- Open "Site Settings" in the WebUI editor.
- Paste the URL issued from media management into the "Logo" field.
- Check the display using the preview.
Example: Displaying an image in a component
- Place a component such as a Card.
- Set the URL in the image field:
- Specify the media management URL directly
- Dynamically bind a URL from API response data (e.g., via the Storage API)
Tip
When a logo or image is updated, the change is reflected immediately without redeploying the WebUI.
However, a hard reload (Ctrl+F5 / Cmd+Shift+R) may be required if the browser has cached the previous image.