How To Change Web Clip Icons

Today there is an app for most of the things at least for iPhone. But yet there might me some stuff you care only accessible from a website. For such things iPhone has ability to create shortcuts to your home screen. So far so good. The bad thing is many of the websites do not care about us saving their link to home screen. Thus they don't add a tiny attribute to give us good looking icons.

To me that website was T-Mobile's website. It has a very beautiful mobile website accessible from beta.my.t-mobile.com but not that good mobile app. Thus I decided to replace it with a website shortcut. But safari gave me this ugly icon. iPhonenewzealand.co.nz  but it wasn't working probably due to changes on iOs 7. There are plenty of solutions even one from apple for developers to add an apple-touch-icon attribute but I don't have access to T-Mobile's website so those were irrelevant.
 Then I spend couple of hours online to find how to change those icons. But I couldn't find anything good. The closest was an article on

Long story short I discovered this

Steps
1. Go to Settings>Safari>Advanved  and enable Web Inspector

2. Open website you want to bookmark to home screen and let your phone to be active.
3. Connect your phone to your mac with usb cable.
2. Open safari from your mac. (I am not sure it is possible with windows)
3. Go to Develop>"Your name here"'s iPhone and pick your website (if you don't have develop tab on your menu bar check this link to see how to activate it)

4. Right click to html tag and click edit as html

5. Add following code to proper place. (not inside a script) it is probably a good idea to add it right after other <link> tags.
<link rel="apple-touch-icon" href="the address of the icon goes here"/>

6. Click anywhere to make code not editable.
7. On your hone Click This icon (share icon)

8. Click add to Home Screen. You will have a good looking icon at your home screen
9. Enjoy