App Manifests, Touch Icons & Favicons
What is App Branding Metadata?
Imagine saving a shortcut of your favorite website on your phone's home screen. You expect it to look like a native application, complete with a custom app icon and a splash screen.In HTML, we configure this branding inside <head>:
<link rel="icon" href="...">: Defines the favicon (the tiny icon displayed on browser tabs).<link rel="apple-touch-icon" href="...">: Sets the high-resolution app icon used when adding the site to an iPhone home screen.<link rel="manifest" href="...">: Links to a manifest.json configuration file containing app settings for Progressive Web Apps (PWAs).Why does it matter?
Adding app branding metadata makes your website feel premium, cohesive, and professional. It lets you transition a standard website into a Progressive Web App that can be installed on user devices.How to write it
<head>
<link rel="icon" href="favicon.png">
<link rel="apple-touch-icon" href="icon-192.png">
</head>
favicon.ico
manifest.json
Common Mistakes
.ico or .gif files might prevent them from loading on iOS.Quick Reference
<link rel="icon" href="path.png"> — Defines browser tab favicon.<link rel="apple-touch-icon" href="path.png"> — Defines iOS shortcut home icon.Your Task
In the `<head>`, link a favicon using a `<link>` element with `rel="icon"` and `href="favicon.png"`.
index.html
Type code above to start the lesson.
Live Preview