Site Logo

Site logos showcase your brand, giving users a clear, recognisable symbol that often links back to the homepage for easy navigation.

Site logos are a key part of your website's identity, offering users a clear and recognisable symbol of your brand. They make it easy for users to connect with your site's purpose and often serve as a clickable element, taking users back to the homepage for easy navigation.

When to use this component

Site logos are essential for establishing your website's identity, making it easy for users to recognise your brand. They provide a visual anchor, often linking back to the homepage for easy navigation. Ensure your logo is clear and scalable to look great on all screen sizes, and consider styling it to match the overall design of your site.

A well-placed logo also helps create a cohesive experience, making your website feel professional and easy to navigate, while reinforcing your brand's presence throughout the user journey.

Examples in GOSS products

In the header as the main home page link of all themes
In the footer as the main logo amongst the other links

Accessibility considerations

Site logos play a crucial role in establishing your website's identity and providing users with a clear, recognisable symbol of your brand. For accessibility, it's important to ensure that the logo is easy to see and distinguish, with enough contrast against the background for users with visual impairments.

When using a logo as a clickable element, like linking to the homepage, it's essential to ensure that screen readers can properly identify the link. Adding a descriptive alt text to the logo image can help provide context for users who rely on assistive technologies.

Ensure the logo is scalable and looks good on different screen sizes, making it accessible to users on mobile devices as well. Additionally, avoid overloading the logo with interactive elements, as this can distract from its primary purpose of brand identification and site navigation.

Basic site logo

A site logo component with no additional configuration options.

Link to ' Subsite name ' homepage

HTML Java

<div class="gi-sitelogo"><a href="/" class="gi-sitelogo__link">
		<img src="/image/6606/image/logo.png" alt="" class="gi-sitelogo__image">
		<span class="gi-sitelogo__extratext accessibility">Link to '</span>
		<span class="gi-sitelogo__titletext accessibility">Subsite name</span>
		<span class="gi-sitelogo__extratext accessibility">' homepage</span></a>
</div>

<comp:siteLogo />

Text site logo

A site logo component that shows the title of the subsite along with the logo.

<span class="gi-sitelogo__titletext">Subsite name</span>

By removing the accessibility class from the titletext component, the text is visible to the user, ready to be styled how you wish.