14 Steps for a Gmail Signature with Logo
Gmail makes adding a custom signature unbelievably difficult
Gmail is a widely used email application and is quite powerful. However adding a custom signature at the bottom of your email is quite complicated. After perusing the internet and reading different blogs, not one single blog had a step-by-step direction that made sense. Here we’ll do our best to teach you how to add a Gmail custom signature with your company logo and social media icons that link through!
Disclaimer: This technique is moderately advanced and requires some basic knowledge of HTML and Photoshop. Unfortunately Google makes this more difficult than it needs to be…
Goal: Create a Gmail signature with your company logo on the left, your information on the right, and social media icons & other text that link through to their respective web domains.
Note: Some other blogs teach you how to create an image of your signature. So it looks customized but the text is not readable and individual components, such as the social media icons, cannot be linked. You can link the entire image to one destination, such as your webpage, but this method is considered “amateur hour.”
Standard vs. Custom Gmail Signature
As you can see the standard Gmail signature is boring. Adding a logo makes the signature look professional. Adding social icons that link through makes it look professional but more importantly provides you with a better marketing tool for email recipients to interact with your company online.
Step 1 - Open your Logo in Photoshop
*Give Instructions 1-5 to your designer or Wexford if you are not Photoshop savvy
Open the .psd file of your logo in Photoshop
Save As > Gmail Signature Logo
The logo needs to have extra blank space added to the bottom of it. This is because your text and social media icons will start to adjust to the left under the logo if the logo is not long enough to block the text from left-adjusting.
Step 2 - Remove any Text from Logo (if applicable)
We recommend using just the image portion of your logo. If your logo is only text, then obviously only use text. Below on the left is our logo with text. We used the image on the right of just our logo with no text.
Step 3 - Create Extra Space Below your Logo
Image > Canvas Size
Double whatever height is listed. Our height was 1.5 inches so we made it 3 inches. If your height is 500 Pixels, make it 1,000 pixels
“Relative” is unchecked
Do not touch Anchor
Click OK
Step 4 - Transparent Background (Optional)
You may not need to do this. Here our background was white, so it should be fine, but Transparent is better when available.
Uncheck background and any other Layer leaving only the layer with your logo checked
Save
Step 5 - Export as PNG
File > Export > Export As > Format - PNG > Transparent - Checked > Export All > Save (Just remember where you saved the image!)
Step 6 - Gather your Social Media Icons
Click here for a Free Download of icons. You can purchase the images or give credit to Vecteezy (info on how to give credit is in the download instructions).
Or you can use our images here.
FYI we had to make our own RSS Feed logo. If you choose another style from Vecteezy, you’ll need to make/find a RSS Feed logo if you want one.
Step 7 - Upload Logo and Social Media Icons to Your Website
May require your Developer or upload to an image hosting site
Create a page that is not linked to any of your navigation
Upload the logo
Upload the social media icons separately (if you are not using ours)
Step 8 - Start Building Your Signature in HTML Editor
Go here to the this “What you see is what you get” HTML Editor
Delete the existing code in HTML Editor
Select all code in right-hand box & delete
Copy and paste Wexford’s Code in HTML Editor
Paste wexford code in right-hand box
Now you should see the Wexford signature in the left-hand box
Delete all of the code on right. All text/tables on left will now be blank.
Copy and paste this code in right-hand box of HTML Editor. Code located on Google Doc. Wexford signature will now appear in left-hand box of HTML Editor.
Step 9 - Add and Format your Logo
Go to the webpage that is hosting your Gmail Signature Logo
Right-click on the image and “Copy Image Address” or it might say “Copy URL Address”
Delete the web/image/URL address linking the Wexford logo and paste in your logo image/URL address
This is the code in Red pictured above that was in the Wexford Google Doc
Only delete the text between the quotation marks and paste your link in-between those quotation marks
Format Logo: as you can see, your logo is probably too big. This next part is very nice!
In the left-hand window of HTML editor, select the logo
Now you should see boxes in each corner
Adjust to the proportions you need, and the code automatically adjusts
- Our logo was 244 wide by 300 high
We reduced it by half to 122w by 150h to keep the proportions
Step 10 - Edit the Text
In the left-hand window of the HTML Editor, just add and subtract the text you see fit
Include all info you want, even a physical address if that’s your thing
The HTML updates automatically on the right - pretty cool!
We listed our Website, link to our UX-Ideas which you might call your Blog, and a link to our Email. Other people had links to their bios, etc. So many options!
Step 11 - Edit the Social Media Icons
The social media platforms we use are listed. From top to bottom in the code, the 1st link is Twitter, 2nd is LinkedIn, 3rd is Facebook, and 4th is the RSS
Note: No action needed but an FYI in case you’re wondering, proportions for all Social Media Icons should be 32x32 except for RSS which is 33x33. This is because we had to create our own RSS icon and 33x33 matched the rest provided by vecteezy.
To reorder or change the icons: copy the image/URL address of the icon you want, delete the link between the quotations, paste the image address. You should see it appear in the left-hand window
To remove one or more icons: delete the code between and including <img src=”https://…..” alt=”” div=”” width=”32” height=”32” />.
Deleting one of those deletes 1, deleting 2 of them deletes 2… and so on.
To add one or more icons: copy the code between and including <img src=....... /> and then paste it immediately after one of the ending image tags, a.k.a the />
Hopefully this is straightforward. Requires basic HTML knowledge.
Step 12 - Copy and Paste Visual HTML Info in Gmail Signature
Everything look good in the left-hand window of the HTML Editor? Good. Links will be added in the next section, so don’t worry about that. We didn’t forget.
Select and copy everything in the left-hand window of the HTML Editor
Left-click once in the window
Hold down the left-click and drag arrow to highlight all of the text, logo, and social media icons & copy it
Open up Gmail
Click the Gear Icon in the right hand corner and click settings
Scroll down about ¾ of the way to “Signature”
Note: if anywhere in the signature area it says “Plain text” then compose a new email, cligh the down arrow in the bottom right hand corner of the email, and un-select “Plain text mode” Then reopen the Settings, go back to “Signature” section, and confirm that it no longer says “Plain text”
Gmail > Gear Icon > Settings
ONLY IF signature box says Plain text, then compose an email, click arrow in lower right, and uncheck "Plain text mode"
- Click the Radio button immediately below “No signature”
Paste your visual html in the Signature box
Right-click in the signature box & paste
Optional - we prefer to have the “--” line to separate our email from our signature. If you prefer that too. Uncheck the “Insert this signature before quoted text in replies and remove the ‘--’ line that precedes it.”
Scroll to bottom of page and click Save Changes
You don’t have to save now, but better than losing any info!
In settings, scroll down to the signature box in Gmail. It will be blank. Paste in the visual HTML. Note - Plain Text is not selected, perfect!
Step 13 - Add Links to your Social Media Icons & Text
Go back to Settings and scroll down to signature
Link Social Media Icons
Highlight 1 social media icon
Click the link button in the toolbar in Signature box, to Right of the underlined A
Select “Link to: Web address”
Find your public social media domain, copy and paste it in the box under “To what URL should this link go?
Domain example: our Twitter is https://www.twitter.com/wexfordpartners
Repeat for all Social Media Icons
Link Text
Highlight all of the text to be included in 1 link
Copy and paste the domain just like you did with Social Media Icons
Note: The text you select will be listed now in “Text to display” leave this alone.
Repeat for all text links
Link an Email Address
All steps are same for text link except select the radio for “Email address” not “Web address”
Because it’s an email… not a web address lol
Save changes once everything is linked
Step 14 - Test your Custom Gmail Signature
Compose a new email
Send to an email address outside of the company - either your personal email or someone you know, and preferably outside of Gmail like a personal Hotmail account - or whatever is free & hip these days
Test the following:
Signature looks good before you send it
Go to sent mail and make sure the Signature looks good.
Note: You might have to click the 3 horizontal dotted lines in order to see the signature because Gmail automatically does this to reduce info that is redundant to you
Check the email in your inbox (or your friend’s inbox) on desktop and mobile
Make sure the links click through and it’s formatted how you had it in the HTML Editor
Troubleshooting
Did the Social Media Icons and/or some of your text drop below your icon? Then your logo is not long enough. Make the logo longer, reupload, and repeat the steps. This should fix that issue.
And that’s it! You should now have a cool, custom Gmail signature that will make your brand look professional and be functional with appropriate links. None of that signature as an image BS that doesn’t help you!!
Sharing is Caring!