LimecubeSupport
Back to Design & Style

Header: Logo, Call to Action & Favicon

8 min readUpdated 15 February 2026

Site Header

The header appears consistently across all pages of your website. It typically contains your logo (text or image), navigation menu, phone number or call-to-action button, optional custom text, and social media buttons. To edit it, hover over the header in edit mode and click the edit icon.
Example of a Limecube site header
Header layout and styling have moved. If your site uses one of the new header layouts, your header layout and its styling (colours, widths, transparency, alignment and fonts) are now set in the Navigation Manager, open it with the Navigation or Styles button in the editor. Your logo, call-to-action, custom text, favicon and search are still edited here in the header popup (below).

Header Layout

On the new header layouts, change your layout in the Navigation Manager: open it, open the Header & Navigation Styles panel, and pick a Header template, the preview updates, and the switch applies when you Save. (On older headers, the layout is still selected from the sections icon in the left panel of the editor.) Different layouts support different features, some include space for custom text, while others are more compact.
Available header layout options

Header Editing Tutorial

Designing the Header

Header design covers two areas: Header Style (colour scheme, transparency, fixed positioning) and Header Layout (arrangement of logo, menu, and CTA). On the new header layouts, both are set in the Navigation Manager's Header & Navigation Styles panel, where you can customise colours, transparency, navigation alignment, font sizes and spacing. (On older headers, hover over the header, click the edit button, and choose 'Header style'.)
  1. 1Click the pen icon next to Save in the header
  2. 2Select 'Logo'
  3. 3Enter text for a text logo, or upload an image for a graphic logo
  4. 4Adjust the logo height for desktop and mobile views
  5. 5Click 'Apply'

Logo Tutorial

Keep your logo proportional. Making it too large can distract from the page content and take up valuable screen real estate, especially on mobile devices.

Adding a Phone Number or Call to Action

Click the pen icon and select 'Button/Phone (CTA)'. Choose between:

Phone: Enter a phone number for click-to-call on mobile devices
URL (Button): Add button text and a link to an internal page or external URL

You can customise the button style and colour scheme to match your design.

Custom Text

Custom text is used for adding additional information like an address or a detailed call-to-action. This feature is only available on header layouts that provide sufficient space. To add custom text, open the header editor and look for the 'Custom Text' option. If your current layout does not support it, switch to a layout that includes a custom text area.
Not all header layouts accommodate custom text fields due to space constraints. If you cannot see the option, try selecting a different header layout.

iOS Home Screen Icon

When visitors save your site to their iPhone or iPad home screen, iOS displays a dedicated icon. You can set this icon by uploading a custom image and adding a small code snippet to your site.

How to Add an iOS Home Screen Icon

  1. 1Create a PNG image exactly 150 × 150 pixels
  2. 2Name the file apple-touch-icon.png (case-sensitive)
  3. 3Open the file manager in your Limecube dashboard
  4. 4Create a folder called Misc if one does not already exist
  5. 5Upload the image into the Misc folder
  6. 6Navigate to Settings → Head Code (or the equivalent code injection area)
  7. 7Paste the following line into the <head> section: <link rel="apple-touch-icon" href="Misc/apple-touch-icon.png">
  8. 8Save and publish your site
Verify the icon by opening your site in Safari on an iOS device, tapping the Share button, and selecting 'Add to Home Screen'. The custom icon should appear instead of a screenshot.

Adding a Favicon

A favicon is the small icon displayed on the browser tab next to your page title. To add one: open the header editor, find the 'Favicon' option, browse for your image, and click 'Apply'. Use a square image (at least 32×32 pixels) for best results.

Adding Search

  1. 1Hover over the header in admin mode
  2. 2Click the edit button
  3. 3Choose 'Search element'
  4. 4Toggle search on
  5. 5Select which page displays search results

Header Features Tutorial

Troubleshooting

Keep navigation clear and straightforward. Use descriptive labels (not 'Page 1') and preview on multiple devices to ensure the header looks good everywhere.
Was this helpful?

Last updated:

Related Articles

The Navigation Manager

Start Here

Manage your site's menus, header, footer and navigation styling in one place, build the header and footer menus, create dropdowns and mega menus, choose a header layout, and hide the menu on individual pages.

10 min read

Using the Style Editor

Customise colours, fonts, button styles, and more, make your site match your brand perfectly.

6 min readVideo

Colour Palette Tool

Apply a consistent colour set across your entire website using Limecube's built-in palette tool.

4 min readVideo

Still need help?

Submit a Support Ticket