[How to] - Create ios icon for your site

Saturday, June 08, 2013

Hello everyone,

If you follow me on Instagram that you might have probably seen that i have create an icon for my blog that creates a short cut icon/app look alike that you can tap onto and it directly link you to my Home page. 




Initially i was reluctant to even bother to do this ios icon but i guess no harm in perfecting my brand image, and what more to celebrate that milestone by sharing this trick? there is alot of tutorial for this but i think its nice to simplify this step for my reader/ blogger friend just in case they want to have something unique for their own :)


So what you need is basically

1. You blog html/css code editing page

2. You designated image which is re-size to 57x57p and name it [apple-touch-icon.png] **IMPT that you do that because that is how ios detect it.

3. A place to upload the image - photobucket/flickr/picasa etc where you can obtain a URL link to your image

3 simple ingredient with 4 simple steps to follow through:


  • Step 1

Upload your Image to any host image online that is able to generate "url" link to your image.
What i use is Piscasa. But if you still unable to find the URL link, Just right click your image until it say "Open image to new Tab" OR just GFoogle how to retrieve URL image from your host. 


Once you got the link, copy the URL link so that you can retrieve it later


  • Step 2

Load into you html/css code page and find (Ctrl+f) <head>, Which is usually located at the top of you html code.

And type 
<link href='YOUR URL LINK' rel='apple-touch-icon'/> 

before <head>





  • Step 3

Save your html/css coding - it might take a while depending how complicated your html code is.


  • Step 4

Open your Homepage at safari > Click share button (Middle icon on safari) > FInd "Add to Home Screen" and voila the image you upload appear as icon!






This is amazing and best part is that its not permanent and you can change the image anytime. It might not seems important to many others. But it makes it look more polish and perhaps a full "package" looking?

Hope you find this useful and have a great weekend ahead!

You Might Also Like

0 comments

Like us on Facebook

Flickr Images

Follow on Bloglovin