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.
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.
