Use the Gmail Logo as Your Gmail iPhone Web Snippet

This solution no longer works, as Gmail has apparently changed the way it handles images pasted directly into the browser. However, commenter Mike mentioned that Google has finally gotten around to making their own icons show up by default. Just visit google.com/m on your iPhone, click the Gmail tab in the top navigation, and add the icon as normal (ie, using the + button in Safari’s bottom menu). You can do this for all Google Apps accessible via the google.com/m page.

Photoshopped version of iPhone with Gmail iconOne of the best things about the way that Apple has let you put web snippets on your iPhone’s home screen is that it really makes web applications seem more like native apps. For instance, there is really very little difference between checking email in your Gmail account and routing your Gmail to the Mail app on the home screen, from a web app vs. native app perspective.

Naturally, the first website that I tried to add to my home screen was the newly redesigned Google.com/m. It was pretty nifty when I noticed that back on the home screen there was a nice icon with the Google logo in it, custom built to resemble some of the native app’s icons. But when I went to add Gmail directly via Gmail.com, the iPhone simply gave me a small screen shot of the actual Gmail interface which didn’t exactly scream “icon” and if it were stuffed inside several other webpage’s icons you wouldn’t be able to easily pick it out. Now, there must be some way for websites to indicate to the iPhone where to find these specialized icons such as Google.com/m uses, but until Google makes an icon for Gmail like they did for Google.com/m, I came up with this work around.

  1. In Photoshop, I created a 320 x 340 pixel gif of the mail icon from the Gmail logo, which I’ve included below. You can simply copy the image to your desktop, or get funky and create your own.
  2. Right click on the image below and choose “View Image” (or your browser’s equivalent) to get the image alone in the browser.
  3. Copy the image out of the new tab. Note: You can’t just right click and choose Copy Image, you need to actually drag your cursor over the image as though you were trying to select it as you would text. This was the case in Firefox at least, I couldn’t test it on IE with my Mac, but it didn’t seem to work in Safari at all. It does work in Safari, it just doesn’t look like it, but drag your cursor over the icon and copy – it’ll be there.
  4. Head over to Gmail and paste the contents of your clipboard into the message of a Gmail body.
  5. Send the email to yourself, then go and check your Gmail in Safari, on your iPhone.
  6. When you open the message, the image inside should fill your whole screen from left to right if you’re holding the phone in the normal position (ie, not widescreen). You may need to slide the screen over to get the whole image on the screen.
  7. Now just hit the little + icon in the bottom menu bar and your iPhone will ask you if you’d like to save this page to the home screen, to which you would reply with a resounding click of the Add button!

If you do it as I did, you should now see the Gmail icon, which when clicked on will take you back to Gmail. It actually probably tries to take you back to the actual message, but luckily Gmail ain’t havin’ that. Instead, it dumps you back into your inbox, though for some reason it seems to send you down the page a little bit.

Gmail Logo

Up Next: The Future of Pittsburgh Public Transportation