WDD 231: Web Frontend Development I

W02 Learning Activity: Favicon

Overview

Have you noticed that when you visit most websites they each have their own small image, or icon, next to the title in the browser tab? This is called a favicon and is a way that you can enhance the branding of your site and make it look and feel professional.

In this activity you will learn more about favicons and how to create and add one to your pages.

Prepare

Favicon stands for favorites icon. The purpose of the favicon is to provide enhancement to the branding of the site when listed in the browser's "favorites" or "bookmarks" lists.

For example, this learning activity page has the BYU-Idaho logo as a favicon, as you can see in the tab title:

Browser tab showing the BYU-Idaho favicon next to the page title

What is the favicon for the Church's main website?

Check Your Understanding
Screenshot of the favorite icon of The Church of Jesus Christ of Latter-day Saints

Where does a favicon appear?

The favicon image will appear in:

How do you define the favicon for a page?

The favicon is defined in the <head> section of the page by using a link element that has the rel="icon" attribute like this:

<link rel="icon" href="favicon.ico">

Because the favicon is defined in the <head> section of a page, in order for it to be present on each page of your site, it must be defined on every single page.

What size and image format should you use for a favicon?

The favicon is a small image file that is square (the same width and height). It can be as small as 16 by 16 pixels; however, Google recommends a size that is a multiple of 48 pixels (48 × 48, 96 × 96, and so on). The 16 by 16 icon you will make in this activity is the simple case.

It is possible to define several favicons of different sizes so that when the icon is used for something small, such as a browser tab, a small version will be used, but if the icon is rendered on a homepage, a larger version can be used.

This course will keep things simple and only use a single, small image for the favicon.

Most web image file formats are supported for favicons. The .ico format is the long-standing format that every browser supports, and it is what you will use in this course. PNG and SVG are common modern choices.

How do you create a favicon in the .ico format?

You can use any image editing program you like to create an .ico file. A free, online tool designed specifically for generating these .ico favicons is: https://favicon.cc. This is the tool that you will use in this course.

Activity Instructions

For this activity you will create a 16x16 favicon and add it to your course website.

  1. Go to the free, online ICO generator application at https://favicon.cc.
  2. Select either Create New Favicon or Import Image to create your own favicon.
  3. Use the preview window to view your icon as it would appear in a browser tab.
  4. When you are ready, click Download Favicon to download the favicon.ico file, and save it in the root of your wdd231 local repository folder.
  5. Reference the favicon in the <head> of your course home page. 
    <link rel="icon" href="favicon.ico">
  6. Test your page and verify that the favicon appears when your page is loaded in the browser.

Optional Resources