01 — Your details
02 — Live preview
Logo handling
Outlook for Mac and Outlook for iPhone strip <style> blocks when you paste into the signature editor, so the auto-swap never fires there and the black mark stays black. The white plate keeps the logo on its own light background in every client, dark mode included.
| |
| Brad Koontz Founder & Principal | |
| brad@hummingbirdworks.ai | +1 (555) 019-4472 | |
| ◉ hummingbirdworks.ai | |
AI Native | Frontier Focused | Outcome Obsessed |
View source
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-collapse:collapse;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45;color:#111111;"> <tr><td style="padding:0;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;"><a href="https://hummingbirdworks.ai" style="text-decoration:none;"><table cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-collapse:collapse;"><tr><td bgcolor="#ffffff" style="background-color:#ffffff;padding:10px 14px;border-radius:6px;"><img class="hb-logo-chip" src="https://brand.hummingbirdworks.ai/brand/signature-logo-v3.png" alt="Hummingbird" width="180" height="80" style="display:block;border:0;outline:none;width:180px;height:auto;" /></td></tr></table></a></td></tr> <tr><td style="padding:0;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;"><div style="height:14px;line-height:14px;font-size:0;"> </div></td></tr> <tr><td style="padding:0;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;"><span style="font-size:15px;font-weight:700;letter-spacing:-0.01em;color:#111111;">Brad Koontz</span><br /><span style="font-size:13px;color:#5b5b5b;">Founder & Principal</span></td></tr> <tr><td style="padding:0;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;"><div style="height:10px;line-height:10px;font-size:0;"> </div></td></tr> <tr><td style="padding:0;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;"><span style="font-size:13px;"><a href="mailto:brad@hummingbirdworks.ai" style="color:#111111;text-decoration:none;">brad@hummingbirdworks.ai</a><span style="color:#c9c9c9;"> | </span><a href="tel:+15550194472" style="color:#111111;text-decoration:none;">+1 (555) 019-4472</a></span></td></tr> <tr><td style="padding:0;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;"><span style="font-size:13px;"><span style="color:#8a8a8a;font-size:12px;">◉</span> <a href="https://hummingbirdworks.ai" style="color:#111111;text-decoration:none;font-weight:600;">hummingbirdworks.ai</a></span></td></tr> <tr><td style="padding:0;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;"><div style="height:12px;line-height:12px;font-size:0;"> </div><div style="border-top:1px solid #e6e6e6;padding-top:10px;font-size:12px;color:#8a8a8a;letter-spacing:0.01em;">AI Native | Frontier Focused | Outcome Obsessed</div></td></tr> </table>
03 — Reply signature
One line, no logo — for replies and long threads. Name | Email | Phone.
| Brad Koontz | brad@hummingbirdworks.ai | +1 (555) 019-4472 |
View source
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-collapse:collapse;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;"><tr><td style="padding:0;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:13px;line-height:1.45;color:#111111;white-space:nowrap;"><span style="font-weight:700;color:#111111;">Brad Koontz</span><span style="color:#c9c9c9;"> | </span><a href="mailto:brad@hummingbirdworks.ai" style="color:#111111;text-decoration:none;">brad@hummingbirdworks.ai</a><span style="color:#c9c9c9;"> | </span><a href="tel:+15550194472" style="color:#111111;text-decoration:none;">+1 (555) 019-4472</a></td></tr></table>
04 — Why this layout
Single column, table-based
Outlook renders HTML with the Word engine — flexbox, grid, and background images are ignored. Nested tables with inline styles are the only reliable structure.
Logo leads, type follows
The mark is the loudest element; name, role, contact, and URL step down in weight. No competing colors, no icon row, no legal boilerplate.
Text links, not icons
Social icon strips break on dark mode and image-blocking clients. Plain text links stay legible everywhere and survive forwarding.
One accent rule
A single hairline above the tagline is the only ornament. It reads as intentional structure rather than decoration.
05 — Optimizing the logo
- Export at 2× and display at 1×. Master the signature lockup at 360 × 130 px, then set
width="180"in the markup so it stays crisp on Retina and HiDPI screens. - PNG-24 with transparency. The mark is pure black line art — PNG keeps the edges clean. SVG is not supported by Outlook, and WebP is unreliable in older clients.
- Ship under 20 KB. Run it through a lossless compressor (TinyPNG, ImageOptim, oxipng). Heavy signatures get flagged and slow every thread.
- Set explicit width and height. Prevents Outlook from rendering the logo at its native pixel size before images load.
- Dark-mode logo swap — automatic. Dark-mode clients invert text but never invert images, so a pure-black mark stays black on a dark background. The generated HTML now ships both exports and swaps them with a
prefers-color-schemerule (plus an[data-ogsc]fallback for Outlook.com). Host the reversed export alongside the black one assignature-logo-white.png— both URLs must be public or the swap can't fire. Gmail strips embedded styles, so it keeps the black mark on its light background, which is correct there. - Always include alt text. When images are blocked, "Hummingbird" still reads as the brand.
06 — Where the logo should live
Never embed the logo as an attachment — it becomes a paperclip icon on every email and breaks on forward. Host it at a permanent, public, cache-friendly URL.
- 1. Your own domain (best). Serve it from
https://hummingbirdworks.ai/brand/signature-logo.png. Same-domain assets earn trust from spam filters and stay under your control. - 2. A CDN in front of it. Cloudflare, S3 + CloudFront, or the CDN this tool already uses. Set
Cache-Control: public, max-age=31536000, immutable. - 3. Version the filename.
signature-logo-v3.png— never overwrite a live file. Signatures live in thousands of archived threads, so old URLs must keep resolving. - 4. Avoid Drive/Dropbox/Docs links. They require auth, redirect, expire, or rate-limit, and they render as broken images.
- 5. Serve over HTTPS only. Mixed content is silently stripped by most clients.
The preview above points at https://brand.hummingbirdworks.ai/brand/signature-logo-v3.png — our own subdomain, served over HTTPS and returning a real image/png. Keep the version suffix on any future export and publish it as a new filename rather than overwriting this one, so archived threads keep rendering.