Inbound & Digital Marketing Blog

Inbound Marketing Website Design: Apple Icons & Meta Viewport

December 30, 2011, Clarke Bishop

When I was explaining HubSpot's new Marketing Grader, I mentioned gaining 2 points by adding Apple Icons and a Meta Viewport tag. Let me show you how.

Mobile Website Optimization s

How to Create an Apple Icon for HubSpot

An Apple icon is a 57 x 57 pixel graphic that can show up on an iPhone or other iOS device. You can think of this as a giant favicon. What you need to do is:

  • Create the 57 x 57 graphic and upload it to your HubSpot images folder. The graphic can be anything you want, but it's usually a version of your logo. Here's ours:
    Inbound Team Apple Icon
  • In HubSpot, go to Settings -> Website Settings and find your Header HTML box. Whatever you put in this box will show up on all your website pages.
  • Add code that looks like:
    <link rel="apple-touch-icon" href="/Portals/13372/images/inbound-team-apple-icon.png" />
    Of course, you'll have to adjust the link to point to your Apple icon.
    In my case, I put this new code right under my favicon link:
     <link rel="shortcut icon" href="/favicon.ico" />
  • Scroll down and Save Changes.

Now, if one of your site visitors creates a quick link on their iPhone, they'll see your new, branded icon.

How to Setup a Meta Viewport Tag in HubSpot

The Meta Viewport tells the iPhone how to show your page. All you have to do is add one more tag under your Apple icon link: 

  • If you aren't already there, go to Settings -> Website Settings and find your Header HTML box.
  • Right under your Apple icon link, add:
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  • Scroll down and Save Changes.
Depending on your situation, there are a lot of geeky ways you can adjust the Meta Viewport tag to control how your pages display:

How to Enable Mobile Website Optimization in HubSpot

I've assumed that you already enabled Mobile Website Optimization. If not, it's easy:
  • In HubSpot, go to Settings -> Website Settings and find the Mobile Theme Optimization section.
  • Click to select Enable Mobile Optimization.
  • If you want to know how it will look, click the Preview the mobile theme ... link.
  • Scroll down and Save Changes.

Takeaway

It's quick and easy to add Apple Icons and a Meta Viewport tag. And, it get's you two points on your Marketing Grader!

If you have trouble, you're always welcome to leave your questions in a comment below.

Of course, some Inbound Marketers would rather have help with technical items. If that's you, call 800.609.9669 and we'll set this up for you.

Topics: Small Business Marketing, Inbound Marketing, Social Media

CEO's 2016 Guide to Marketing

Recent Posts