Skip to main content
MindTouch Success Center

Brand your site logos and icons

This page applies to:MindTouch (current)

A good way to control your site's brand is to upload a custom site logo, favicon, and Apple touch icon. These images help your users recognize your site easier.

 

How to brand your logo, favicon and Apple Touch icon


Site logo, favicon, and apple touch icon can be found in the control panel. You can get to the control panel through the Site tools drop-down in the user navigation when you are logged in as a pro member.


 

Site logo

Located in the upper left of the header area, this site logo can be uploaded in the control panel under Branding > Logo & Icons. To choose your image, click the Choose File button. Once you've selected the image, click Upload Logo. You can upload the following file types in MindTouch Responsive: gif, jpg, png, and svg. Try not to upload large file sizes since that will increase the load time for your mobile based users.


 

If you are uploading an SVG, be sure to use a CSS rule set to limit the max width since SVGs do not have default height and width. The following CSS can be used to limit the size of the site logo responsively since it is using em's which measure character width and not pixels.

.elm-header-logo-container img {
    max-width: 20em;
}

Favicon

Favicon is an image that represents a site and is used by web browsers in the URL field, tabs, bookmarks, and in some search results. All MindTouch sites come with a default favicon and have the ability for customization. To upload your own favicon go to Branding > Logo & Icons in the control panel and scroll down to the section titled. To choose your image, click the Choose File button. Once you've selected the image, click Upload Favicon.

There is a known issue that can occur when loading favicons as PNG files. The image may appear darker in the browser than set. We recommend either converting your PNG to an ICO file, there are a lot of free services, like ICOconvert that can do this. You can also  lighten the PNG file to match your branding standards. If you have any questions please reach out to our Customer Support Team.

Apple Touch icon

These icons are used for bookmarks to sites on the iOS platform. To upload your own Apple touch icon, go to Branding > Logo & Icons in the control panel. Scroll down to the Site Apple Touch Icon section and choose your image, by clicking the Choose File button. Once you've selected the image, click Upload Apple Touch Icon.

  • Was this article helpful?