The Anatomy of a High-Impact Profile Banner
Your header banner establishes your personal brand aesthetic within 3 seconds. An effective banner balances four components: clear typography stating your specialty, a harmonious palette matching your badges, subtle technical motifs, and mobile safe margins.
Banner Dimension & Format Specifications
| Attribute | Recommended Specification | Reasoning |
|---|---|---|
| Canvas Width | 1200px (or 1600px for Retina) | Fills GitHub markdown container cleanly |
| Canvas Height | 300px - 400px | Balances vertical rhythm without pushing bio below the fold |
| File Format | SVG or WebP | SVG provides crisp vectors; WebP offers 70% smaller file size than PNG |
| File Size Target | < 250 KB | Ensures instant rendering through GitHub Camo edge cache |
Frequently Asked Questions
❓ Should I make my banner dark mode or light mode themed?
Use GitHub's theme-aware <picture> element to serve distinct banners for dark and light modes automatically based on the user's preference.