Logo and Favicon User Guide

In this guide, you'll find detailed information on how to properly use and setup a logo and favicon for your website on Appmint.

Understanding what a Logo is

A logo is a visual representation of your brand identity.

It is designed to reflect our commitment to simplicity, creativity, and innovation in the realm of website building.

image

Usage Guidelines for Logo:

  • Consistency: Ensure that the logo is used consistently across all platforms and materials to maintain brand integrity.

  • Scaling: When resizing the logo, maintain its aspect ratio to prevent distortion. It's recommended to use vector formats (such as SVG or EPS) for scalability without loss of quality.

  • Clear Space: Leave appropriate clear space around the logo to prevent crowding and maintain visibility. This clear space should be at least equal to the height of the letter "A" in "Appmint".

  • Color Variations: The logo is primarily presented in vibrant green. However, it may also appear in black or white depending on the background color and context. Always choose the appropriate color variation for optimal visibility and contrast.

Favicon

The favicon is a small icon associated with a website, typically displayed in the browser's address bar or next to the site's name in bookmarks.

image

Usage guidelines for favicon

  • Simplicity: The favicon should be simple and easily recognizable, even at small sizes. Therefore, it's recommended to use a simplified version of the Appmint logo or an icon representing the brand identity.

  • Dimension: The standard dimension for a favicon is 16x16 pixels or 32x32 pixels. Ensure that the favicon is legible and visually appealing within these dimensions.

  • File Format: Save the favicon in the ICO format for compatibility across various browsers. Additionally, you can also provide PNG versions for high-resolution displays.

Integration Instructions

Logo setup on Appmint

To integrate the Appmint logo into your website, simply download the logo in your preferred format (SVG, EPS, PNG), and upload it to your website file manager.

Learn how to upload files to the file manager here.

Then follow these steps:

  1. Locate Site logo:

    • Sign in to the Appmint editor panel.
    • Click on the "Site Page" menu on the dashboard.
    • Choose the page or parent page for which you want to set the logo.
    • Once on the selected page, locate the logo element in the website header.

image

  1. Logo Setting:

    • Click on the "Tune Item" icon associated with the logo element, and the logo element editor will open up.
    • Within the logo element editor, click on the "Pick" button to access the file manager.

    Set logo

  2. Insert Logo:

    • In the file manager, select the image from the uploaded logos or upload a new one if necessary.
    • After selecting the logo image, click on the accept icon to insert the logo into the editor.
    • Once the logo is inserted, close the element panel to return to the main editor interface.
    • You will now see the new logo displayed on your site.
    • Click on the save icon located at the top beside the publish button to save the changes.

    set site logo

Congratulations, you have successfully learned to change your site logo.

Favicon setup on Appmint

To set the favicon for your website, save the favicon file in ICO and PNG format and upload it to the file manager of your website.

Learn how to upload images to File Manager here.

Then, do the following:

** LocateFavicon Setting:**

  • Make sure you're still signed into the Appmint editor panel.
  • Navigate to "Approot" and select your site name panel.
  • Click on the site settings icon to open your website settings panel.

favicon Settings

  1. Under the Info tab, navigate to Favicon
  2. To add your favicon image, click on the file manager icon to open up the file manager.
  3. In the file manager, choose the website name to access the file manager of the website.
  4. Select the uploaded website favicon and click on "Copy Image Link" to copy the favicon image link.
  5. Close the file manager after copying the link and return to the site info settings tab.

image

Paste Favicon Link:

  1. Paste the copied image link into the designated favicon section.
  2. Once the image link is pasted, click on the save button to save the changes.
  3. You can then go ahead to click on the preview link to view the update on your website.

image

Congratulations, your site favicon will be live by now.

By following these guidelines, you can effectively set your website logo and favicon to enhance your brand presence and create a cohesive user experience across various platforms.

If you encounter any issues or need further assistance, don't hesitate to reach out to our support team

Happy building with Appmint!