How to Use Animated GIF as Logo in WordPress

You want to use animated GIF as a logo on your WordPress site. The good news is that WordPress allows for upload and use of GIFs. The same applies to many of the WP themes out there. The bad news is that you can still bump into issues when creating or downloading GIFs or when trying to make them work with your current theme. The reason is basically that GIFs are difficult to handle without destroying their animation.

This post will guide you through GIF creation or download, upload, and setting up as logo in WordPress, step by step, and will help you avoid all the common pitfalls.

Creating a GIF (Photoshop Example)

To create an animated GIF, you have to use an image or video editing program. In this case, I’ll exemplify the creation of GIFs in Photoshop. You are going to need a sequence of images that can combined tell a story. The more images you use and the better quality they are (meaning that they are taken specifically for the purpose and in very short intervals of time, allowing to capture the natural movement of the objects in focus), the better GIF you’ll get.

Here is how you create your GIF logo:

1. In Photoshop, click on Window->Timeline from the top menu.
2. A tab appears in the bottom of the screen, with a button in the middle.
3. Click on the button and choose Create frame animation.
4. Import the images you want to use and add each of them to a new layer.
5. Remember to resize the images to fit your actual WordPress logo size. Resizing of GIFs in WordPress can destroy the animation. In the same time, larger GIFs will be noticeably heavier, slowing down your site.
6. From the burger menu to the right on the Timeline tab (marked in the screenshot below), choose Make frames from layers.
7. Now you can see multiple frames appear in the timeline. Under each of them, there is a timer (marked in the screenshot below). Use it to set the time, each individual frame should be visible for.
8. Use the marked tab Forever to set the GIF’s loop. It can be limited to certain number of loops or set to go on forever.
9. To save the GIF, click on File->Export->Save for web from the top menu.
10. Choose the preferred quality of the GIF and click on Save. Remember that quality is paid for with larger file size.

That’s it. You have created your very own GIF logo!

Finding and Downloading GIFs for Logo Online

If you aren’t the creative type, you can always find GIFs online. There are many websites, serving as repositories for GIFs, as for example GIPHY. The only thing you should be very careful about, when browsing for your new GIF logo, is copyright. You can, in practice, use any GIF you find as a logo on your site. However, in most cases you are not allowed to do so due to copyrights.

In order to be sure that you are free to use the animated GIF as logo, you should either purchase the right to use it, pay a designer to create it for you, or browse the CC resources, available online. You can, of course, also try to browse GIFs on Google. Google offers advanced image search filters, including licensing. Just keep in mind that not all images, Google finds, are marked with their license, making it more uncertain for you, whether or not you are free to use, what you find there.

Once you have found the GIF you want to use, it can turn out to be nearly impossible to download it, without ruining it. Therefore, there are a large number of guides out there concerning the download of GIFs. You can, however, skip them. In the next section of this post, you’ll learn how to easily get hold of GIFs, without ever really downloading them.

How to Upload Animated GIF to WordPress

If you have created the file yourself and have it saved on your computer, the upload is done as usual: you click on Media->Add new in WordPress and browse your computer to find the file. Then, just click on Upload. That’s it.

If you have found a GIF online, you can still easily upload it to WordPress, without ever downloading it locally. Here’s how to do it:

1. Start by locating the GIF you want to use as a logo. You need to find its URL. Keep in mind that sometimes, the URL of the page you are viewing a GIF on isn’t equal to the URL of the GIF itself! Try to open the GIF in its own tab or inspect it with the Inspect option in most browsers to get hold of the right URL. If you use GIPHY, you can find the link by clicking on Copy link.
2. Next, choose the type of file to link to. Choose to copy the link to the GIF-version of the file. Alternatively, you can just open the GIF in the browser and copy the link directly from there.
3. In WordPress, click on Media->Add New
4. Click on Browse to open the browsing window.
5. As you don’t have the file locally, you can’t find it browsing your computer. Therefore, paste the link into the File name field as shown on the screenshot below.
6. Click on Open (Åbn in the Screenshot)
7. The GIF should now get uploaded to WordPress.
8. To check whether everything is alright, find the GIF in the Media library and click on it to open its page. There, you should see it animating.

Set Animated GIF as Logo in WordPress

Once the GIF is uploaded, you should just navigate to the logo settings section of your site and choose the GIF from the Media library. In most cases, you won’t experience any issues. You will though likely need to use CSS to resize the logo. No worries, this doesn’t destroy the animation, as it doesn’t affect the actual file, just the way it appears on the site.

To resize the GIF logo, you have to inspect the page, find the logo’s ID or class, and set the new width and height, as described in this post on working with CSS IDs and classes in WordPress.

Troubleshooting the Use of Animated GIF as Logo in WordPress

The most common issue, when using animated GIF as logo, is that the GIF uploads and appears on your pages but stops animating. The most common reasons are:

1. Your theme doesn’t support animated GIF as logo. This would only rarely be the case, as most themes use WordPress’ upload mechanisms and support the whole range of files, allowed in WordPress. However, some themes can restrict the use of GIFs for logo or provide no support for it. There is no other solution to this issue but changing themes, as long as having animated GIF as logo is very important to you.
2. Your theme resizes the GIF, which destroys the animation. You theme is likely to use strictly specified logo size. This means that, whatever file you upload, the GIF would be resized to fit the set logo size. In the process, the animation will likely get destroyed.
   This issue is unfortunately not that easy to solve. What you should do here is:

• Look through your theme files. Find the one called header.php, header-main.php, branding.php or similar. What makes this task difficult, is that every theme author is free to structure and name the theme files as they see fit. Therefore, you might find out that your theme has a single header.php file or a few header-something.php files and a whole Header folder, containing multiple files. If you can’t figure out, which file contains the logo-function, you should contact your theme’s author. You’ll probably need help from them anyways, so don’t hesitate to contact them, if that’s a possibility.
• In header.php (or the respective file containing the logo settings), locate the logo function. It should be something like (not exactly the same though!):
  $logo .= presscore_get_the_logo()orget_theme_mod('custom_logo'), 'medium')

  or

  if(has_custom_logo())

  or

  the_custom_logo()

• Create a child theme and copy the header.php file into it. Be careful to preserve the folder and file structure of the parent theme! Change the logo size in the function to full. As long as there isn’t a logo size predefined in the function, you can still try to set the size to full but it isn’t certain that the function will accept it. Consult therefore the theme author concerning a solution. They should be able to help you out.

Unfortunately, when it comes to troubleshooting GIF logos, you are quite dependent on your theme’s author, as it’s only them, who know, how the whole logo style is put together, without having to examine the whole theme closely. Therefore, if it turns out that you can’t get help from them and having animated GIF as logo is truly important for you, the only solution is to change themes. There aren’t unfortunately any plugins or external fixes that will help you solve the resizing issue.