HTML Academy · Lesson

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 — lesson 3 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.

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.

Frequently asked questions

Is the “Theme Color and App Icons” lesson free?

Yes — the full text of “Theme Color and App Icons” 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 “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; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

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

← Back to HTML Academy