In Uncode, you can use both the advanced SVG logos and the standard PNG logos. As shown in our demo, the logo and the menu area will change color based on the header content to maintain optimum contrast.

▶  

If you use an SVG logo, this color change is automatic, if you use a PNG logo, you need to import two sources for your logo, one for Light skin, and one for Dark skin so Uncode can use them in accordance with the layout. In the Logo screen you are given the following options:

• Switchable logo: upload a single SVG or two different PNG logos for color changes.
• Logo: insert the source media of your logo.
• Different logo mobile: upload a different logo for mobile devices.
• Logo height: specify the logo height.
• Logo height mobile: specify the height of the logo in mobile view.

Single Logo (SVG code)

This method is used if you have a monochrome logo and you need the logo to change SKIN depending on the actual slide to ensure optimal contrast. If you use a retina ready SVG logo, simply import the SVG code in the Media option:

1. Navigate to Theme Options → Logo and click on the + sign (Add media).
2. Click on the ‘oEmbed’ tab.
3. Add the SVG code in the description field as shown in this screenshot  (insert the code inside the SVG tags).
4. Click on ‘Insert to Options’.

About SVG: Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics that supports interactivity and animation. Working with Adobe Illustrator makes using SVG on the web an easy task. This option gives you a modern, retina-ready logo solution. This tutorial will familiarize you with the SVG file format.

Switchable logo (PNG, SVG file)

Thsi method is used if you have a colored logo. Activate the Switchable logo toggle option to insert a PNG logo for both the Light and the Dark skin:

1. Navigate to Theme Options → Logo and click on the Switchable logo option.
2. Logo – Light: upload the image source for the skin to be used for a light background.
3. Clicking ‘Insert to Options’.
4. Logo – Dark: upload the image source for the skin to be used for a dark background.
5. Click ‘Insert to Options’.

About Retina: Once you create a PNG logo, please note the new retina detects your image at a double-pixel density. You need to upload your logo at least twice the displayed size. Uncode does the rest automatically. For example, if your logo needs to be displayed at 150px width, upload your logo at least a 300px width.

Where is the Favicon?

In the event you expected an option to add a favicon to be included in this section, for optimal WordPress usage, we elected to use the native WordPress function as presented in the official WordPress documentation.