Skip to main content
MindTouch Success Center

Logos and icons

Change your Site Logo, Favicon and Apple Touch Icon

  1. Ensure you are signed in as an Admin on your site. If you do not possess an admin account, contact the appropriate resource that does.
  2. Navigate to Site Tools > Control Panel > Branding" > Logo & Icons.
    • Site Logo: Click Choose File, select an image, and click Upload Logo
    • Site Favicon: Click Choose File, select an impage, and click Upload Favicon.
    • Apple Touch Icon: Click Choose File, select an image, and click Upload Apple Touch Icon.

You must select Upload after the name of your new file appears in the Choose File field to replace the current file. 

Site Logo

The Site Logo appears in the upper left of the header area. Supported file types include .gif, .jpg, .png, and .svg. Large file sizes will increase the load time for mobile users.

 

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. MindTouch sites come with a default favicon.

If a .png Favicon image looks discolored compared to the preview section, change the file format to .ico. If you do not have an operating system that supports this change, free services such as ICOconvert can help with this change.

Apple Touch Icon

These icons are used for bookmarks to sites on the iOS platform.

Recommendations

  • Max container size: Use an image editing program to pre-shrink logos to the max container size so it will look exactly as intended. Logos and icons smaller than the max will not be stretched to fill the space so feel free to upload any size smaller.
  • If there is extra whitespace or padding: Use an image editing program to remove the whitespace and save as a PNG with transparency background.
  • If your image uses no whitespace: Upload as a .jpg for a smaller file size and faster load time.
  • Match your corporate branding: Use the same Favicon and Site Logo across web properties to create a more seamless user experience.

Edge Cases

  • To upload a site logo larger than 300px width or 300px height: Reconstruct the HTML in the Template > Header and use a photo uploaded there to load in the header instead. Using CSS to remove this natural requirement will cause your image to blur. If your logo must be larger than 300px, contact your Account Manager to arrange a technical resource for this change, because CSS will need to be customized for mobile devices. If you do decide to do this, still attach a logo to your site under Site Tools > Control Panel > Branding > Logo & Icons because all new emails sent to users for password recovery, page subscription, page feedback, or new user registration will feature whatever logo appears in there and it is probably a good idea to have a serious logo there and not our default MindTouch logo.
  • White logo not appearing in your site-generated emails: Use an image editing program to add a background that matches your header color so that your site does not look any different, but your emails not appear with a logo with that same background thus allowing it to be human-readible. If you are having trouble doing or want to consider a 2 different logo approach, one for emails and one for your site, please contact your account's Customer Success MindTouch Representative.
  • Site logo is being cut off on social media sites or chat integrations like Slack or Discord: Upload a new Social Share icon with empty transparent white space on both the left and right of the image. Some applications only take the center part of the image.
  • Was this article helpful?