Skip to content

LOGO_GUIDE.md

Latest commit

 

History

History
150 lines (115 loc) · 3.8 KB

LOGO_GUIDE.md

File metadata and controls

150 lines (115 loc) · 3.8 KB

CodeGuard Logo Guide

Current Logo

I've created an SVG logo (icon.svg) with the following design:

  • Blue shield representing security and protection
  • Code brackets < > representing code
  • Green checkmark representing quality validation
  • Clean, modern design suitable for VSCode marketplace

Converting SVG to PNG (128x128)

Option 1: Online Converter (Easiest)

  1. Go to https://cloudconvert.com/svg-to-png
  2. Upload icon.svg
  3. Set dimensions to 128x128 pixels
  4. Download as icon.png

Option 2: Using Inkscape (Free Desktop App)

  1. Download Inkscape: https://inkscape.org/
  2. Open icon.svg
  3. File → Export PNG Image
  4. Set width and height to 128px
  5. Export as icon.png

Option 3: Using ImageMagick (Command Line)

# Install ImageMagick first
# Windows: choco install imagemagick
# Mac: brew install imagemagick

# Convert
magick convert -background none -resize 128x128 icon.svg icon.png

Option 4: Using Node.js (sharp library)

npm install sharp
node -e "require('sharp')('icon.svg').resize(128, 128).png().toFile('icon.png')"

Alternative Design Concepts

If you want to create a custom logo, here are some design ideas:

Concept 1: Shield with Code Symbol

  • Shield outline
  • { } curly braces or < /> tags inside
  • Blue/green color scheme
  • Represents: Protection + Code

Concept 2: Magnifying Glass over Code

  • Magnifying glass icon
  • Code lines visible through lens
  • Represents: Code analysis and inspection

Concept 3: Lock with Code

  • Padlock icon
  • Binary or code pattern as background
  • Represents: Security and code protection

Concept 4: Checkmark Badge

  • Circular badge
  • Large checkmark
  • Code symbols around the edge
  • Represents: Quality validation

Design Tools

Free Online Tools:

  1. Canva (https://canva.com)

    • Use 128x128 custom dimensions
    • Search for "shield", "code", "security" icons
    • Export as PNG

  2. Figma (https://figma.com)

    • Professional design tool
    • Free for personal use
    • Export at 128x128

  3. Photopea (https://photopea.com)

    • Free Photoshop alternative
    • Works in browser

AI Logo Generators:

  1. Looka (https://looka.com)
  2. Hatchful by Shopify (https://hatchful.shopify.com)
  3. LogoMakr (https://logomakr.com)

Design Guidelines for VSCode Icons

Requirements:

  • Size: 128x128 pixels (PNG format)
  • File size: Keep under 50KB
  • Background: Transparent or solid color
  • Style: Simple, recognizable at small sizes

Best Practices:

  • Use 2-3 colors maximum
  • Avoid fine details (won't show at 16x16)
  • Test at multiple sizes (16x16, 32x32, 64x64, 128x128)
  • Use high contrast for visibility
  • Avoid text (except single letters/symbols)

Color Suggestions:

  • Primary: Blue (#2563eb) - Trust, technology
  • Secondary: Green (#10b981) - Success, validation
  • Accent: White (#ffffff) - Clarity
  • Alternative: Purple (#8b5cf6) - Innovation

Using the Logo

Once you have icon.png:

  1. Add to package.json:

    {
  "icon": "icon.png"
}

  2. Repackage extension:

    npx @vscode/vsce package

  3. Verify in package:

    • Install the .vsix file locally
    • Check if icon appears in Extensions panel

Current SVG Design Details

The provided icon.svg features:

  • Outer circle: Blue (#2563eb) - 120px diameter
  • Shield: White with slight transparency
  • Code brackets: Blue < > symbols
  • Checkmark: Green (#10b981) stroke

Feel free to modify colors, shapes, or design in any vector editor!

Need Help?

If you need a custom logo designed:

  1. Hire a designer on Fiverr ($5-20)
  2. Use AI tools like DALL-E or Midjourney
  3. Ask in design communities (r/logodesign)

Quick Start: Use the online converter (Option 1) to get icon.png from icon.svg in under 1 minute!