Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the simplest ways to customize a Drupal site through its theme layer is to change the logos. In this video, I will be showing how to change both the logo and the favicon that usually appears at the top of a web browser. So to change the logo and favicon in Drupal, we need to visit the Global settings screen, under the Theme Administration page. To do that, we will start from the Administer screen and click on Themes. Now that we are at the Themes administration screen, we will click on the tab Configure to reach the Global settings page.
In here is where we can actually add the logo and favicon. If you are unfamiliar with what a favicon is, they are also known as shortcut icons and they appear at the very top, usually, of your browser, next to the address of the site you are viewing. We see there is a small Drupal logo used on the site, but an even smaller version of the logo used as the favicon. We are going to replace both of these graphics. So let's go down to the bottom of the Global settings page, and we see these two areas that allow us to upload a graphic file for the logo and down here, a little form that allows us to upload a favicon.
For this demonstration, I am going to be using the same graphic file for both the logo and the shortcut icon. So to change a logo, let's click Browse, and we are going to pull in the hp_logo graphic file you see here, which is actually a logo for the Hansel and Petal Flower website theme that we are going to be building throughout the rest of this course. So this is where this file comes from. So we are going to click OK and then for the shortcut icon, we are going to click Browse as well, and choose the same graphic, click OK.
Now, when we click Save Configuration, you are going to notice that the logo and the favicon have both been changed. So if you look in the top-left corner, we see that the logo is now the custom logo graphic we uploaded, and if you look real closely, the favicon has changed as well. A favicon should be designed at either 16X16 pixels, or 32X32. As you can tell, this graphic is nowhere formatted to be that size, so it doesn't look good as a favicon.
I am sure when you do your own custom logos, you can create a good one for the browser's favicon tab. So after uploading these, where does Drupal save these files? Well, let me show you. So I am going to open my Drupal folder. I am going to go into the sites folder, and then my lynda-drupal-themes folder, which is this Drupal site we are building, and in there, there is a files folder where all the files have been uploaded for our content. In here, we can see that there are two new files, logo and favicon.
These files are actually the ones we just uploaded. Drupal had renamed them to be logo.png and favicon.png. This is where Drupal is now calling these graphic files for our theme. So I am going to minimize my Drupal folder and before I go, I want to actually revert back the logo and favicon to the standard Drupal logo. So let's scroll back down in the Global settings page, and we are going to check this box that says Use the default logo and we will check the box, also, that says Use the default shortcut icon.
We will leave the values in for our custom logo and custom favicon. Those will be just fine and as long as this check box each are enabled, it will override what this path is. So let's click Save configuration and you see now both the logo and favicon have reverted back. For people who like the default theme in Drupal, changing the logo is the easiest way to customize the look of a Drupal site without adding or editing any code.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 92340 Viewers
82 Video lessons · 104105 Viewers
71 Video lessons · 75490 Viewers
56 Video lessons · 106874 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.