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:

Favicon example
What is the favicon for The Church's main website?
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 development recommends multiples of 48 pixels square.

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, but the preferred approach is to use the .ico format, which is what you will use this course. The .ico format is designed to be small, efficient, and used for icons, rather than formats like .png which is a general purpose image format used for full-sized images. Interestingly, the .png format is actually the most commonly used format for favicons on the web today.

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 web site.

  1. Navigate your browser 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 tab or URL address bar.
  4. When you are ready, click Download Favicon to download the favicon.ico file in the root of your wdd231 local repository folder.
  5. Reference the favicon in your assignment portal home page in the <head>. 
    <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