{"id":3500,"date":"2023-11-18T19:37:00","date_gmt":"2023-11-18T19:37:00","guid":{"rendered":"https:\/\/72.249.108.218\/~fkluioprde\/how-to-create-an-iphone-or-android-home-screen-icon\/"},"modified":"2026-10-06T14:24:39","modified_gmt":"2026-10-06T19:24:39","slug":"create-an-iphone-or-android-home-screen-icon-for-your-website","status":"publish","type":"post","link":"https:\/\/rt1.temporary-access.com\/~csatestsite\/create-an-iphone-or-android-home-screen-icon-for-your-website\/","title":{"rendered":"How to Create an iPhone or Android Home Screen icon"},"content":{"rendered":"

You may want to make it easier for regular site visitors to get to your website faster and easier. Following the steps below you can create a home screen phone icon that your site visitors can download to their phones that will create a direct link to your website\u2019s home page from your visitor's iPhone<\/a> or Android phone.<\/p>\n

Modify Your Logo<\/h1>\n

Before you can create the shortcut you must first modify your icon so that it is properly formatted for the space.<\/p>\n

Here is our logo:<\/p>\n

\"\"<\/p>\n

Here is our phone icon:<\/p>\n

\"\"<\/p>\n

STEP 1 \u2013 Create Your Phone Icon<\/h3>\n

Create a 158 x 158 image on your favorite image editor (we use Adobe Illustrator but Adobe Photoshop works great too). If you don\u2019t have a photo editor there are quite a few free online editors available as well, just \u201cGoogle\u201d free online image editor. Make sure that it\u2019s a simplified version of your logo. It needs to be easy to see and not too crowded.<\/p>\n

Step 2 \u2013 Save Your Phone Icon<\/h3>\n

Save your creation as a .png file to a location on your server. Most sites will make use of an \/images folder, which is always a good location. Remember to name it something relative like apple-touch-icon.png.<\/p>\n

Step 3 \u2013 Write it Down<\/h3>\n

Write down the path to your image and check that your path is correct by typing it into the browser. You should see your new image now. So, for example, if your website is https:\/\/www.mywebsite.com and you placed your new phone icon in the images folder then you should be able to type in https:\/\/mysite.com\/images\/apple-touch-icon.png and view your image. Now copy and paste that path to a text document.<\/p>\n

Step 4 \u2013 Add the Tag<\/h3>\n

Now you just need to add a simple little line of code to the index.php of your site to let phones know that you want it to use your icon whenever someone bookmarks your site or saves your site to their Home screen. This is the code:<\/p>\n

<link rel=\u201dapple-touch-icon\u201d sizes=\u201d152\u00d7152\u2033 href=\u201dhttps:\/\/mysite.com\/images\/apple-touch-icon.png\u201d\/><\/p>\n

You are going to place this code just above the <\/head> tag on your website\u2019s main page. IMPORTANT!!! remember to change out the path (highlighted in yellow) to the image path you wrote down in the step above.<\/p>\n

Step 5 \u2013 Add the Home Screen Phone Icon to Your Phone<\/h3>\n

Just pull open your website on your phone, and click the share icon\u00a0 \"\" . From the share window select the Add to Home Screen icon\u00a0 \"\"\u00a0. Then change the title, if you\u2019d like, and click \u201cAdd\u201d.<\/p>\n

That\u2019s it! Pretty easy, huh?<\/strong><\/p>\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

Have you ever noticed that when you save some websites to your phone’s Home screen that some websites have cool icons while others either use a mashed up screen shot or just plain placeholder image? Wouldn’t it be cool if your viewers could download a direct link to your website and place it on their home screens? Well this tip is going to show you how to do that.<\/p>\n

If you follow these steps you can create and link to a cool icon for your website and learn how to download it to your phone’s home screen!<\/p>\n","protected":false},"author":9,"featured_media":5115,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"dipi_cpt_category":[],"class_list":["post-3500","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"_links":{"self":[{"href":"https:\/\/rt1.temporary-access.com\/~csatestsite\/wp-json\/wp\/v2\/posts\/3500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rt1.temporary-access.com\/~csatestsite\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rt1.temporary-access.com\/~csatestsite\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rt1.temporary-access.com\/~csatestsite\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/rt1.temporary-access.com\/~csatestsite\/wp-json\/wp\/v2\/comments?post=3500"}],"version-history":[{"count":2,"href":"https:\/\/rt1.temporary-access.com\/~csatestsite\/wp-json\/wp\/v2\/posts\/3500\/revisions"}],"predecessor-version":[{"id":8233,"href":"https:\/\/rt1.temporary-access.com\/~csatestsite\/wp-json\/wp\/v2\/posts\/3500\/revisions\/8233"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rt1.temporary-access.com\/~csatestsite\/wp-json\/wp\/v2\/media\/5115"}],"wp:attachment":[{"href":"https:\/\/rt1.temporary-access.com\/~csatestsite\/wp-json\/wp\/v2\/media?parent=3500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rt1.temporary-access.com\/~csatestsite\/wp-json\/wp\/v2\/categories?post=3500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rt1.temporary-access.com\/~csatestsite\/wp-json\/wp\/v2\/tags?post=3500"},{"taxonomy":"dipi_cpt_category","embeddable":true,"href":"https:\/\/rt1.temporary-access.com\/~csatestsite\/wp-json\/wp\/v2\/dipi_cpt_category?post=3500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}