• Skip to main content
  • Skip to header right navigation
  • Skip to site footer
  • About
  • Contact
  • Subscribe
  • Advertise
method logo sxs 280x96 wht

methodshop

tech news, reviews & how to's

  • Trending
  • Latest
  • Tech
    • Apps
    • Internet
    • Software
    • Security
    • Games
    • Advertising
  • Life
    • Entertainment
    • TV & Film
    • Music
    • Health & Science
    • Family
    • Social Media
    • Food
    • Style
  • Learn
    • Tutorials
    • Reviews
    • News
      • Business
      • Crime
      • Politics
  • Fun
    • Featured
    • Humor
    • Holiday

Home : DIY & Tutorials : How To Make Your Website an App Icon on Your iPad, iPod Touch or iPhone

website app icons
website app icons

How To Make Your Website an App Icon on Your iPad, iPod Touch or iPhone

Feb 20, 2012 by jayfrankwilson
FacebookTweetPinLinkedIn
Reading Time: 2 minutes

MethodshopIf you are in sales and marketing, or run a website, then you’ll love this trick. Ever since Apple iOS 1.1.3, users have been able to add Home Screen Bookmarks to their iOS devices, including the iPad, iPhone and iPod Touch. These bookmarks look just like Apple App icons and allow you to pull up a page on your website the same way you would open an Apple iOS app.

Pretty cool right? It gets better! You can even customize the icon with a picture or logo. You can see an example of a MethodShop app icon in the image on the right (4th row, 4th column). This Home Screen Bookmark opens up https://methodshop.com when you tap on it.

Creating a custom bookmark icon is a great idea if you find yourself showing off your website in meetings or at conferences to potential clients and business partners. In this tutorial, we’ll first show you how to create a Home Screen Bookmark, then we’ll walk through the steps required to customize it.

 

01) Pull up your website using Apple’s Safari web browser on your iPhone, iPod Touch or iPad. Then tap on the little icon in the middle of the box with an arrow coming out of it [pictured below].

How To Add A Custom Website Bookmark To Your Iphone, Ipod Touch Or Ipad Home Screen [Tutorial]

 






02) A screen with a bunch of buttons will appear including: Add Bookmark, Add to Reading List, Add to Home Screen, Mail Link to this Page, Tweet and Print. Tap on Add to Home Screen button.

Photo.png

 

03) A crappy screengrab will automatically be added as your icon image and you’ll be asked to type in a name for your bookmark. We suggest keeping the name short and sweet. If you’re happy with your crappy screengrab icon, then congrats! You’re done. Have a nice day. But if you think your screengrab icon looks like garbage and you want to make a better or custom icon, then keep reading…





How To Add An Icon To Your Iphone'S Home Screen

 

How To Make An Ipad Or Iphone App Icon That Opens Your Website [Tutorial]04) Here’s a little trick on how to customize your bookmark icon. Create a 57×57 pixel PNG file of your, name it “apple-touch-icon.png” and then upload it to the root directory folder of your website. As long as this file is on your web server, then any iOS device (iPad, iPhone or iPod Touch) will use this image as its app icon. You of course will need FTP access to your web server in order to upload this PNG file. Feel free to forward this tutorial to your creative and IT teams if they have any questions.

How To Customize Your Website Bookmark For Ios Devices

Also, here’s a layered TIF file that you can use as a template in Adobe Photoshop or GIMP (free) to make your 57×57 PNG bookmark icon.

How To Make An Ipad Or Iphone App Icon That Opens Your Website [Tutorial]

 05) If your server admins won’t allow you to add the “apple-touch-icon.png” file to the root level of your web server, then you can ask them to add this line of code to your site template. This code will tell Apple iOS devices where they can find the bookmark image elsewhere on your server.

<link rel=”apple-touch-icon” href=”https://methodshop.com/images/ios-icon.png” />

06) Once the “apple-touch-icon.png” is uploaded, then you can repeat the steps above and re-add your bookmark to your iOS device. The final result should look something like this:

How To Add A Custom Website Bookmark To Your Iphone, Ipod Touch Or Ipad Home Screen [Tutorial]How To Add A Custom Website Bookmark To Your Iphone, Ipod Touch Or Ipad Home Screen [Tutorial]

07) That’s it! Congrats! Go grab yourself a beer (and us one too!)

Related Articles
  • How To Save Your iPod or iPhone from a Toilet [tutorial] (methodshop.com)
  • iPad Game: Game for Cats (methodshop.com)
  • Kid Slaps Brother with His iPad (methodshop.com)
  • How To Download Discontinued iPod Click Wheel Games [tutorial] (methodshop.com)
Minted Methodshop


FacebookTweetPinLinkedIn
Category: DIY & Tutorials, Software Tag: Apple, AppStore, Favicon, Home Screen Bookmark, iOS, iPad, iPhone, ipod touch, Mobile, Safari
Previous Post:5 Reasons to Use MySpace Music Player
Next Post:How To Rip Adele’s Music Videos off YouTube and Convert Them for iTunesadele

Reader Interactions

Comments

  1. Kingsley Ryan

    Mar 7, 2013 at 6:50 AM

    Amazing, so easy to do. Fantastic. Thank you.

  2. Luis Estrella

    Nov 6, 2012 at 1:56 AM

    WOW!!
    It really works
    Do you know the same trick but for android?

Leave a Reply

Your email address will not be published. Required fields are marked *

Sidebar


Popular Posts

nbc chimes feature scaled

The Surprising Story Behind The NBC Chimes

google naked

7 Pictures Of Naked People Captured By Google’s Cameras

dmas top usa

Top 200 Nielsen DMA Rankings (2023) – Full List

lg tv disable home screen scaled

How To Change The Default LG TV Home Screen To Live TV

new york city skyline

The 21 Best Live Streaming New York City Webcams

Caddyshack Quotes

30 Famous Caddyshack Quotes That’ll Make You Laugh

rooftop woman

10 Naked Sunbathers Busted By Google Earth

A mom laughing at a smartphone and tablet

250+ Funny Dirty Mom Jokes That Will Make Everyone Laugh (Even Mom)! (NSFW)

Angry Irish Woman

30 Dirty Irish Pick Up Lines That Will Probably Get You Slapped

office space quotes 1

The 30 Best Office Space Quotes (How Many Do You Know?)


Categories

Advertising Apps Business Crime DIY & Tutorials Entertainment Family Featured Food Games Health & Science Holiday Humor Internet Learn Life Music News Politics Reviews Security Sex Social Media Software Style Technology Travel TV & Film Uncategorized



Man using a laptop on a park bench at night

Upgrade Your ChatGPT Prompts With These 12 Smart Engineering Tricks

Here are some example ChatGPT prompts and tips to help you get the most out of your chatbot sessions.


Apple's Ducking Autocorrect Problem

Apple Is Finally Fixing Its Ducking Autocorrect Problem

Apple announces plans to finally fix its ducking autocorrect problem for iPhone users.


Recent Posts

new york city skyline

The 21 Best Live Streaming New York City Webcams

Man using a laptop on a park bench at night

Upgrade Your ChatGPT Prompts With These 12 Smart Engineering Tricks

2001: A Space Odyssey

10 Reasons Why 2001: A Space Odyssey Is The Most Important Sci-Fi Movie Ever Made

Apple's Ducking Autocorrect Problem

Apple Is Finally Fixing Its Ducking Autocorrect Problem

goonies trivia white logo

Fun Goonies Facts – 50 Things You (Probably) Didn’t Know About The Goonies

artificial intelligence ai humanoid

Only 14% of U.S. Adults Have Tried ChatGPT. Have You?

woman wearing makeup and a cute red, white, and black aztec top

The History Of Makeup And Its Evolution Through History

office space quotes 1

The 30 Best Office Space Quotes (How Many Do You Know?)

A soldier in a foggy valley from the video game Conflict Desert Storm.

Conflict Desert Storm: How To Play This Classic Combat Game Today

Woman experiencing sidewalk rage on a busy croded city sidewalk.

‘Sidewalk Rage’: Yes, It’s A Real Issue – Here Are 5 Easy Coping Techniques

Jump to comments

About

MethodShop’s mission is to entertain, inform, and sometimes gross you out. MethodShop has affiliate relationships, so we may get a small share of the revenue from your purchases. Items are sold by the retailer, not by us. All prices are subject to change.

Follow

  • Facebook
  • Twitter
  • Instagram
  • YouTube
  • Pinterest

Trending Posts

nbc chimes feature scaled

The Surprising Story Behind The NBC Chimes

google naked

7 Pictures Of Naked People Captured By Google’s Cameras

dmas top usa

Top 200 Nielsen DMA Rankings (2023) – Full List

Latest Posts

new york city skyline

The 21 Best Live Streaming New York City Webcams

Man using a laptop on a park bench at night

Upgrade Your ChatGPT Prompts With These 12 Smart Engineering Tricks

2001: A Space Odyssey

10 Reasons Why 2001: A Space Odyssey Is The Most Important Sci-Fi Movie Ever Made

MethodShop Animated Zoom Icon
  • About
  • Submit
  • Disclaimer
  • Privacy Policy
  • Contact
  • Subscribe
  • Store

Copyright © 2023 MethodShop · All Rights Reserved