Skip to main content
MindTouch Success Center

Logos and icons

How to change your logo, favicon and Apple Touch icon


To change your site logo, Apple Touch icon, favicon, or social share logo you need to be signed in as an admin on your site. If you do not possess an admin account, contact the appropriate resource that does.

Site logo, favicon, and Apple Touch icon can be found in the control panel. The page to see and modify site icons can be found within the "Site Tools" > "Control Panel" > "Branding" > "Logo & Icons" or https://SITE/deki/cp/customize.php.

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.

Upon having an acceptable file format for any of these icons and wanting to change what currently lives there, select "Choose file", upload your image, and then select to upload. Note - it will not auto-upload, you must select upload to actually replace the current logo with the one you want once the name of your file appears in the right of the "Choose file" box.

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.

If you notice that by uploading a PNG in the Favicon that is looks disclored in any way from what appears to have been uploaded in the preview section, this is a product of the default packager we use to store and process these icons. To fix this, simple take your PNG and change the file format of it to ".ico". No need to export a new image in Photoshop or do anything fancy, simply change the ending from PNG to ICO will fix it. If you do not have an operating system that supports this, there are dozens of free services out there such as ICOconvert that can do this.

 

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.

 

Recommendations


  • Pre-shrink your logos to the max size container in photoshop or your application of choice so you can be sure it will look exactly as you 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 any whitespace (not to be confused with white coloring), remove the whitespace in your application of choice (Adobe Photoshop or Illustrator), and save as a PNG with transparency on. This will prevent your logo or favicon from looking tacky.
  • If there is no whitespace, upload as a JPG for a smaller file size and thus a faster site (JPGs do not carry the transparency property for every pixel of the image so it doesn't have as much data to store).
  • Creating an exact copy of your corporate site is ideal in terms of favicon and logo. This creates a seamless experience between for users navigating back and forth between them and doesn't allow them to get confused or distracted by the branding (unless the base styling is substantially different).

Edge Cases


  • In the event you want to upload a site logo larger than 300px width or 300px height, you need to reconstruct the HTML in the Template > Header and then use a photo uploaded there to load that in the header instead. Using CSS to remove this natural requirement will cause your image to blur. If you do decide a logo greater than 300px is neccessary, please contact your CSM to set up the right technical resource to do it for you, as CSS will also need to be written to make sure on mobile sizes, your logo does not blur or extend off the page. Furthermore, if you do decide to do this, PLEASE still attach a logo to your site under "Site Tools" > "Control Panel" > "Branding" > "Logo & Icons" as 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.
  • If you notice that by uploading a PNG in the Favicon that is looks disclored in any way from what appears to have been uploaded in the preview section, see above in the Favicon section.
  • If your white logo is not appearing in your site-generated emails, you will need to photoshop a black background or whatever colored background your header is 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.
  • If your logo is being cut off on social media websites or chat integrations like Slack or Discord, you need to upload a new Social Share icon. There is a sweat spot in the middle and some applications only take the center most of the image. We recommend you leave empty transparent white space on both the left and right of the icon/logo should this issue arise.
  • Was this article helpful?