wk7: Creating and Implementing Favicons -- DESN 368

DESN 368

wk7: Creating and Implementing Favicons

Web Design Fundamentals · Spring 2026

TL;DR

Design a favicon in Figma
Generate cross-browser files with Real Favicon Generator
Create an assets folder in the root of your repo
create/upload my-favicon/ folder in your repo
Paste the provided code into your <head>, and verify it works live
i.e. make sure the link/path is correct.

Overview

A favicon is the small icon that appears in browser tabs, bookmarks, and mobile home screens. This assignment walks you through creating and implementing one.

Part 1: Create Your Favicon

Step 1: Design in Figma

Create a simple, recognizable icon (favicons are tiny—keep it bold)
Google "favicon design inspiration" if you need ideas
Export as PNG (square format, at least 512×512px works well)

Step 2: Generate Favicon Files

Go to Real Favicon Generator
Upload your PNG
Important: When asked for "Favicon path," type: my-favicon
Adjust any appearance settings (iOS, Android, etc.)
Click "Generate your Favicons and HTML code"
Download the favicon package (zip file)

What you get: Multiple file formats (.ico, .png, .svg, .webmanifest) for different browsers and devices.

Part 2: Add to Your GitHub Repo

Step 1: Open Your Code and Design Workspace Repo

Go to your GitHub repo
Launch Codespaces (or open locally)

Step 2: Create a Folder & Upload the Files

In your root directory (same level as index.html), create a folder named my-favicon
Unzip the downloaded package
Upload all files into the my-favicon/ folder

Step 3: Add Code to index.html

Open your index.html and paste this code generated for you by Real Favicon Generator inside the <head> section:

Important

NOTE!!! You will need to remove the forward slashes for the code to work. Go from href="/my-favicon/favicon-96x96.png" to href="my-favicon/favicon-96x96.png"

<!-- Favicon -->
<link rel="icon" type="image/png" href="my-favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="my-favicon/favicon.svg" />
<link rel="shortcut icon" href="my-favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="my-favicon/apple-touch-icon.png" />
<link rel="manifest" href="my-favicon/site.webmanifest" />

Placement example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Site</title>

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="my-favicon/favicon-96x96.png" sizes="96x96" />
  <link rel="icon" type="image/svg+xml" href="my-favicon/favicon.svg" />
  <link rel="shortcut icon" href="my-favicon/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="my-favicon/apple-touch-icon.png" />
  <link rel="manifest" href="my-favicon/site.webmanifest" />

  <link rel="stylesheet" href="styles/main.css">
</head>

Step 4: Commit & Push

Stage your changes (new folder + modified index.html)
Commit message: Add favicon with cross-browser support
Push to GitHub

Verify It Works

In your repo: Confirm my-favicon/ folder exists with all files
In index.html: Confirm the 5 <link> tags are in your <head>
Navigate to your live site and verify the favicon is in the browser tab.

Troubleshooting

If favicon doesn't appear, do a hard refresh (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows). Browsers cache favicons aggressively.

Submission

Submit two things:

Your site URL
Screenshot showing your favicon in the browser tab

Key Considerations

Why so many files? Different browsers and devices prefer different formats. The generator creates optimized versions for Safari (.svg), Chrome (.png), iOS home screen (.apple-touch-icon), etc.

The my-favicon/ path: The leading slash (when used in your repo) means "start from root directory." This ensures links work whether you're on index.html or week-7/some-page.html. However, remove the leading slash for local testing.

Hard refresh if testing locally: Your browser might show an old cached version. The hard refresh forces it to fetch the new icon.