Logo to the People

Display project-specific logos in VSCode Explorer for instant visual workspace identification. Power to the projects!

Overview

Logo to the People automatically detects and displays your project's logo in the VSCode Explorer sidebar. Perfect for developers working on multiple projects who need quick visual identification of their current workspace.

Screenshots

Project logo displayed in the Explorer sidebar — Little Prince project

Custom image logo for the Delphi project

Multiple VS Code windows — each workspace shows its own logo

Key Features

• 🔍 Automatic Logo Detection - Finds project logos using smart priority algorithm
• 💾 Smart Caching - Logos persist across branch switches (no more missing logos on feature branches!)
• 🎨 Auto-Generated Logos - Creates text-based logos when no image is found
• ⚙️ Zero Configuration - Works out-of-the-box for most projects
• 🔄 Live Reload - Automatically updates when logo files or settings change
• 🌐 Multi-Root Support - Works with multi-root workspaces

Installation

From VSCode Marketplace (Recommended)

1. Open VSCode
2. Press Ctrl+P / Cmd+P to open Quick Open
3. Type ext install yoavvollansky.logo-to-the-people
4. Press Enter

Manual Installation

1. Download the latest .vsix file from Releases
2. Open VSCode
3. Press Ctrl+Shift+P / Cmd+Shift+P to open Command Palette
4. Type "Install from VSIX" and select the downloaded file

Usage

Automatic Detection & Logo Priority

The extension works immediately after installation with zero configuration required. It automatically searches for and displays logos in this priority order:

1. Custom Config Path - If you've specified projectLogo.logoPath in settings, uses that file
2. Standard Names - Searches workspace root for logo.png, icon.png, or project.png
3. First PNG - If no standard names found, uses the first .png file (alphabetically sorted)
4. Cached Logo - If no logo exists (e.g., on a feature branch), uses previously cached logo from main branch
5. Auto-Generated - If no logo found and no cache, generates a text-based logo with your project name
6. Default Fallback - As a last resort, shows a built-in default icon

What this means: Drop a logo.png in your project root and it works instantly. Switch to a branch without the logo? The cached version keeps displaying. No logo at all? A nice auto-generated one appears with your project name.

Example Projects

Simple Project Structure:

my-project/
├── logo.png          ← Automatically detected!
├── src/
├── package.json
└── README.md

Custom Logo Location:

my-project/
├── assets/
│   └── branding/
│       └── company-logo.png
├── src/
└── .vscode/
    └── settings.json   ← Configure custom path here

Configuration

Workspace Settings (.vscode/settings.json)

{
  "projectLogo.logoPath": "assets/branding/logo.png",
  "projectLogo.enabled": true,
  "projectLogo.showInSidebar": true,
  "projectLogo.showInStatusBar": true,
  "projectLogo.position": "left",
  "projectLogo.size": 16,
  "projectLogo.tooltip": "My Awesome Project"
}

Configuration Options

Global Settings

You can also configure defaults in your user settings (Ctrl+, / Cmd+,):

{
  "projectLogo.enabled": true,
  "projectLogo.showInSidebar": true,
  "projectLogo.position": "left",
  "projectLogo.size": 16
}

How It Works

Logo Detection Algorithm

┌──────────────────────────────────┬────────────────────────────────────┐
│ 1. Check Custom Config Path      │ Highest Priority                   │
├──────────────────────────────────┼────────────────────────────────────┤
│ 2. Check Standard Names          │ logo.png → icon.png → project.png  │
├──────────────────────────────────┼────────────────────────────────────┤
│ 3. Find First PNG in Root        │ Alphabetically sorted              │
├──────────────────────────────────┼────────────────────────────────────┤
│ 4. Check Cached Logo             │ From previous branch               │
├──────────────────────────────────┼────────────────────────────────────┤
│ 5. Generate Text Logo            │ Project name in colored box        │
├──────────────────────────────────┼────────────────────────────────────┤
│ 6. Use Default Fallback Icon     │ Built-in default                   │
└──────────────────────────────────┴────────────────────────────────────┘

Smart Logo Caching

When a logo is found, it's automatically cached. This means:

• Branch switching - Logo persists when switching to branches without the logo file
• Consistent branding - Same visual identity across all branches
• Better UX - No flickering or missing logos during development

Cache is stored in .vscode/.logo-cache/ and is workspace-specific.

Auto-Generated Logos

When no custom logo is found and cache is empty, the extension generates a text-based logo featuring:

• Project name displayed in a clean, readable font
• Unique color generated from project name (consistent across sessions)
• Responsive sizing - Font size adjusts based on name length
• High contrast - Ensures readability on any theme

Troubleshooting

Logo Not Appearing

Problem: Explorer sidebar doesn't show the project logo

Solutions:

1. Check logo filename - Ensure it's named logo.png, icon.png, or project.png
2. Verify file location - Logo must be in workspace root (unless using custom path)
3. Check extension is enabled - Verify projectLogo.enabled: true and projectLogo.showInSidebar: true
4. Reload window - Press Ctrl+Shift+P / Cmd+Shift+P → "Developer: Reload Window"

Custom Logo Path Not Working

Problem: Configured projectLogo.logoPath but logo doesn't appear

Solutions:

1. Use relative paths - Path should be relative to workspace root: "assets/logo.png"
2. Check file exists - Verify the file exists at the specified path
3. Use forward slashes - Even on Windows: "assets/branding/logo.png"
4. Reload window - Configuration changes should auto-reload, but reload if needed

Clear Logo Cache

If you need to clear the cached logo:

1. Delete .vscode/.logo-cache/ directory in your workspace
2. Reload VSCode window
3. Extension will detect and cache the current logo

Check Extension Logs

Open the extension's output channel for detailed logs:

1. Press Ctrl+Shift+U / Cmd+Shift+U to open Output panel
2. Select "Project Logo" from dropdown
3. Review logs for error messages

Examples

Example 1: Standard Setup (Zero Config)

my-app/
├── logo.png          ← Extension auto-detects this
├── src/
├── package.json
└── README.md

No configuration needed! The extension finds logo.png automatically and caches it.

Example 2: Custom Path

my-app/
├── assets/
│   └── brand/
│       └── company-logo.png
├── src/
└── .vscode/
    └── settings.json

.vscode/settings.json:

{
  "projectLogo.logoPath": "assets/brand/company-logo.png"
}

Example 3: Sidebar Only

{
  "projectLogo.showInSidebar": true,
  "projectLogo.showInStatusBar": false
}

Example 4: Custom Tooltip

{
  "projectLogo.tooltip": "🚀 My Awesome Startup"
}

License

MIT © Yoav Vollansky

Support

• 🐛 Bug Reports: GitHub Issues
• 💬 Questions: GitHub Discussions
• ⭐ Feedback: Rate on Marketplace

Power to the projects! 🚀