You are currently viewing How to Use AMP Logo For WordPress Instead of Default Site Icon

How to Use AMP Logo For WordPress Instead of Default Site Icon

  • Post author:
  • Post category:AMP
  • Post comments:0 Comments

A properly designed site logo is an integral part of your AMP pages. The AMP site logo is displayed within Google’s search carousel and immediately introduces your brand to the surfers. The suggested AMP logo for WordPress size by Google is 600 x 60 px. If you are a WordPress site owner, the official AMP plugin by Automattic doesn’t provide you with an option to upload a site logo which is 600 x 60 pixels in size. Rather, the AMP pages generated by the plugin pulls the theme’s default site icon. This can be a problem as the site icon uploaded by the theme needs to be cropped to a square which fails to meet the proper AMP logo guidelines.

In order to use a customized logo with the official AMP WordPress plugin which meets the AMP logo guidelines, you will have to manually edit the plugin code to point to the correct image. I will show you how to do it so that your brand is properly displayed by Google Search Carousel.

How to Create an AMP Logo for WordPress Sites

Step 1: Create a logo which is 600 x 60 px in size. Ensure to follow the AMP Logo guidelines.

Step 2: Upload the logo image to your WordPress site using the Media > Add New option from the admin dashboard.

Step 3: Copy the URL of the logo image location. This can be done by clicking on the image from the Media Library and then copying the URL of the image.

Step 4: From the admin dashboard, navigate to Plugins > Editor and choose AMP from the dropdown menu and click Select to edit the files of this plugin. Then click on templates and then header-bar.php.

amp logo for wordpress editor

Step 5: Locate the following code under header-bar.php.

<amp-img src="<?php echo esc_url( $site_icon_url ); ?>" width="32" height="32" class="amp-wp-site-icon"></amp-img>

Step 6: Change the code to the following. You need to replace src="<?php echo esc_url( $site_icon_url ); ?>" with the link to your logo image. Also, you will need to change th width and height attributes to 600 and 60 respectively. Your final code will look like the following:

<amp-img src="http://link-to-your-logo-image.jpg" width="600" height="60" class="amp-wp-site-icon"></amp-img>

Step 7: Click on Update File to save your editing.

That’s it, now your AMP pages will be generated with a site logo which meets the AMP logo guidelines.

Also check out our guide on How to Fix Missing or Invalid Structured Data Item on AMP Pages which is caused by not having a site icon.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.