Skip to content

SF² Logo Assets

This directory contains the branding assets for the Software Factory Security Framework.

Current Assets

logo.svg

  • Main logo for website header/navigation
  • Shield design with "SF²" lettermark
  • Color: Dark blue (#1a3a52)
  • Dimensions: 400x450px viewBox
  • Usage: Header, navigation, large displays

favicon.svg

  • Reduced mark for browser tabs, bookmarks, and the home-screen icon
  • A 2-glyph "S²" lockup (not the full "SF²"): three glyphs turn to mush at 16×16px, so the favicon keeps the brand's squared motif while staying legible at tab scale.
  • Drives favicon-16x16.png, favicon-32x32.png, favicon.ico, and apple-touch-icon.png.
  • The full "SF²" lettermark stays on logo.svg (header / large displays); the identity is intentionally scale-tiered — full mark large, reduced mark small.

Design Specifications

Color Palette:

  • Primary: #1a3a52 (Dark blue/navy - shield background)
  • Accent: #ffffff (White - lettermark)
  • Complements the site primary, Azul Talavera (#2C4A6B): the shield uses a deeper navy so it keeps contrast against the azul site header rather than blending in.

Typography:

  • "SF²" in bold, geometric sans-serif style
  • Superscript "²" properly positioned
  • High contrast white on dark blue

Shape:

  • Pentagon shield (5 sides + pointed bottom)
  • Conveys security and protection
  • Clean, geometric, modern design

Additional Formats (Optional)

For maximum browser compatibility, you may want to create additional formats:

Converting to PNG/ICO

Using Online Tools:

  1. SVG to PNG: https://cloudconvert.com/svg-to-png
  2. Upload favicon.svg

  3. Set sizes: 16x16, 32x32, 180x180 (for apple-touch-icon)

  4. PNG to ICO: https://cloudconvert.com/png-to-ico

  5. Upload 32x32 PNG
  6. Creates favicon.ico for older browsers

Using Command Line (if tools installed): 

# Install dependencies (macOS)
brew install librsvg imagemagick

# Convert favicon.svg to PNG sizes
rsvg-convert -w 16 -h 16 favicon.svg > favicon-16x16.png
rsvg-convert -w 32 -h 32 favicon.svg > favicon-32x32.png
rsvg-convert -w 180 -h 180 favicon.svg > apple-touch-icon.png

# Create ICO from 32x32 PNG
convert favicon-32x32.png favicon.ico

Using Python (if Pillow + cairosvg installed): 

import cairosvg
from PIL import Image

# SVG to PNG
cairosvg.svg2png(url='favicon.svg', write_to='favicon-32x32.png', output_width=32, output_height=32)
cairosvg.svg2png(url='favicon.svg', write_to='apple-touch-icon.png', output_width=180, output_height=180)

# PNG to ICO
img = Image.open('favicon-32x32.png')
img.save('favicon.ico', format='ICO', sizes=[(32, 32)])

Updating mkdocs.yml

Current configuration: 

theme:
  logo: assets/logo.svg
  favicon: assets/favicon.svg  # SVG works in modern browsers

If you create ICO/PNG versions, update to: 

theme:
  logo: assets/logo.svg
  favicon: assets/favicon.ico  # or favicon-32x32.png

Design Source

Logo concept generated with Midjourney and recreated as clean SVG.

Original Midjourney prompt (for reference): 

minimalist logo icon, abstract security shield with framework grid pattern,
geometric modern, indigo blue, flat design, clean simple, white background,
professional tech branding --style raw --v 6

License

Logo assets are part of the SF² framework and are licensed under: Creative Commons Attribution 4.0 International (CC BY 4.0)

You are free to use, share, and adapt with attribution to Julie Davila and the SF² framework.

Need changes? Edit the SVG files directly or regenerate using the Midjourney prompt above.