Your logo placement determines whether a visitor recognises your firm within three seconds of landing on your site. Poor placement or incorrect sizing forces visitors to search for brand identity cues, creating friction that reduces enquiry rates before they read a single word of your content.
A conveyancing firm approached us after tracking a 40% drop in mobile enquiries despite steady traffic numbers. The logo occupied 60% of the mobile header, pushing their phone number and contact button below the fold. Visitors saw branding but missed the action they needed to take. We reduced the logo to 20% of header height and repositioned the contact button to sit level with the logo on the right. Mobile enquiries returned to baseline within two weeks. The logo still identified the firm, but it no longer competed with the elements that converted visitors into leads.
Logo Size Standards That Balance Brand and Function
Your logo should occupy between 15% and 25% of header height on desktop screens and no more than 20% on mobile devices. Exceeding these proportions shifts user attention away from navigation and contact options, which are the elements that facilitate enquiries. A logo exists to confirm identity, not dominate screen real estate. When sizing your logo during website development, test it at the smallest size that remains legible at arm's length on a mobile device. If detail is lost at that scale, the logo itself requires simplification rather than increased size.
Consider a family law practice with an ornate crest-style logo designed decades ago for letterhead. At 200 pixels high, the crest displayed fine detail but consumed space that mobile users needed for the enquiry form link. Reducing it to 80 pixels rendered the fine detail illegible. The solution involved creating a simplified icon version of the crest for digital use, preserving brand recognition while fitting functional size constraints. The full crest remained on printed materials where resolution supported it.
Ready to chat about your Website?
Book a Free Discovery Call with our team to understand how we can transform your online presence
Top Left Placement and the F-Pattern Scan
Visitors scan websites in an F-shaped pattern, starting at the top left corner before moving right and then down the page. Positioning your logo in the top left corner aligns with this natural reading behaviour and establishes brand context before visitors engage with other content. Centred logos disrupt this pattern by inserting branding where visitors expect navigation to begin, forcing them to reorient before they can locate menu items or contact details. Top left placement integrates seamlessly with how people process information online, reducing cognitive load and keeping attention on conversion elements.
Law firms targeting corporate clients sometimes centre logos to project formality, mirroring traditional print layouts. The approach sacrifices usability for aesthetic preference. A commercial litigation firm testing both layouts measured a 22% increase in time-to-contact when using a centred logo compared to top left placement. Visitors spent longer searching for the contact page link, and a portion abandoned the site during that search. Top left placement removed the search step entirely, allowing visitors to focus on whether the firm's services matched their needs rather than navigating the interface.
Mobile Header Height and Scroll Behaviour
On mobile devices, header height directly affects how much content appears before a visitor must scroll. A header exceeding 100 pixels in height, including logo and navigation, pushes your opening headline and value proposition off the initial screen. Visitors who do not scroll within five seconds often exit without engaging further. Your logo must fit within a header that leaves at least 60% of the initial mobile viewport available for content. This requires not just reducing logo height but often simplifying navigation into a collapsible menu that activates on tap rather than displaying all links by default.
Mobile users arriving on a solicitor's site from a Google search expect immediate confirmation they have found relevant help. If the logo and menu consume the screen, they see structure but no substance. A personal injury firm reduced header height from 140 pixels to 75 pixels by shrinking the logo and switching to a hamburger menu. The change allowed their headline "No Win, No Fee Personal Injury Claims" to appear immediately on load. Mobile enquiry rates improved by 18% without any change to website content or offers, purely through improved visibility of the opening value statement.
Logo Contrast and Background Interaction
Your logo must maintain legibility across all background colours and images used in your header. A dark blue logo on a white background works until a page features a hero image with dark sections that intersect the logo area. The solution involves either locking the header background to a solid colour regardless of page content or creating logo variations that adapt to background tone. Most website upgrades for solicitors include implementing a semi-transparent overlay behind the logo or using SVG logos with automatic colour inversion based on background luminance.
A litigation practice used a charcoal wordmark logo in their header, which sat on a white background on most pages. Their homepage featured a full-width hero image of a courtroom with dark wood panelling that extended behind the logo area. The charcoal logo disappeared against the dark background, leaving visitors momentarily uncertain which site they were viewing. Adding a white version of the logo that activated automatically when placed over dark backgrounds solved the legibility issue without requiring manual adjustments on each page. The logo remained consistent in style while adapting to technical requirements for contrast.
Linked Logo Behaviour and Navigation Expectations
Every logo on a website should link back to the homepage when clicked. This convention is so widely adopted that visitors click logos instinctively when they want to reset navigation or return to the start of a site. A logo that does not link, or links to an external brand page, breaks this expectation and frustrates users who must then locate a separate home link. The linked logo also provides a secondary navigation path for visitors who bypass the main menu, particularly on mobile devices where menu access requires an additional tap. Including this functionality during website development for lawyers ensures your site behaves in a way that aligns with learned user behaviour across the web.
Some firms worry that linking the logo to the homepage creates confusion when visitors are already on the homepage. The concern is unfounded because clicking the logo while on the homepage simply refreshes the page or scrolls to the top, neither of which harms the user experience. The benefit of consistent behaviour across all pages outweighs any theoretical downside of redundant clicks. A corporate law firm initially disabled logo linking on their homepage to avoid this perceived issue, then re-enabled it after observing visitors clicking the logo repeatedly and expressing confusion when nothing happened. Consistency in interaction patterns reduces friction and builds confidence in site navigation.
Frequently Asked Questions
What is the ideal logo size for a law firm website header?
Your logo should occupy between 15% and 25% of header height on desktop and no more than 20% on mobile devices. This balances brand recognition with space for navigation and contact elements that convert visitors into enquiries.
Where should I position my logo on my legal website?
Position your logo in the top left corner of the header. This aligns with the F-pattern reading behaviour visitors naturally follow and allows them to establish brand context before engaging with navigation or content.
Should my website logo link to the homepage?
Yes, every logo should link back to the homepage when clicked. This is a universal web convention that visitors expect, and it provides a secondary navigation option particularly valuable on mobile devices.
How do I handle logo visibility on different page backgrounds?
Create logo variations that adapt to background tone, or use a semi-transparent overlay behind the logo. This ensures legibility whether your header sits on solid colours or over hero images with varying light and dark areas.
What header height should I use on mobile devices?
Keep your mobile header under 100 pixels in total height including logo and navigation. This leaves at least 60% of the initial viewport for content, allowing visitors to see your value proposition without scrolling.
