Add Clickable Image in Email Signature on Mac Mail App [Hyperlink]

Complete tutorial guide on How to add an image to an email signature in Apple Mail. Just click on the image to open the web address from your Image Email Signature on the Mac Mail app. That means here I gonna show you how to add Clickable Image in Email Signature, Clickable Image should be your Profile photos, Company logo, or Social media icon. That’s made your Email conversation More Informative, stunning, Beautiful, and very easy.

To Add an Email signature on the Mac mail app, just use an HTML Email template, and Give a Hyperlink to the image that you want to open when the user clicks on that.

IN THIS ARTICLE

Note: If you don’t have any technical knowledge then just follow the below steps, otherwise, you can create your own HTML template for Signature and modified as you wish. some online free services are also available to download Free HTML Signature for Email, Modify that and use it for personal use.

How to add images with hyperlinks to your Mac Mail signature

add a clickable link to signature without image is easy, Given in Part 2.

Part 1: Add images & links to Mac Mail signature

To add an Email Signature with Hyperlink Image, We must use HTML Signature, Otherwise, Mac Mail signature image links do not work while we use the traditional way [Select image and Give link]. Follow the below step..

Open Mail app on Mac.
From Top Mac Menu > Mail > Preferences
Select Signature Tab > iCloud > Click on the Plus icon to add. new Signature, and Give a name to signature. here I am giving an “HTML Profile signature” and Hit the Return to Save a Blank Signature.
- Now add HTML Signature template in .mailsignature file under system generated file. Follow the below steps…
Open Finder on Mac, from top Mac menu, Go > Go to Folder.
and enter “~/Library/” and click on Go.
Now, Click on Mail folder > V8 [Version folder] > MailData > Signatures.
here’s a list of Signature files, Open Recently Generated file in TextEdit, Right-click on File > Open With > Textedit.
Remove Code and add a New HTML Template code given in the next step.
Select the Body tag, and Replace it by pasting below HTML code. [Example: Apple Mail HTML Signature embed image]

<BODY style="font-size: 10pt; font-family: Arial, sans-serif;">
<table style="width: 450px; font-size: 10pt; font-family: Arial, sans-serif;" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td style="font-size: 10pt; font-family: Arial, sans-serif;; border-right: 3px solid; border-right-color: #2196f3; width:180px; padding-right: 10px; vertical-align: top;" valign="top"><img  src="https://www.postplanner.com/hs-fs/hub/513577/file-2886416984-png/blog-files/facebook-profile-pic-vs-cover-photo-sq.png?width=250&height=250&name=facebook-profile-pic-vs-cover-photo-sq.png" alt="photograph" width="120" border="0" style="border:0; height:auto; width:120px"/> <p style="margin-top:32px; margin-bottom:0; line-height:1.0"><strong><span style="font-size: 12pt; font-family: Arial, sans-serif;; color:#2196f3;">Jay Patel<br></span></strong><span  style="font-family: Arial, sans-serif;; font-size:9pt; color:#000000;">{Co-Owner & Co-Founder}</span></p> </td><td valign="top"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td style="font-size: 10pt; color:#444444; font-family: Arial, sans-serif;; padding-bottom: 5px; padding-left: 30px; vertical-align: top; line-height:1.3" valign="top"><span style="color: #000000;"><strong>M</strong></span><span style="font-size: 9pt; font-family: Arial, sans-serif;; color:#000000;"> +91456235256<br></span><span style="color: #000000;"><strong>P</strong></span><span style="font-size: 9pt; font-family: Arial, sans-serif;; color:#000000;"> +896531112<br></span><span style="color: #000000;"><strong>E</strong></span><span style="font-size: 9pt; font-family: Arial, sans-serif;; color:#000000;"> [email protected]</span></td></tr><tr>
<td style="font-size: 10pt; color:#0079ac; font-family: Arial, sans-serif;; padding-bottom: 5px; padding-left: 30px; vertical-align: top; line-height:1.3" valign="top"><strong style="font-family: Arial, sans-serif;; font-size:9pt; color:#000000;" >howtoisolve</strong><br><span  style="font-size: 10pt; font-family: Arial, sans-serif;; color: #000000;">2345-Vlina Base, New York<br /></span><span  style="font-size: 10pt; font-family: Arial, sans-serif;; color: #000000;">USA</span></td></tr><tr><td style="font-size: 10pt; font-family: Arial, sans-serif;; padding-bottom: 5px; padding-top: 5px; padding-left: 30px; vertical-align: top; color: #0079ac;" valign="top"><a href="https://howtoisolve.com" target="_blank" rel="noopener" style="text-decoration:none;"><strong style="font-size: 9pt; font-family: Arial, sans-serif;; color: #2196f3;">{wwww.howtoisolve.com}</strong></a></td></tr><tr ></tr></td></tbody></table></tr><tr ><td colspan="2" style="padding-top:20px"><a href="howtoisolve.com" target="_blank" rel="noopener"><img border="0" src="https://www.howtoisolve.com/wp-content/uploads/2020/11/Howtoisolve-Logo-Large-Size.png" alt="Banner" style="max-width:450px; height:auto; border:0;"></a></td></tr></tbody></table></BODY>

Now, From the top Top File name, click on it and select the Locked checkbox, to Save and apply changes.
Now, Quit the mail app and Re-Launch Mail app on your Mac.
Compose a new email, Select the Recently added HTML Email template. and see the Image with a hyperlink added to the signature.
That’s it.
I am sending it to another mail address, and I got a Signature image with a link. here’s the below example.

if you are looking for add clickable link to email signature on mac mail app then follow the simple steps below. You don’t need to add HTML Template.

Part 2: How do I add a Clickable link to my Email Signature on Mac?

Open Mail app on Mac.
From Top Mac Menu > Mail > Preferences.
Select iCloud > Click on the Plus icon to add. new Signature, and Given a name to signature. here I am giving the name “Hyperlink in signature” and Hit the Return to Save a Blank Signature.
Now, Type some text to apply hyperlink on that, Select the text, and from the top mac menu, Edit > Add link… or Use Command + K Shortcut
Type Url or enter Hyperlink Address in the box and click on ok to save.
While you compose a new email, Select the signature from the dropdown Menu and Add Signature with a link on mac mail app.
That’s it.

Part 3: Add Hyperlink to Image in Mac Mail Body

Earlier in this tutorial, we have seen how to add Hyperlink in the Signature image and How to add link Signature as well. But apart from the Signature, we can also use Hyperlink in the image that we are sending or composing in the Mail body on the Mac mail app. So, Follow the below easy steps to add Hyperlink to Image in Mac Mail Body and Make the Attached images are clickable.

Compose a new Mail on Mac mail app, then Copy and paste your image into Mail body or Upload attachment from the Email compose tool.
Once you place the image in the Mail body, Select the image that you want a hyperlink on it.
And From the top Mac menu, Click on the “Edit > Add Link” or “Command + K” shortcut to add a link to the image.
Add web URL or web address and click on OK. now, send the email. and the Receiver will get the email with Hyperlink on Image.
That’s it. Just click on Mail body image to open the attached link. Repeat the same steps to add more images and links to it as well.

How to use HTML for email signature on Mac Mail

To add a new HTML Signature is the best option to make a stunning and informative signature add-in email. That’s a fast and easy process. First, you have to Generate HTML code for Signature online, it’s free. Then Copy the code and Past in the Apple Mail signature option as shown in the steps below.

You have to know We can’t Create HTML Email Signature on the Mail app like to Create Email Signature on Outlook Mac mail app. So, we have to generate online from HTML Signature Generator. Let’s follow,

First go to this HTML Signature generator online. Fill in all the details that you want. with Link, Image with Link, Social Profiles URLs, and Contact number as more.
Now, Select Preview of HTML Signature design on the right side of the window. Now, Click on the Button “Apply Your Signature“.
here’s the option for “copy” the Code to the clipboard. Click on it.
Now, Back to the apple mail app on Mac, From top Menu Mail > Preferences.
Signatures > Click on [+] Button to add Signature. Paste the code and de-select “Always match my default message font” [Off].
Now, your Email Signature will see in the exact preview.

Apple Mail HTML Signature Not Working

By default, the Apple Mail app doesn’t allow you to paste and get a preview of the HTML signature that you copied in the Signature box. But if you keep the selected option “Always match my default message font” then you are able to see and use HTML Signature on the Mail app on Mac.

Open mail app on Mac, From top menu Mail > Preferences > Signatures > Click on Plus button to add Signature > paste the code and make sure “Always match my default message font” option is Uncheck [Off].

Also, See the Below video tutorial on how to follow the step below,

Also Helpful: How to Create Signature on Outlook Mac

How to Short & Filter Mail on Mac

Send me the message in the comment box for more customizations of Email signature on your Mac Mail app.