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.
Prepare
- The Favicon ("Fav-icon") is a small image file that can be 16px X 16px, however Google development recommends multiples of 48px square.
- Most web image file formats are supported, however, the preferred .ico format is what we will use in the course. Statistically, .png is the most commonly used format for favicons.
- Read the favicon section in 📃 What's in the <head>? - MDN.
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">