Configure brand identity and social profiles
Use Settings → POM Theme → Design system → Brand for identity assets reused by the theme.
Site identity
The Brand settings provide:
- Logo URL, which falls back to the site's default URL when empty;
- Logo for the normal site header;
- optional Logo width and Logo height attributes;
- Mobile version logo with optional width and height;
- Mobile navigation logo with optional Mobile navigation logo width and Mobile navigation logo height;
- Side navigation logo with optional Side navigation logo width and Side navigation logo height;
- Site Icon;
- Render SVG logo;
- Display the site title? and Display the site description?.
The Site Icon should be square and at least 512 × 512 pixels, as indicated in the interface.
Configure the assets
- Prepare logo variants with consistent proportions and enough contrast for their intended backgrounds.
- Select the normal and mobile logos.
- Add intrinsic width and height when the rendered dimensions are known.
- Select the navigation-specific logos where needed. Enter each logo's width and height as positive whole numbers in pixels, without units, keeping the image's proportions.
- Select the Site Icon.
- Enable SVG rendering only for a trusted SVG logo that displays correctly in supported contexts.
- Save and review header, mobile navigation, and side navigation where used.
The mobile navigation logo appears inside the mobile menu panel; it is separate from Mobile version logo, which appears in the header at mobile screen sizes. The side navigation logo has its own dimensions. These settings add numeric width and height attributes to each panel's image, including SVG files displayed as images, so the browser can reserve space before the image loads. For example, a 200 × 56 logo uses width 200 and height 56. CSS can still scale the image to fit the navigation layout.
Provide both dimensions to establish the aspect ratio. Leaving a dimension empty omits that attribute; values are not inherited from the main header logo or read automatically from the image file.
Social networks
Open Social networks within Brand and add one entry per profile. Each entry supports:
- Network name;
- Network title, used for a recognizable accessible link description;
- Display network name;
- URL;
- Network icon.
Choose the available Social links position values where those profiles should appear. The list adapts to enabled header bars and navigation layouts.
For the footer and the Social links widget, Display network name controls whether the network name appears beside the icon. Leave it unchecked for icons only. Network title supplies the link's accessible name through aria-label, independently of that checkbox; use a description such as “Visit us on LinkedIn”. If the title is empty, these links use Network name as their accessible name.
Verification
Check the public site while signed out:
- each logo links to the intended destination;
- mobile and desktop variants appear in the right context;
- opening the mobile and side navigation panels shows the correct logo proportions, and each logo image has the configured
widthandheightattributes; - the Site Icon appears in the browser tab;
- displayed site title and description match the intended identity;
- social links have correct destinations and understandable names.
For footer or Social links widget entries, turn Display network name off and save: the icon should remain and the visible name should disappear. Inspect the link's accessible name in your browser's accessibility tools and confirm it matches Network title. Turn the checkbox back on to show the name beside the icon again.
Shared action icons such as search, menu, close, and cart are covered in Create and use SVG icon libraries.