Favicon and Apple Touch Icon
Add icons that appear in browser tabs and on home screens.
Favicon and Apple Touch Icon is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is a Favicon?
A favicon is the small icon that appears in:
- Browser tabs
- Bookmark lists
- Browser history
- Search results (sometimes)
It helps users identify your site at a glance among multiple open tabs.
Basic Favicon Link
Add a favicon with a link element in head:
<head>
<!-- SVG favicon (modern, scales at any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Legacy ICO for Internet Explorer -->
<link rel="shortcut icon" href="/favicon.ico">
</head>Favicon Formats
Recommended favicon format strategy:
- SVG — vector, scales perfectly, small file size (use first)
- PNG 32x32 — fallback for browsers that don't support SVG
- ICO — legacy format containing 16x16 and 32x32 sizes
ICO File Placement
The favicon.ico file at the domain root is fetched automatically:
<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">sizes Attribute
The sizes attribute specifies icon dimensions:
<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">Apple Touch Icon
The Apple Touch Icon appears when users add your site to the iOS home screen:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->maskable Icons for Android
Android PWAs use maskable icons that fill the icon shape:
<link rel="manifest" href="/manifest.json">
<!-- In manifest.json: -->
<!--
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
]
}
-->Dark Mode Favicon
Provide a dark-mode-aware SVG favicon:
<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon-bg { fill: white; }
.icon-mark { fill: black; }
}
.icon-bg { fill: #0070f3; }
.icon-mark { fill: white; }
</style>
<circle class="icon-bg" cx="16" cy="16" r="16"/>
<text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->Web App Manifest for PWA Icons
Full icon setup for Progressive Web Apps:
<link rel="manifest" href="/manifest.json">
<!-- manifest.json icons array: -->
<!--
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->Complete Favicon Setup
A complete modern favicon configuration:
<head>
<!-- SVG: scales to any size, supports dark mode -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<!-- Apple home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (for Android home screen) -->
<link rel="manifest" href="/manifest.json">
</head>Testing Favicons
How to verify favicon setup:
- Hard reload (Ctrl+Shift+R / Cmd+Shift+R) to clear cached favicon
- Use the Favicon Checker tool (realfavicongenerator.net)
- Test on actual iOS device for Apple Touch Icon
- Check PWA manifest with Lighthouse → PWA audit
Quick Check
What is the recommended size for Apple Touch Icon images?
Recap: Favicons
Favicon essentials:
- SVG favicon — modern, scalable, dark-mode-aware
- PNG 32x32 — fallback for browsers without SVG support
- ICO in root — legacy IE fallback
apple-touch-icon180×180 — iOS home screen- Web app manifest — Android PWA icons (192px and 512px)
Frequently asked questions
Is the “Favicon and Apple Touch Icon” lesson free?
Yes — the full text of “Favicon and Apple Touch Icon” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “Favicon and Apple Touch Icon”?
Add icons that appear in browser tabs and on home screens. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Favicon and Apple Touch Icon” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- title and its Role in SEO
- meta charset viewport author and description
- Canonical URLs and robots meta
- Favicon and Apple Touch Icon