WDD 230: Web Frontend Development I

Favicon

Overview

Favicon stands for favorite icon but more relevant than its name is the purpose of the favicon to provide enhancement to your branding of your site/application as the site is bookmarked and referenced. The favicon image will appear with the domain in the address bar, tabs, bookmarks, search results, and other areas depending upon the browser.

You may have encountered a reference to a 404 NOT FOUND favicon error in the browser's DevTools console when other not found errors are present on your https enabled GitHub Pages site.
Screen shot of favicon error from devTools

Prepare

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

Activity Instructions

  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 wdd230 local repository folder.
  5. Reference the favicon in your assignment portal home page in the <head>.
    <link rel="icon" href="favicon.ico">

Submission

  1. Commit and push your updates to your GitHub Pages repository.

Additional Resources