Modifying the assets and various resources of your Rocket.Chat workspace involves customizing the logos, icons, and other images to have a branded look. This helps you achieve a consistent user experience across devices.
To access the assets section, go to Administration > Workspace > Settings > Assets. Update the following settings according to your preferences or your organization’s guidelines:
Field | Description | Recommended size |
|---|---|---|
Enable SVG favicon | When enabled, you can set an SVG favicon. | |
logo (svg, png, jpg) | The logo asset represents the primary branding image of the Rocket.Chat workspace and it's used in various parts. It appears on the sidebar footer of your workspace. | 300px × 300px, with a transparent background |
logo - dark theme (svg, png, jpg) | This asset is a variation of the primary logo image specified to be used for a dark theme environment. | 300px × 300px |
login background (svg, png, jpg) | Set the image to appear in the background of the login and sign-up screen. | 1920px × 1080px, with a 72dpi resolution |
login background - dark theme (svg, png, jpg) | This is a variation of the login background image specified for the dark theme of the workspace. | 1920px × 1080px, with a 72dpi resolution |
favicon (ico) | Set a favicon for the | 16px × 16px |
favicon (svg) | This is another variation of the favicon asset of the | 16px × 16px |
favicon 16x16 (png) | This asset type is an alternative variation of the favicon, optimized for use with PNG format. | 16px × 16px |
favicon 32x32 (png) | A favicon asset but with a larger size. | 32px × 32px |
android-chrome 192x192 (png) | Lets you set the icon that appears on an Android home screen. | 192px × 192px |
android-chrome 512x512 (png) | This asset refers to the icon displayed on the workspace tab when accessed via Chrome on an Android device. | 512px × 512px |
apple-touch-icon 180x180 (png) | Set the Apple icon shown on a web page. | 180px × 180px |
apple-touch-icon-precomposed 180x180 (png) | Set an icon with a precomposed design that bypasses the iOS automatic icon effects. It appears on the iOS home screen. | 180px × 180px |
mstile 70x70 (png) | This asset type represents the icon that appears on the Windows Start Screen. | 70px × 70px |
mstile 144x144 (png) | It lets you set another variation of the Mstile asset optimized for higher resolutions. | 144px × 144px |
mstile 150x150 (png) | The icon that appears on the Windows Start Screen. | 150px × 150px |
mstile 310x310 (png) | Another variation of the Mstile asset, optimized for other resolutions. | 310px × 310px |
mstile 310x150 (png) | Another variation of the Mstile asset, optimized for higher resolutions. | 310px × 150px |
safari pinned tab (svg) | Lets you set the icon that appears on the Safari browser's pinned tabs. | 16px × 16px, and it should be designed with a transparent background, so it blends well with the browser interface. |
You can also set assets using the Assets API endpoints.