Many websites use a favicon (icon) to further identify their brand and website. Favicons are displayed in the address bar, tab, bookmark, or title bar. You can create favicons using three file types, including .png, .gif, and .ico. See the code below.
In order to add a favicon, use the <link> tag.
Sitewide Guide
For the same favicon on your entire site, use two link tags as follows:
<link rel="icon" href="href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="href="favicon.ico" type="image/x-icon">
For this assignment's demo create a .png image to use as a favicon. The favicon .png must be 16x16, 32x32, 48x48, or 64x64. Use 16x16 for this assignment. Then convert the .png to the .ico format. Yes, you can use .png and .gif, but for this assignment, use .ico. There are advantages.
Create custom favicon website:
Conversion Websites:
online-convert.com
convertio.co
For credit, you must apply the following generator method to your portfolio in addition to completing the assignment with the above code:
http://realfavicongenerator.net/
Make sure to remove the root reference in the favicon paths.
For example this:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
Becomes:
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
Folder Referencing - Specific Favicon Guide (not required):
For a favicon on a specific page, don't reference the root favicon file. You can add a path as follows:
<link rel="icon" href="Images/favicon.png" type="image/png">
I suggest using a .png file no bigger than 32x32. Make sure to change the type attribute to match the image type. Make sure not to use two links tags.