WDD 231 | Favicon

W02 Learning Activity: Favicon

Overview

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.

Prepare

The favicon of this page can be found in the tab title. It is the BYU-Idaho logo.
The favicon image will appear in
- tabs
- bookmarks or favorites lists
- search results
- URL address bar
- browser's history page
The favicon is a small image file that can be 16 by 16 pixels square, however Google development recommends multiples of 48px square.
Most web image file formats are supported, however, the preferred .ico format is what you will use in the course.
Statistically, .png is the most commonly used format for favicons.

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

Activity Instructions

Navigate your browser to the free, online ICO generator application at https://favicon.cc
Select either Create New Favicon or, Import Image to create your own favicon.
Use the preview window to view your icon as it would appear in a tab or URL address bar.
When you are ready, click Download Favicon to download the favicon.ico file in the root of your wdd231 local repository folder.
Reference the favicon in your assignment portal home page in the <head>.
```
<link rel="icon" href="favicon.ico">
```
Test the the favicon appears when your page is loaded in the browser.

Optional Resources

Favicon – wikipedia - learn about the history and possible security issues
What's in the <head>? – MDN – Adding custom icons to your site