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.

The header logo and Logo module links use Settings → General → Site Title as their accessible name, including inline SVG logos. If the title is empty, they use the tagline, then the translated “Home” label. You can leave the tagline empty without losing the logo link's name.

Configure the assets

1. Prepare logo variants with consistent proportions and enough contrast for their intended backgrounds.
2. Select the normal and mobile logos.
3. Add intrinsic width and height when the rendered dimensions are known.
4. 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.
5. Select the Site Icon.
6. Enable SVG rendering only for a trusted SVG logo that displays correctly in supported contexts.
7. 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.

Use different logos by language

When a logo contains a slogan or other text, translate its image URL in POM Translate under Translations → Translate URLs → Custom links. Configure the main and additional languages in POM Translate first, and upload the translated images to the site's Media Library.

1. Keep the main-language images in Logo, Mobile version logo, Mobile navigation logo, and Side navigation logo.
2. Save Brand settings, then open Translations → Translate URLs → Custom links and choose the target language.
3. Find the detected image URL. Used in identifies the corresponding POM Theme logo fields.
4. Enter the translated image's full URL under URL for locale, then select Save custom URLs.
5. Visit that language on desktop and mobile and open the navigation panels.

An empty translation uses the original image, and the main language always uses the original fields. The mapping belongs to the image URL: if several logo fields share the same source URL, they share its translation. Different source URLs can be translated independently. Clearing a locale's translated URL restores the original image for that locale.

The footer and Logo module also use these variants when they use the Brand images. Fullscreen navigation has no separate built-in logo field; a Logo module in its reusable content follows the same language selection. Images from Header colors presets also appear in Custom links, identified by their Config name. A selected header preset or module Logo version retains precedence over Brand, and its own source URL is translated with the same dictionary. Without a mapping, that selected image remains unchanged.

Dimensions and Render SVG logo remain shared across languages. Use translated images with compatible proportions and, when inline SVG rendering is enabled, use trusted local SVG variants. The Site Icon stays shared. Deactivating POM Translate displays the original logos.

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.

The Gutenberg Social Icons block and Legacy Social Icons component also read this shared list. They provide per-instance styles and palette colors, while the profile links remain global. Each entry needs a valid URL and an available library icon; incomplete entries are omitted. After changing the list, refresh the block preview and clear any public page cache. You do not need to resave every page.

Verification

Check the public site while signed out:

• each logo links to the intended destination;
• mobile and desktop variants appear in the right context;
• changing language selects the configured logo variants, and clearing a translated URL restores its original;
• opening the mobile and side navigation panels shows the correct logo proportions, and each logo image has the configured width and height attributes;
• 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.