Theme Color and App Icons
Customize the browser chrome color and home screen icon.
Theme Color and App Icons is a free HTML Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
theme-color Meta Tag
The <meta name="theme-color" content="#1f2937"> tag sets the browser address bar color on mobile and the title-bar color on desktop PWAs. It gives the page a polished, app-like look without changing any content.
<meta name="theme-color" content="#1f2937">Dark Mode Theme Colors
Provide separate colors for light and dark modes: <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> and a second tag with the dark color. Browsers pick the matching one based on the user's OS preference.
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">manifest theme_color
The manifest's theme_color sets the color when the app runs as an installed PWA (standalone window title bar). Match it to the in-page theme-color meta for consistency — when running in browser vs installed, the visual identity stays the same.
Standard Favicon
<link rel="icon" href="/favicon.ico"> is the timeless browser-tab icon. Despite the name, modern browsers prefer PNG or SVG over ICO. Provide a 32x32 PNG via <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> for clearer rendering.
SVG Favicon
Modern browsers accept SVG favicons: <link rel="icon" type="image/svg+xml" href="/icon.svg">. Crisp at any size, tiny file. Use for vector logos; pair with a PNG fallback for browsers that do not support SVG favicons.
Apple Touch Icon
iOS home screen uses the apple-touch-icon: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Provide a 180x180 PNG. iOS does not read the web manifest icons for home-screen install; the apple-touch-icon link is required.
Manifest Icons (Android)
Android installs read icons from the manifest's icons array. Include 192x192 (home screen) and 512x512 (splash, app drawer) PNGs. Add a "maskable" purpose copy so Android can mask the icon to match the home-screen icon shape (circle, squircle, square).
Maskable Safe Zone
Maskable icons should fit their key content within an 80% center safe-zone — the outer 20% may be cropped depending on the device's mask shape. Use tools like maskable.app to preview the icon under different mask shapes during design.
Windows Tile Icons
For Windows 8/10 pinned tile: <meta name="msapplication-TileImage" content="/tile.png"> and <meta name="msapplication-TileColor" content="#1f2937">. Lower priority than other platforms now but still appreciated by Windows users who pin sites.
Browser Configuration File
Old IE/Edge: <meta name="msapplication-config" content="/browserconfig.xml"> points to an XML file with multi-size tile icons. Largely irrelevant today; new sites can skip browserconfig.xml without consequence.
Mask Icon for Safari
Safari macOS pinned tab: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. The SVG should be a single-color icon (color is overridden by the color attribute). Used only in macOS Safari's pinned tab feature.
Testing the Icons
Use realfavicongenerator.net to generate every icon variant from a single source. Test on real iOS device (add to Home Screen) and Android (install app from browser menu) to verify icons appear correctly cropped and not pixelated.
Knowledge Check
What is the purpose of the "maskable" icon purpose in a web app manifest?
Summary
theme-color (with media-query variants) tints the address bar; manifest theme_color tints the installed app title bar. Icons span favicons (SVG + PNG), apple-touch-icon (iOS, 180x180), manifest icons (Android, 192 + 512 + maskable), Safari mask-icon (single-color SVG), and msapplication-TileImage (Windows pinned tiles). Use realfavicongenerator.net to generate all variants from one source.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “Theme Color and App Icons” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “Theme Color and App Icons”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
What will I learn in “Theme Color and App Icons”?
Customize the browser chrome color and home screen icon. 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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
How long does the “Theme Color and App Icons” 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
- The Web App Manifest
- Service Worker Registration from HTML
- Theme Color and App Icons
- Offline Fallback Page