Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding a logo and shortcut icon (favicon)

From: Drupal 6: Creating and Editing Custom Themes

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.

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.

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.

Show transcript

This video is part of

Image for Drupal 6: Creating and Editing Custom Themes
Drupal 6: Creating and Editing Custom Themes

59 video lessons · 13700 viewers

Chris Charlton
Author

 
Expand all | Collapse all
  1. 8m 19s
    1. Welcome
      1m 3s
    2. Using the exercise files
      7m 16s
  2. 5m 17s
    1. Learning about Drupal themes
      2m 0s
    2. Building sites today with Drupal
      1m 7s
    3. Required knowledge and software
      2m 10s
  3. 22m 38s
    1. Installing Drupal 6 using Acquia
      4m 4s
    2. Configuring the appropriate modules for a Drupal site
      1m 59s
    3. Creating pages with standard node content types
      4m 48s
    4. Creating custom node content types
      6m 19s
    5. Adding RSS secondary content
      3m 11s
    6. Finalizing site navigation
      2m 17s
  4. 22m 0s
    1. Installing the Theme Developer module (aka Devel)
      6m 27s
    2. Ensuring cross-browser compatibility with conditional style sheets
      5m 16s
    3. Using Firefox extensions for site development
      6m 57s
    4. Working with Dreamweaver
      3m 20s
  5. 35m 13s
    1. Choosing a default theme
      2m 5s
    2. Touring the core themes
      5m 25s
    3. Configuring global theme features and post settings
      4m 46s
    4. Adding a logo and shortcut icon (favicon)
      4m 7s
    5. Setting the administration theme
      4m 0s
    6. Installing a new theme
      3m 47s
    7. Positioning blocks in theme regions
      5m 56s
    8. Setting user theme permissions
      5m 7s
  6. 40m 36s
    1. Using the Color module to change color schemes
      5m 0s
    2. Preparing to build a sub-theme
      7m 13s
    3. Building a sub-theme: Creating the .info file
      8m 51s
    4. Building a sub-theme: Adding custom styles (CSS)
      7m 25s
    5. Building a sub-theme: Adding custom theme regions
      12m 7s
  7. 35m 0s
    1. Exploring a theme folder
      3m 19s
    2. Setting up a theme .info file
      4m 7s
    3. Adding styles (CSS) to a theme
      7m 9s
    4. Including a style sheet for right to left readers
      1m 43s
    5. Creating a print style sheet
      3m 30s
    6. Adding JavaScript to a theme
      5m 49s
    7. Adding graphics and images to a theme
      3m 7s
    8. Understanding theme templates (tpl.php)
      3m 19s
    9. Understanding template variables
      2m 57s
  8. 30m 33s
    1. Understanding page templates
      8m 2s
    2. Creating a template to theme every page (page.tpl.php)
      6m 54s
    3. Creating a template to theme just the front page (page-front.tpl.php)
      4m 33s
    4. Creating a template to theme individual pages (page-node-nid.tpl.php)
      3m 43s
    5. Creating a template for "site offline" maintenance pages
      7m 21s
  9. 13m 20s
    1. Understanding node templates
      4m 24s
    2. Creating a template to theme every node (node.tpl.php)
      2m 16s
    3. Creating a template to theme custom node types (node-type.tpl.php)
      5m 10s
    4. Discovering node templates using the theme developer module
      1m 30s
  10. 21m 32s
    1. Understanding block templates
      3m 32s
    2. Creating a template to theme every block (block.tpl.php)
      2m 37s
    3. Creating a template to theme an individual block (block-module-delta.tpl.php)
      8m 26s
    4. Creating a template to theme all blocks from a single module (block-module.tpl.php)
      3m 41s
    5. Creating a template to theme all blocks in a certain region (block-region.tpl.php)
      3m 16s
  11. 7m 33s
    1. Exploring the comments template (comment.tpl.php)
      5m 20s
    2. Exploring other core modules and their templates (other tpl.php files)
      2m 13s
  12. 10m 5s
    1. Removing unnecessary modules
      1m 43s
    2. Optimizing site performance
      2m 17s
    3. Streamlining site files for launch
      1m 26s
    4. Troubleshooting when a white screen appears instead of Drupal
      3m 15s
    5. Touring Drupal community groups
      1m 24s
  13. 11s
    1. Goodbye
      11s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

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.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Drupal 6: Creating and Editing Custom Themes.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

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

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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:

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:

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

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.