# Shape Templates for Favicons Industry-specific shapes and custom favicon templates beyond basic circles and squares. --- ## Overview While circles and rounded squares work universally, industry-specific shapes can reinforce brand identity and improve recognition. **When to use custom shapes**: - Industry has visual conventions (house for real estate, shield for security) - Brand personality calls for unique shape - Client requests specific shape - Differentiation needed in crowded market **When to use standard shapes**: - Unclear industry fit - Risk of complexity at small sizes - Budget/time constraints - Client has no preference --- ## Shape Selection by Industry | Industry | Primary Shape | Alternative | Rationale | |----------|---------------|-------------|-----------| | **Technology** | Hexagon | Circuit | Precision, structure | | **Security** | Shield | Lock | Protection, safety | | **Real Estate** | House | Location pin | Property, home | | **Healthcare** | Cross | Heart | Medical, care | | **Finance** | Dollar sign | Bar chart | Money, growth | | **Legal** | Scales | Gavel | Justice, law | | **Education** | Book | Graduation cap | Learning, knowledge | | **Food** | Fork/knife | Chef hat | Dining, culinary | | **Travel** | Airplane | Compass | Journey, adventure | | **Retail** | Shopping bag | Tag | Commerce, products | | **Construction** | Hard hat | Wrench | Building, tools | | **Creative** | Brush | Lightbulb | Art, ideas | --- ## Template 1: Shield (Security, Legal, Protection) ### Standard Shield ```xml S ``` **Characteristics**: - Top-heavy design (wider at top) - Point at bottom - Symmetrical **Use for**: Security companies, legal firms, insurance, protection services ### Badge Shield (Police/Authority Style) ```xml P ``` **Use for**: Law enforcement, security agencies, authority brands --- ## Template 2: House (Real Estate, Home Services) ### Simple House ```xml ``` **Characteristics**: - Triangular roof - Rectangular body - Optional door/window details **Use for**: Real estate agencies, home builders, property management, home services ### Modern House (Minimalist) ```xml ``` **Simpler variant** for cleaner look at small sizes. --- ## Template 3: Medical Cross ### Standard Cross ```xml ``` **Characteristics**: - Equal-length arms - Centered - Round or square ends **Use for**: Healthcare, medical clinics, hospitals, first aid ### Plus Icon (Modern Medical) ```xml ``` **Simpler, more modern** variant. --- ## Template 4: Hexagon (Tech, Engineering, Data) ### Regular Hexagon ```xml H ``` **Characteristics**: - Six equal sides - Technical/geometric feel - Popular in tech/SaaS **Use for**: Software companies, data analytics, engineering firms, tech startups ### Flat-Top Hexagon ```xml T ``` **Orientation**: Flat top/bottom (vs pointy top in regular) --- ## Template 5: Diamond (Luxury, Premium, Jewelry) ### Standard Diamond ```xml D ``` **Characteristics**: - 45-degree rotated square - Elegant, premium feel - Point at top/bottom **Use for**: Jewelry stores, luxury brands, premium services, high-end retail ### Gem Diamond (Faceted) ```xml ``` **More complex**: Test at 16×16 carefully. --- ## Template 6: Location Pin (Travel, Local Services) ### Standard Pin ```xml ``` **Characteristics**: - Teardrop shape with circle at top - Point at bottom - Iconic "map marker" design **Use for**: Travel agencies, local services, mapping apps, delivery services ### Simple Pin ```xml ``` **Simpler variant** with no background circle. --- ## Template 7: Lightbulb (Ideas, Innovation, Consulting) ```xml ``` **Use for**: Consulting, creative agencies, innovation labs, idea platforms **Complexity warning**: Rays may be too detailed at 16×16. Test and simplify if needed. --- ## Template 8: Gear/Cog (Manufacturing, Engineering, Services) ```xml ``` **Use for**: Manufacturing, engineering firms, maintenance services, automation **Simplification critical**: Real gears have 12-20 teeth; use 6-8 for favicons. --- ## Template 9: Book (Education, Publishing, Libraries) ```xml ``` **Use for**: Schools, libraries, publishers, educational platforms, online courses --- ## Template 10: Shopping Bag (Retail, E-commerce) ```xml ``` **Use for**: Retail stores, e-commerce sites, shopping platforms, marketplaces --- ## Template 11: Envelope (Email Services, Communication) ```xml ``` **Use for**: Email services, communication platforms, messaging apps, mail services --- ## Template 12: Chart/Graph (Analytics, Finance, Data) ### Bar Chart ```xml ``` **Use for**: Analytics platforms, finance apps, data visualization, business intelligence ### Line Chart ```xml ``` --- ## Custom Shape Creation Guidelines ### When Creating New Shapes 1. **Start with basic geometric primitives** - Circles, rectangles, triangles, polygons - Combine 2-4 shapes maximum 2. **Test at 16×16 early and often** - Details disappear at small sizes - Simplify aggressively 3. **Ensure symmetry when possible** - Symmetrical shapes are easier to recognize - Better visual balance 4. **High contrast required** - Foreground vs background: 4.5:1 minimum - Test on both light and dark browser UIs 5. **Keep paths simple** - Minimize anchor points - Use straight lines over curves when possible - Avoid complex bezier curves ### Shape Complexity Guidelines | Complexity Level | Description | Use Case | |------------------|-------------|----------| | **Simple** (3-5 shapes) | Circle + icon | Universal | | **Medium** (6-10 shapes) | House, shield, hexagon | Industry-specific | | **Complex** (11+ shapes) | Gear, lightbulb with rays | ⚠️ Use cautiously | **Rule**: Simpler is always better at favicon sizes. If unsure, simplify more. --- ## Combining Shapes with Text ### Icon + Letter ```xml L ``` **Use for**: Professional services that need letter + industry shape (e.g., "Smith Legal" → "S" in shield) ### Icon + Monogram ```xml RG ``` **Use for**: "Realtor Group" → "RG" initials in house **Font size critical**: 10-12px max when combining with detailed shape. --- ## Testing Custom Shapes ### Visual Test Checklist - [ ] Recognizable at 16×16 pixels - [ ] Still recognizable at 512×512 (scales well) - [ ] Works on light browser UI (Chrome light mode) - [ ] Works on dark browser UI (dark mode) - [ ] High contrast (4.5:1 minimum) - [ ] Symmetrical or balanced composition - [ ] No fine details lost at small size - [ ] Matches industry conventions (if applicable) ### A/B Testing Show colleagues 3 options: 1. Custom shape (e.g., house for real estate) 2. Standard circle with letter 3. Standard rounded square with letter **Ask**: Which is most recognizable? Which do you prefer? **Decision**: If custom shape isn't significantly better, use standard. --- ## When to Avoid Custom Shapes ### Use Standard Shapes If: - Custom shape is too complex to simplify - Industry doesn't have clear visual convention - Testing shows standard shapes perform better - Budget/time is limited - Client has no strong preference **Remember**: A simple circle with good color and letter is better than a complex custom shape that's illegible. --- ## Quick Reference: Shape Selection **Circle** → Universal, safe default **Rounded Square** → Modern, apps, iOS-style **Shield** → Security, legal, protection **House** → Real estate, home services **Hexagon** → Tech, engineering, data **Diamond** → Luxury, premium, jewelry **Cross** → Medical, healthcare, first aid **Location Pin** → Travel, local services, maps **Lightbulb** → Innovation, consulting, ideas **Gear** → Manufacturing, engineering, services **Book** → Education, publishing, libraries **Shopping Bag** → Retail, e-commerce **Envelope** → Email, communication **Chart** → Analytics, finance, data --- ## Official References - **MDN SVG Shapes**: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes - **Material Design Icons**: https://material.io/design/iconography/system-icons.html (simplification examples) - **Heroicons**: https://heroicons.com/ (shape inspiration) - **Lucide Icons**: https://lucide.dev/ (shape inspiration) --- **Last Updated**: 2026-01-14 **Maintained by**: Jezweb (jeremy@jezweb.net)