Engineered marks, built for every scale.
Pure vector lockups, 4K rasters, and platform-calibrated canvases. Download the official assets ready-to-use with intentional padding, background contrast, and symmetrical balance.
Master Marks Catalog
All 9 official variants available in SVG, 2K PNG, 4K PNG, WebP, and Vector PDF.
Default to the complete Horizontal Lockup (~80% of all UI) for headers, navigation bars, footers, and splash screens. Standalone marks (~5%) are strictly for favicons and avatars — never combine an isolated mark with HTML text.
Woohl
Studio Canvas
Production-ready marks for every screen and OS. standards.
Engineered for high-DPI viewports, iOS home screen bookmarks, Android PWA launcher drawers, and desktop browser tabs. Every asset includes instant CDN delivery.
Web & PWA Head Tags
Drop this snippet directly into your HTML <head> for full multi-platform support.
woohl-favicons.zip
<!-- Woohl Favicon & App Icons -->
<link rel="icon" href="https://brand.woohl.com/favicon.ico" sizes="any">
<link rel="icon" href="https://brand.woohl.com/brand/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://brand.woohl.com/apple-touch-icon.png">
<link rel="manifest" href="https://brand.woohl.com/manifest.json">Browser Tab Preview
Multi-Resolution Favicon
ICOClassic Windows & desktop browser tab icon (16×16, 32×32, 48×48 multi-size ICO).
Woohl — OfficialBrowser Tab Preview
Modern Vector Favicon
SVGCrisp vector favicon for modern Chromium, Firefox, and Safari browsers.
Apple Touch Icon
PNGHigh-resolution icon for iOS Safari home screen shortcuts and bookmarks.
PWA Launcher Icon (192px)
PNGAndroid home screen and application drawer launcher icon.
PWA Splash Icon (512px)
PNGSplash screen and high-density PWA installation icon.
App Store Master (1024px)
PNGFull-bleed master artwork for Apple App Store and Google Play Console listings.
Web App Manifest
JSONOfficial W3C web application manifest configuring installable PWA behaviors.
Pick an asset, copy production-ready code.
Ready-to-drop markup for HTML, React, Markdown, and CSS. Served directly from our high-speed edge CDN with evergreen caching and open CORS.
lightdarkUse the light variant here<img src="https://brand.woohl.com/brand/logo.svg"
alt="Woohl" width="160" height="34" loading="lazy" />Clean Evergreen URLs
Hotlink directly to canonical URLs (e.g. /brand/logo.svg). The edge CDN revalidates automatically, so your embeds remain evergreen.
Permanent Version Archive
Need an immutable freeze for legal docs or partner contracts? Pin to /brand/v1/<filename> which is cached permanently.
Need something tailored?
Email hello@woohl.com — we'll provide custom lockups, special aspect ratios, or specialized vector exports.
Evergreen Edge URL
https://brand.woohl.com/brand/
Served with open CORS (`*`), immutable compression, and global edge distribution.
How to keep the mark untouchable.
A few uncompromisable rules to protect the integrity of the bird and wordmark across screens, print, and physical environments.
Default to horizontal lockup (~80%)
Always use the complete horizontal lockup (logo.svg or logo-white.svg) for website headers, navigation bars, footers, splash screens, documentation, and general brand identification.
Preserve clear space
Maintain clear breathing room equal to 1x the height of the bird mark on all four sides (minimum 0.5x on crowded surfaces).
Respect single-color rule
Bird and wordmark always share one exact tone (Woohl Orange, White, or Ink). Two-tone marks are strictly prohibited.
Enforce minimum rendering sizes
Horizontal lockup: 24px min height. Stacked lockup: 48px min height. Bird alone: 16px min height. Below 24px, fall back to bird alone.
Limit standalone mark (~5%)
Use icon.svg strictly for bounded square or circular containers like browser favicons, app launcher icons, and social media avatars. Never append custom HTML text to it.
70 / 20 / 10 Surface Ratio
Keep 70% Paper surface, 20% Ink structure, and 10% Orange accent. Never exceed 10% orange coverage on a single view unless it is a full-bleed CTA.
Don't stretchDon't rotateDon't shadowDon't recolorDon't recreate in HTML/CSS
Never place an icon.svg next to plain text (<span>, <h1>) to assemble a logo. All lockups are mathematically calibrated master vectors with fixed baseline kerning. Always embed the complete canonical lockup.
Don't distort or stretch
Scale uniformly. Width follows fixed aspect ratio (360:76.5 for horizontal, 222.37:148 for stacked).
Don't rotate or tilt
The bird mark sits upright and grounded. Tilting breaks the brand personality.
Don't add effects or shadows
No drop shadows, glows, bevels, outlines, or gradients. Marks are strictly flat vector.
Symmetrical, intentional, pre-padded avatars.
Never struggle with off-center avatars, clipped bird wings, or awkward banner stretching. Every file includes calibrated safe margins for circular and landscape masks.
Profile Avatars (1024×1024)
LinkedIn · X · Instagram · YouTubeWoohl Orange Avatar
Iconic brand avatar: white bird symbol on rich Woohl Orange canvas. Calibrated with circular safe-zone padding for LinkedIn, X, and Instagram profile pictures.
Clean White Avatar
High-contrast avatar: Woohl Orange mark on pure paper white background.
Deep Ink Avatar
Stealth dark mode avatar: reversed white bird mark on deep ink surface.
Warm Editorial Avatar
Sophisticated editorial avatar: Woohl Orange mark on warm whisper surface.
Banners, Covers & Social Cards
Widescreen FormatsLinkedIn Company Banner (Orange)
LinkedIn Cover · 1584×396 (4:1)
LinkedIn Company Banner (Ink)
LinkedIn Cover · 1584×396 (4:1)
LinkedIn Company Banner (Light)
LinkedIn Cover · 1584×396 (4:1)
Twitter / X Header (Orange)
Twitter / X Header · 1500×500 (3:1)
Twitter / X Header (Ink)
Twitter / X Header · 1500×500 (3:1)
Twitter / X Header (Light)
Twitter / X Header · 1500×500 (3:1)
Social Share / OpenGraph (Orange)
OpenGraph / Meta · 1200×630 (1.91:1)
Social Share / OpenGraph (Light)
OpenGraph / Meta · 1200×630 (1.91:1)