How to Create a Professional Email Signature for Gmail, Outlook and Apple Mail

Why your email signature matters more than you think
Every email you send is a branding opportunity. The average office worker sends around 40 emails per day. That is over 10,000 impressions per year from a single team member, all landing in the most personal channel in digital communication: the inbox.
A professional email signature turns every one of those messages into a subtle but consistent brand touchpoint. It establishes credibility before the recipient reads a single word, provides instant contact details, and can drive traffic to your website, social profiles, or latest campaign.
Despite this, most professionals still use plain-text sign-offs or no signature at all. The ones who do often use inconsistent formats across the team, broken images, or layouts that collapse on mobile.
This guide covers everything you need to build a clean, professional email signature that renders correctly across Gmail, Outlook, and Apple Mail, the three platforms that account for the vast majority of business email traffic.
What makes a good email signature
A well-designed email signature balances information density with visual clarity. It should answer three questions at a glance:
- Who is this person? Full name, job title, company name.
- How do I contact them? Phone number, email, website.
- Where do I find them online? LinkedIn, Twitter/X, or other relevant social profiles.
Beyond these essentials, the best signatures share a few design principles:
- Keep it compact. A signature should be 3–5 lines of content, not a full-page brochure. Overly long signatures get cut off by email clients and look unprofessional.
- Use a consistent colour palette. Stick to your brand colours. Two colours maximum besides black and white.
- Avoid large images. A small, optimised headshot or company logo is acceptable. Full-width banners slow down email loading and often get blocked by default.
- Use web-safe fonts. Email clients do not support custom fonts reliably. Stick to Arial, Helvetica, Georgia, or Verdana.
- Design for mobile first. Over 60% of emails are opened on mobile devices. Your signature must stack cleanly on narrow screens.
What to include in your email signature
Essential fields
| Field | Example | Notes |
|---|---|---|
| Full name | Sarah Mitchell | Use your professional name |
| Job title | Head of Marketing | Keep it concise |
| Company name | Horizon Digital | Link to your website |
| Phone | +1 (555) 123-4567 | Include country code for international contacts |
| sarah@horizon.digital | Makes it easy to save your contact | |
| Website | horizon.digital | Link directly, no "www" needed |
Optional but valuable
- LinkedIn profile: the single most important social link for B2B professionals
- Headshot: a small, circular photo (80–100px) increases trust and recognition
- Company logo: small, clean, placed consistently
- Pronouns: increasingly expected in professional settings
- Calendar booking link: useful for sales and customer-facing roles
- Legal disclaimer: required in some regulated industries (finance, legal, healthcare)
What to leave out
- Inspirational quotes. They clutter the signature and rarely add professional value.
- Multiple phone numbers. Pick one primary number.
- Social media icons for every platform. Include only the 2–3 platforms where you are genuinely active and where your audience engages.
- Animated GIFs. Most email clients block or distort them. They increase email size and look unprofessional in business contexts.
- Confidentiality notices. Unless legally required, the lengthy "this email is confidential" boilerplate is legally unenforceable and adds visual noise.
How to create an email signature with the free generator
The CampaignMorph Email Signature Generator lets you build a professional HTML email signature in minutes. It runs entirely in your browser. No data is sent to any server.
Step 1: Enter your details
Fill in your name, job title, company, phone number, email, and website. Each field is optional, so you can include only what is relevant to your role.
Step 2: Add social links
Enter the URLs for your LinkedIn, Twitter/X, Facebook, or Instagram profiles. The generator automatically extracts the handle and renders the appropriate icon.
Step 3: Customise the design
Adjust the primary and secondary colours to match your brand palette. If you are unsure which colours to use, the Color Palette Extractor can pull your brand colours directly from your logo or website screenshot.
Step 4: Preview and copy
The live preview shows exactly how your signature will look. When you are satisfied, click Copy Signature to copy the formatted HTML to your clipboard. You can also export it as an image if needed.
How to add the signature in Gmail
- Open Gmail and click the gear icon (top right) then See all settings.
- Scroll down to the Signature section.
- Click Create new and give your signature a name (e.g., "Work" or "Primary").
- Click inside the signature editor, then press Ctrl+V (Windows) or Cmd+V (Mac) to paste the copied signature.
- Scroll down and click Save Changes.
Important: Gmail strips some CSS styles on paste. The CampaignMorph generator uses inline styles specifically to avoid this issue, so your signature should render correctly. If images appear broken, make sure they are hosted at a publicly accessible URL.
Set a default signature
In the same settings section, under Signature defaults, choose your new signature for both "For new emails use" and "On reply/forward use" dropdowns. This ensures every email includes your signature automatically.
How to add the signature in Outlook
Outlook desktop (Windows)
- Go to File > Options > Mail > Signatures.
- Click New, name your signature.
- Paste the copied signature into the editor.
- Set it as the default for new messages and replies.
- Click OK to save.
Outlook desktop (Mac)
- Go to Outlook > Preferences > Signatures.
- Click the + button to create a new signature.
- Paste the copied signature.
- Close the preferences window. The signature saves automatically.
Outlook web (outlook.com / Microsoft 365)
- Click the gear icon (top right) then View all Outlook settings.
- Go to Mail > Compose and reply.
- Under Email signature, paste the copied signature.
- Toggle on Automatically include my signature on new messages and on replies/forwards.
- Click Save.
Outlook quirks: Outlook for Windows uses the Word rendering engine for HTML, which means some CSS properties like flexbox, grid, and max-width do not work. The CampaignMorph generator outputs table-based HTML that is specifically compatible with Outlook's rendering engine.
How to add the signature in Apple Mail
- Open Mail > Settings (or Preferences on older macOS versions).
- Go to the Signatures tab.
- Select your email account in the left column.
- Click the + button to create a new signature.
- Uncheck Always match my default message font at the bottom.
- Open the CampaignMorph generator in Safari, copy the signature, and paste it into the signature editor.
- Close the settings window. The signature saves automatically.
Apple Mail tip: Apple Mail handles HTML signatures better than most clients, but it may convert pasted content to rich text. If the formatting looks wrong, try pasting the signature from Safari specifically (not from another browser), as Safari and Apple Mail share the same rendering engine.
Email signature design best practices
Keep the width under 600 pixels
Most email reading panes are 600–700 pixels wide. A signature wider than 600px will cause horizontal scrolling or layout breaks, especially in Outlook's preview pane and on mobile devices.
Use inline CSS only
Email clients strip <style> blocks and external stylesheets. Every style must be applied directly to the HTML element using the style attribute. The CampaignMorph generator handles this automatically.
Optimise images
- Headshot: JPEG or WebP, 80×80px to 100×100px, under 30KB. Use the Image Compressor to optimise.
- Logo: PNG with transparency, 150–200px wide, under 20KB.
- Host images externally: email clients do not reliably render Base64-encoded images. Host them on your website or a CDN and reference them with absolute URLs.
Use a vertical divider sparingly
A thin vertical line between the photo and the text block adds visual structure. Keep it subtle: 1–2px wide, in a muted colour. Avoid horizontal rules that span the full width, they make the signature look like a footer rather than a sign-off.
Test on multiple clients
Before rolling out a signature across your team, send test emails to:
- A Gmail account
- An Outlook account (both desktop and web)
- An Apple Mail account
- A mobile device (iOS Mail and Android Gmail)
Rendering differences between clients are the number one source of broken signatures. The 5 minutes spent testing saves hours of follow-up fixes.
Common email signature mistakes
| Mistake | Why it is a problem | Fix |
|---|---|---|
| Using an image-only signature | Many email clients block images by default. The recipient sees a blank space. | Use HTML text with an optional image, never a single image for the entire signature. |
| Including too many social icons | Visual clutter reduces the impact of each link. | Limit to 2–3 platforms where you are genuinely active. |
| Missing mobile optimisation | Signatures that look fine on desktop can become unreadable on mobile. | Use table-based layouts that stack on narrow screens. |
| Using custom fonts | Email clients fall back to system defaults, creating inconsistent rendering. | Stick to web-safe fonts: Arial, Helvetica, Georgia, Verdana. |
| Broken image links | Images hosted on localhost, behind authentication, or on expired URLs show as broken icons. | Host images on your public website or CDN with absolute URLs. |
| Oversized file attachments | Some signatures embed images as attachments, inflating every email by 200KB+. | Link to externally hosted images instead of embedding. |
Team email signature consistency
For teams and agencies, inconsistent email signatures are a common branding gap. One person has a logo, another does not. Titles are formatted differently. Colours do not match.
To standardise:
- Create one master signature using the Email Signature Generator with your brand colours and layout.
- Document the format in your brand guidelines. Include the exact fields, colour codes, and font choices.
- Distribute the HTML template to each team member. They only need to replace the personal fields (name, title, phone, photo).
- Review quarterly. Update signatures when people change roles, the company rebrands, or contact details change.
For brand colour consistency, use the Color Converter to ensure hex codes match across your signature, website, and marketing materials.
Frequently asked questions
1. Is the Email Signature Generator free?
Yes. The tool is completely free with no watermarks, no sign-up, and no usage limits.
2. Is my data uploaded to a server?
No. All signature generation happens in your browser. Your personal details never leave your device.
3. Will the signature work on mobile?
Yes. The generated HTML uses table-based layouts with inline styles, which render correctly on iOS Mail, Android Gmail, and mobile Outlook.
4. Can I include a profile photo?
Yes. You can add a headshot URL in the generator. For best results, use a square image (1:1 aspect ratio) and host it on your website. Use the Image Resizer to resize it to 80–100px and the Image Compressor to keep the file size under 30KB.
5. How do I create a consistent signature for my whole team?
Create a master signature with the generator, then share the HTML template with each team member. They replace their name, title, phone, and photo URL. The layout, colours, and format remain consistent.
6. Why does my signature look different in Outlook?
Outlook for Windows uses the Microsoft Word rendering engine for HTML emails, which does not support modern CSS properties like flexbox or grid. The CampaignMorph generator specifically outputs table-based HTML compatible with Outlook's renderer.
Try the free Email Signature Generator
The CampaignMorph Email Signature Generator lets you create a professional, mobile-friendly email signature in minutes. Enter your details, customise the colours, preview the result, and copy it directly into Gmail, Outlook, or Apple Mail. No sign-up, no data uploads, entirely browser-based.
For related tools, explore the Meta Tag Generator, Color Converter, Color Palette Extractor, Image Compressor, and Image Resizer.
Sources
- Gmail Help Center: signature settings and formatting documentation
- Microsoft Support: Outlook signature setup for Windows, Mac, and Web
- Apple Support: Mail signature configuration on macOS
- Litmus and Email on Acid: email client rendering compatibility research and best practices
