Hola, fellow Bloggers! This is a tutorial on how to create an apple touch icon for your website or blog. This tutorial is for my fellow iPhone users...sorry Android fans!
The Tutorial Objective:
To easily access your blog or website from your iPhone home screen instead of typing the url in Safari.
Step One: Create your Apple Icon
Using your favorite picture editor or graphic design software such as PicMonkey or Photoshop, create an image that 129X129 pixels in size.
I have used Photoshop to create my image and this is the image I will use for apple icon for my blog.
Step Two: Uploading your Image
Upload your image to your favorite image hosting site. I use Photobucket for my images.
Copy the direct image link for you picture and paste somewhere where you can copy it again.
It should look like this:
Step Three: Creating the Code
Replace highlighted area with your direct image link.
<link href='direct-image-link' rel='apple-touch-icon'/>
Step Four: Implementing the Code
Copy the code you just created and and paste right before the </head> tag in your blog's or website's html.
Hint: to find the </head> tag, type CRTL + F (or Command + F for Mac users) to and then type </head> to search for it. Press save.
Step Five: Getting the Apple Icon on your Phone
Go to your blog or website on your phone though Safari. Then add your blog or website to your home screen.
Step 6: Voila!
Your new Blog or Website App should appear on your iPhone!
For More Blog Tutorials, click here!