Logos & Favicon

IonMag theme allows you to set your logo as an image file or a text. Upload a logo, and the theme will use in every location. IonMag is retina ready, so your have an additional option to upload a retina logo for high-resolution devices.

How to add a logo

To add a logo, go to Theme Panel > Header and expand the Logo & Favicon section. You will find three options: Logo upload (default logo for desktop), Retina Logo Upload (retina version for small screen devices) and Favicon (optional). Please read below to find out how to set up the logo for your website.

Logo upload

To upload your logo, go to Theme Panel > Header and expand the Logo & Favicon section. Logo upload is the section where you add a logo for the desktop. Logo must be a .png or .jpg file.

  • After finishing the upload click the Save Setting button.

Retina logo upload

To upload your logo, go to Theme Panel > Header and open the Logo & Favicon section. Retina logo upload is the section where you add a logo for small screen devices. Logo must be a .png or .jpg file.

  • If you do not set any retina logo, the site will load the normal logo on retina displays.
  • The retina logo must have the same file format as the normal logo, only double in size.
  • After finishing the upload click the Save Setting button.

Logo Size

There are several Logo Size variations depending on what Header Style you choose to use. IonMag currently offers two different header layouts, each with its own design.

  • Header Style 1 – Default

header_1_logo

Using the default – header style 1. For the best results, it’s recommended to use this logo size:

  • Logo: 272 x 90px
  • Retina Logo: 544 x 180px

  • Header Style 2 – Center menu and logo

header_2_logo

For this header style, you can use full width header logo, for example, a full width image. It’s recommended to use this logo size around 500 x 234px and double size for the retina logo, in this case, 1000 x 468px

  • Logo: 500 x 234px
  • Retina Logo: 1000 x 468px

Logo for mobile

Using theme’s Logo for Mobile panel settings you can optionally load a different logo on mobile phones and small screens. Usually, the logo is smaller so that it can fit in the smart affix menu.

  • To upload and set your logo for mobile, go to Theme Panel > Header and expand the Logo for Mobile section. Logo mobile is the section where you add a logo for the mobile.

iPhones, iPads, Samsung mobile devices and a lot of phones use the Retina Logo.

  • To set up/upload your Retina Logo for mobile, go to Theme Panel > Header and expand the same Logo for Mobile section. Retina logo Mobile is the section where you add a logo version for retina ready devices.

For the best results, use this size for your mobile logos:

  • Logo Mobile: 160 x 40px
  • Retina Logo Mobile: 320 x 80px

Note: If you don’t upload any Logo Mobile, the default one will be used (the one you set on the Logo & Favicon section). We recommend this option only when the default logo doesn’t scale perfectly on mobile devices.

Favicon Upload

The Favicon is an icon associated with an URL that is variously displayed, such as in a browser’s address bar or next to the site name in a bookmark list.

To add a favicon for your website go to Theme Panel > Header and open the Logo & Favicon section, select the favicon file you would like to use and click Upload.

  • Your Favicon must be a .png file.
  • Recommended size for Favicon image is 16 x 16px.
  • After finishing the upload click the Save Setting button.

iOS Bookmarklet

The bookmarklets work on iOS and Android. When a user adds your site to the home screen, the phone will download one of the icons from here (based on the screen size and device type), and your site will appear with that icon on the home screen.

In Theme Panel > Header > iOS Bookmarklet section you can upload the icon you would like to be displayed.

  • The icon must be a .png file.
  • The panel recommneded and available sizes for bookmarklet images are as follows:
    • 76 x 76px
    • 114 x 114px
    • 120 x 120px
    • 144 x 144px
    • 152 x 152px
  • After finishing, click the Save Setting button.