# KERNL Icon Package **Generated:** January 7, 2026 **Source:** kernl-icon-light.png, kernl-logo-dark.png **Total Icons:** 17 files --- ## 📁 Icon Directory Structure ``` icons/ ├── favicon.ico # Multi-size favicon (16,32,48,64) ├── favicon-16x16.png # Browser tabs (small) ├── favicon-32x32.png # Browser tabs (standard) ├── favicon-48x48.png # Browser tabs (large) │ ├── social-twitter-400x400.png # Twitter/X profile (light) ├── social-twitter-400x400-dark.png # Twitter/X profile (dark) ├── social-linkedin-300x300.png # LinkedIn (light) ├── social-linkedin-300x300-dark.png # LinkedIn (dark) ├── social-github-512x512.png # GitHub org avatar ├── social-discord-512x512.png # Discord server icon │ ├── npm-icon-512x512.png # NPM package icon │ ├── apple-touch-icon-180x180.png # iOS/macOS web app ├── android-chrome-192x192.png # Android PWA ├── android-chrome-512x512.png # Android PWA (high-res) │ ├── icon-64x64.png # General purpose small ├── icon-128x128.png # General purpose medium └── icon-256x256.png # General purpose large ``` --- ## 🌐 Web Usage ### HTML Head Tags Add these to your website's `` section: ```html ``` ### Web App Manifest (site.webmanifest) Create `site.webmanifest` in your web root: ```json { "name": "KERNL", "short_name": "KERNL", "description": "The Core Intelligence Layer for AI Systems", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#00D4FF", "background_color": "#FFFFFF", "display": "standalone" } ``` --- ## 📦 NPM Package Usage ### package.json Add the icon field: ```json { "name": "@kernl/mcp", "version": "2.0.0", "icon": "assets/branding/icons/npm-icon-512x512.png", ... } ``` NPM will display this icon on the package page. --- ## 🐦 Social Media Usage ### Twitter/X - **Profile Picture:** `social-twitter-400x400.png` (light theme) - **Alternative:** `social-twitter-400x400-dark.png` (dark theme) - **Size:** 400×400px (meets Twitter requirements) ### LinkedIn - **Company Logo:** `social-linkedin-300x300.png` (light theme) - **Alternative:** `social-linkedin-300x300-dark.png` (dark theme) - **Size:** 300×300px (LinkedIn recommended) ### GitHub - **Organization Avatar:** `social-github-512x512.png` - **Repository Icon:** Same file - **Size:** 512×512px (high quality) ### Discord - **Server Icon:** `social-discord-512x512.png` - **Size:** 512×512px (Discord requirement) --- ## 📱 Mobile App Icons ### iOS (Apple) - **Icon:** `apple-touch-icon-180x180.png` - **Size:** 180×180px - **Usage:** Saved to home screen ### Android - **Small:** `android-chrome-192x192.png` (192×192px) - **Large:** `android-chrome-512x512.png` (512×512px) - **Usage:** PWA, home screen --- ## 📄 Documentation Usage ### GitHub README.md Display the logo in your README: ```markdown
KERNL Logo

KERNL

The Core Intelligence Layer for AI Systems

``` ### Docs Website Use appropriately sized icons: - **Header logo:** `icon-64x64.png` or `icon-128x128.png` - **Footer logo:** `icon-64x64.png` - **Large hero:** `icon-256x256.png` --- ## 🔧 Technical Details ### File Format - **Format:** PNG with transparency (RGBA) - **Compression:** Optimized - **Resampling:** Lanczos (high quality) ### Favicon.ico - **Format:** Multi-size ICO container - **Embedded Sizes:** 16×16, 32×32, 48×48, 64×64 - **Usage:** Browsers will select appropriate size automatically ### Color Profiles All icons use the KERNL brand colors: - **Border Gradient:** Cyan (#00D4FF) to Purple (#9D4EDD) - **Letter "K":** Dark slate (#2D3748) - **Accent Dot:** Red (#E63946) --- ## 🎨 Theme Variations ### Light Theme (Default) Use for: - ✅ Light backgrounds - ✅ Documentation sites - ✅ Most social media profiles ### Dark Theme Use for: - ✅ Dark mode UIs - ✅ Dark-themed presentations - ✅ Some social media profiles (Twitter/X, LinkedIn) --- ## 📐 Size Guide | Size | Use Case | Files | |------|----------|-------| | 16×16 | Favicon (small) | favicon-16x16.png, favicon.ico | | 32×32 | Favicon (standard) | favicon-32x32.png, favicon.ico | | 48×48 | Favicon (large) | favicon-48x48.png, favicon.ico | | 64×64 | Small UI elements | icon-64x64.png | | 128×128 | Medium UI, docs | icon-128x128.png | | 180×180 | Apple touch icon | apple-touch-icon-180x180.png | | 192×192 | Android PWA | android-chrome-192x192.png | | 256×256 | Large UI, hero | icon-256x256.png | | 300×300 | LinkedIn | social-linkedin-300x300.png | | 400×400 | Twitter/X | social-twitter-400x400.png | | 512×512 | GitHub, Discord, NPM, Android | Various *-512x512.png | --- ## 🔄 Regenerating Icons To regenerate all icons from source: ```bash cd assets/branding python generate-icons.py ``` **Prerequisites:** - Python 3.x - Pillow (PIL): `pip install Pillow` **Source Files:** - `kernl-icon-light.png` - Light theme source - `kernl-logo-dark.png` - Dark theme source --- ## 📞 Support Questions about icon usage? Check: - **Main Branding Guide:** `../BRANDING_GUIDE.md` - **Logo Files:** `../kernl-logo-*.png` - **Generator Script:** `../generate-icons.py` --- **Version:** 1.0.0 **Last Updated:** January 7, 2026 **Total Files:** 17 icons in 14 sizes