How to Add an HTML Email Signature in Gmail (Step by Step)

Gmail buries the signature settings three levels deep, which is why most people struggle to find them. Open Gmail in a web browser—not the mobile app. Click the gear icon in the top right corner of your inbox. A dropdown menu appears. Select "See all settings" at the bottom of that menu. Don't click "Settings" alone; that only shows quick options. You need the full settings page. Once the settings page loads, look for the "Accounts and Import" tab at the top. It's the second tab, sitting right after "General." Click it. Now scroll down until you see the section labeled "Signature." This is where you'll spend the next few minutes. You'll notice a blue "Create new" link next to the word "Signature." Gmail allows multiple signatures if you manage different email addresses or personas. For your main Gmail account, that link might say "Create new" or you might see an existing signature listed. If you already have a signature, you can edit it or create a new one. Most people use just one signature, so click "Create new" and give it a simple name like "Professional Signature" or leave it unnamed. A text box appears below. This box is where your HTML code goes. Do not type anything yet. This is critical: Gmail's signature box accepts HTML, but only if you paste it correctly. Typing it defeats the purpose and Gmail will treat your code as plain text. Before you paste anything, you need to prepare your HTML file and understand what Gmail actually accepts. HTML signatures in Gmail work best when they follow specific rules. Gmail strips out certain code like JavaScript, external stylesheets, and some advanced formatting. Your signature should contain only inline CSS—meaning style rules written directly into HTML tags rather than in a separate style block. This is exactly how professional signature generators like SignatureFox work. They output HTML with all styling baked into individual elements so Gmail can't break it. The signature text box has a small toolbar above it with formatting buttons: bold, italic, underline, bullet points, and a link button. Ignore these buttons. They're for basic text signatures. You're building an HTML signature, so you'll bypass the interface entirely and paste code instead.

Before you touch Gmail, your HTML code must be Gmail-ready. This means every style rule lives inside opening tags as an inline style attribute. For example, a table cell with blue text and Arial font should look like this: `<td style="color: blue; font-family: Arial, sans-serif;">Your text here</td>`. Not this: `<style>td { color: blue; }</style>`. Gmail deletes style blocks. Your signature code should also use a table-based layout rather than divs. Tables render more consistently across email clients and Gmail specifically respects table structure better than CSS grid or flexbox. This is why professional tools use tables. If you're building from scratch, start with a single-column or two-column table. Keep it simple. Complex nested tables cause alignment problems. Your code should also embed any images as base64. This means the image data is encoded directly into the HTML file, not linked to an external URL. External image links break in Gmail if the image server goes down, if your internet cuts out while Gmail loads it, or if the recipient's email client blocks external images by default. Base64 embedding eliminates that risk. Your logo, headshot, or any visual element should be converted to base64 beforehand. Services like base64-image.de or your email signature generator handles this automatically. Once you have clean HTML code, open a plain text editor—Notepad on Windows, TextEdit on Mac, or any code editor. Paste your HTML into the editor. Do not use Word or Google Docs. They add invisible formatting that breaks HTML. Save the file as something like "signature.html" so you remember it's HTML. Now open the file in a web browser to preview how it looks. Does your layout hold? Are images visible? Is text readable? Do colors look right? This preview catches problems before Gmail gets involved. Check the width of your signature. Gmail signature boxes accept signatures up to about 600 pixels wide on desktop. Anything wider gets cut off or wraps awkwardly. Test your HTML on mobile too. Open the saved HTML file on your phone's browser. Does it still look acceptable? Mobile Gmail displays signatures narrower than desktop, sometimes just 300-400 pixels wide. Your signature needs to adapt or at least not break. Once your preview looks good in a regular browser, you're ready to move to Gmail.

Navigate back to Gmail settings with your prepared HTML file open in a text editor. You should have the Gmail signature box visible and empty or ready to edit. Do not paste your HTML into the signature box yet. Gmail's interface has a trap: if you paste HTML directly into the text box through the web interface, Gmail converts the HTML tags into plain text. Your `<table>` becomes the literal text "<table>" instead of creating an actual table. This happens because Gmail interprets pasted content as formatted text, not raw code. The solution requires a workaround. Copy your entire HTML code from the text editor. Click inside the Gmail signature box to place your cursor there. Now—and this is the key step—do not paste directly. Instead, open your browser's developer tools. Right-click inside the signature box and select "Inspect" or "Inspect Element." A developer tools panel opens, usually at the bottom of your screen. Find the line that says something like `<div id="signature-container">` or similar. Look for the opening `<div>` tag of the actual signature box. Right-click that line in the code and select "Edit as HTML" or "Edit HTML." A text editor appears within the developer tools. Clear any existing content inside the signature div. Paste your full HTML code here. This bypasses Gmail's text interpretation and inserts raw HTML directly into the DOM. Press Enter or Ctrl+Enter to save the change. The signature box now displays your HTML rendered, not as plain text. Close the developer tools. Your signature should appear formatted in the preview box above the code box. If images show, colors appear correct, and text is aligned, the paste worked. The signature box might look slightly different from your standalone preview—Gmail adds some margin and padding—but the core layout should match. Click "Save Changes" at the bottom of the settings page. Gmail saves your signature. Do not close the tab yet. Scroll back up to your signature section to verify it saved correctly. The signature should still be displayed in the preview area, still formatted with images and styling intact. If you see plain HTML code text instead of a rendered signature, the paste didn't work. Go back to step one and try again, this time making sure you're editing the actual HTML in developer tools, not pasting into the text field. If the image shows broken or missing, that image wasn't properly converted to base64, or the base64 string got corrupted during paste. Check your source HTML file for the image tag and verify the base64 string is complete and unbroken.

Your signature is live in Gmail now, but you might notice issues. Broken image icons, misaligned text, colors that look wrong, or spacing that's too tight or too loose are common problems. Each has a specific fix. Broken images appear as a little picture frame with a question mark or an X. This happens when Gmail can't find or render the image. The cause is almost always incomplete or corrupted base64 code. The base64 string for an image is very long—sometimes thousands of characters. If even one character is missing or wrong, the browser can't decode it and shows a broken image. Check your HTML source code. Find the `<img>` tag with the broken image. Look at the `src=` attribute. It should start with `data:image/`. If it shows a regular URL like `http://example.com/logo.png`, that's your problem. Replace it with proper base64 code. To get a new base64 string for an image, use a base64 encoder or better yet, use a signature generator tool like SignatureFox that handles base64 automatically. Paste the new code back into Gmail using the developer tools method described earlier. Misaligned text or images happens when your CSS margins and padding are too aggressive, or when your table widths don't match expected sizes. Gmail adds its own spacing around signature elements. If your table is set to `width: 100%` and your cells have large padding, text gets squeezed. Fix this by reducing padding in your `<td>` elements to something like `padding: 8px 0;` instead of `padding: 20px;`. Reduce margins on `<p>` tags to `margin: 0;` or `margin: 5px 0;`. This prevents double-spacing. If images are misaligned with text, add `vertical-align: middle;` to the `<td>` tags containing both. If your signature looks perfect on desktop but falls apart on mobile Gmail, your table is too wide or your text doesn't wrap. Gmail's mobile view is narrower. Test in mobile view by opening a test email on your phone and looking at your signature in Gmail's mobile app. If text runs off the edge, either reduce your table width in the HTML or design the signature to be narrower from the start—500 pixels or less is safer for mobile. If images don't scale down on mobile, add `max-width: 100%;` and `height: auto;` to your `<img>` tags. Colors look wrong sometimes because email clients interpret color codes differently, or because Gmail's dark mode inverts colors. Test on both light and dark backgrounds. If you used black text on a black background (accidentally), your signature becomes invisible in dark mode. Use darker backgrounds and lighter text, or test extensively before rolling out to your whole team. Spacing between elements is off if your HTML has extra line breaks or tab characters between tags. Remove all line breaks and indentation from your HTML code. Make it one long line. This prevents Gmail from interpreting whitespace as actual space in the rendered signature. Copy and paste the one-line version into Gmail.

Your signature is set in Gmail's web interface, but email signatures behave differently depending on where they're viewed. A signature that looks perfect in Gmail's web version might look broken when received by someone using Outlook or when viewed on an iPhone. Verification prevents embarrassment and maintains your professional image. Start with Gmail on desktop. Send yourself a test email. Open it and check your signature. Does your logo appear? Are colors correct? Is spacing tight or loose? Do links work if you included them? Write down any issues. Next, forward that test email to yourself using your Gmail account. When you receive it, your signature displays as it appears to others. This is the critical test—your signature as recipients see it. Check alignment, image quality, and overall appearance. The signature in the sent email footer might look slightly different from the preview in settings. If it looks bad here, others will see it that way too. Send another test email and open it on your mobile phone in Gmail's mobile app. Mobile Gmail renders signatures differently than desktop. Text might be smaller. Images might resize. Spacing might change. If your signature breaks on mobile—images don't display, text runs off screen, or layout collapses—you need to adjust your HTML. The most common mobile issue is width. If your signature is wider than 500 pixels, mobile Gmail crops it. Go back to Gmail settings and edit your signature using the developer tools method again. Reduce table width to 480 pixels or less. Test again on mobile. If images don't shrink on mobile, your `<img>` tags need responsive sizing. Add `style="max-width: 100%; height: auto;"` to each image tag. Test a third time. Now send a test email to someone using Outlook if possible. Have them open it and confirm it looks acceptable. Outlook sometimes interprets HTML differently than Gmail, especially with complex CSS. Common Outlook issues include background colors not displaying, borders not showing, or fonts changing. If you see issues in Outlook, simplify your HTML. Remove background colors from table cells. Use basic fonts like Arial or Helvetica instead of fancy web fonts. Keep borders simple. Make sure your code doesn't include any CSS that Outlook doesn't support. Send another test to Apple Mail and to Yahoo Mail if you can. Both are common email clients. Check that your signature appears and renders correctly in each. Most professional HTML signatures work across all major email clients if they're built properly with inline styles and table layouts. If one client shows problems, the issue is usually with your HTML code, not the client. Go back to your signature settings and refine the code based on what you're seeing. Once your signature looks good in Gmail, on mobile, and in at least one other client, you've successfully implemented an HTML signature. Monitor it for a few weeks. Ask colleagues or clients if they notice anything odd about your signature. Sometimes layout issues only appear in specific scenarios or with certain email addresses. Keep your HTML file saved locally so you can quickly edit and update your signature if problems arise later.