Video: Adding a logo and shortcut icon (favicon)

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.

Drupal is widely recognized as a powerful back-end system for web sites, but Drupal 6: Creating and Editing Custom Themes shows how the application can also be used to manage the look and feel of a web site. Web architect Chris Charlton introduces the core themes that ship with Drupal. He shows how to install and administer new themes, change color schemes, and add sub-themes to existing themes. He also demonstrates how to build a custom theme from scratch; integrate HTML, CSS, and JavaScript; and apply themes to specific nodes and blocks. Exercise files are included with this course.

Adding a logo and shortcut icon (favicon)

One of the simplest ways to customize a Drupal site through its theme layer isto change the logos.In this video, I will be showing how to change both the logo and the faviconthat usually appears at the top of a web browser.So to change the logo and favicon in Drupal, we need to visit the Globalsettings 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 tabConfigure 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 shortcuticons and they appear at the very top, usually, of your browser, next to theaddress of the site you are viewing.We see there is a small Drupal logo used on the site, but an even smallerversion 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 twoareas that allow us to upload a graphic file for the logo and down here, alittle form that allows us to upload a favicon.

For this demonstration, I am going to be using the same graphic file for boththe logo and the shortcut icon.So to change a logo, let's click Browse, and we are going to pull in thehp_logo graphic file you see here, which is actually a logo for the Hansel andPetal 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 toclick Browse as well, and choose the same graphic, click OK.

Now, when we click Save Configuration, you are going to notice that the logo andthe favicon have both been changed.So if you look in the top-left corner, we see that the logo is now the customlogo 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 itdoesn't look good as a favicon.

I am sure when you do your own custom logos, you can create a good one for thebrowser'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 folderwhere 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 actuallyrevert 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 checkthis box that says Use the default logo and we will check the box, also, that saysUse 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 willoverride what this path is.So let's click Save configuration and you see now both the logo and faviconhave reverted back.For people who like the default theme in Drupal, changing the logo is theeasiest way to customize the look of a Drupal site without adding or editingany code.

A: The code is incorrect. (The syntax error, by the way, displayed indicates which line of code contains the error.) The line containing the IF statement is missing the colon character ( : ). It should read:
<?php if ($content_top): ?>

Q: I have a button in Flash, but Internet Explorer is blocking it from opening up. At the top of the window, a message appears saying "Pop-up blocked. To see this pop-up or additional options click here..."
What can I do to this button so that it opens a new browser window and keep IE from thinking it's an unauthorized pop-up?

A: To get around the pop-up blocker, try using the "_self" parameter in Flash. So instead of:
navigateToURL(myURL);
use:
navigateToURL(myURL, "_self");

Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.