Loading...

Logo & Favicons

Logo

The logo cannot be uploaded via the customizer. This function was removed in version 2.0.0.

Why?

Using .jpg or.png files for logos and graphics is outdated. There are scalable .svg vector graphics for that.

WordPress does not allow the upload of .svg files without a plugin. In addition, a logo is part of the theme and not of the content. I don’t change a logo every day, only once when I setting up a new website.

Replace .svg

So, bootScore goes the old school way. Replace the logo with your own in the child-theme folder /img/logo/. In this folder are two logos:

  1. logo.svg (default logo) and
  2. logo-sm.svg (mobile logo)

The logo has a height of 27px to fit perfectly into the navbar. You can also use any other size and adjust CSS.

Edit / Create a logo

To create or edit a logo you need graphic skills. If you do this in a pixelbased app like Photoshop or Gimp, you are doing something wrong. Photoshop is for photos and not for graphics. You need a vector graphic program like the beautiful and free Inkscape or commercial programs like Adobe Illustrator or Corel Draw.

Using .jpg, .png or any other image file

Of course, you can also use any other image format. As an example, copy your logo.jpg into the folder /img/logo/ in child-theme. Then open the child-themes header.php and search for logo.svg. Just change that to logo.jpg and your new logo is there.

Favicon & Touch Icons

Of course, you can use the WordPress Customizer for that, but you should not.

Why?

The Customizer uses one image that uploaded to the media library for all devices. The icon is the same as a desktop favicon or a mobile touch icon. But you need different for iOS, Android or Windows.

An app or share icon can be more detailed, have a bit of white space or a gradient background than a usual 16x16px favicon.

Generate and replace favicons and touch icons

These icons are in child-theme folder /img/favicon/ and linked in the header php. Use the realfavicongenerator.net to generate and edit your icons as you like. Download the package, unzip and replace icons in the folder. Clear browser cache.

Adjust theme colors for Safari pinned tab, Android touch icon and Windows phones in header.php in lines 25, 26 and 27.

6 Comments on “Logo & Favicons”

    • Basti

      says:

      There are several ways to do this. Fontawesome is already installed and ready to use.
      You will find all available icons here.

      1. Create a Custom Link in menu and paste icon in the Link Text
      2. Use Top Nav Widget area to show icons next to the menu.
      3. Hard code it in header.php

      • cemali

        says:

        icons and extra menu that appear in the menu above the menu I want

      • Basti

        says:

        You must code it by yourself in header.php. You can share a site link, I will guide you step-by-step.

        • cemali

          says:

          I am using wampserver. I will if you can share a sample file

      • Basti

        says:

        Please transfer it to a live server, than i can check it.

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information