{"id":2241,"date":"2010-07-02T10:13:48","date_gmt":"2010-07-02T20:13:48","guid":{"rendered":"http:\/\/raphaellowe.com\/portal\/?p=2241"},"modified":"2010-07-02T10:14:24","modified_gmt":"2010-07-02T20:14:24","slug":"creating-an-iphone-icon-for-your-website","status":"publish","type":"post","link":"https:\/\/raphaellowe.com\/portal\/creating-an-iphone-icon-for-your-website\/","title":{"rendered":"Creating an iPhone icon for your website"},"content":{"rendered":"<p>I&#8217;m trying to avoid being Apple-centric&#8230;but with the release of the iPhone4 just last week, it&#8217;s hard to avoid at least some kind of conversation about it. I actually saw my first iPhone4 in hand yesterday&#8230;.a associate of mine actually braved that long line to get one. I must say that Retina display is <em>pretty pretty pretty nice<\/em>.<\/p>\n<p>OK, enough stroking Steve Job&#8217;s ego. Here&#8217;s a recent little thing a friend of mine asked me to do the other day &#8212; she asked me how to create a custom icon for her website on her iPhone. There was another local company charging people money for this service saying how they&#8217;re the &#8220;<em>only people in town who did this&#8230;.<\/em>&#8221; Pfffffffffffffffft.<\/p>\n<p>Turns out it&#8217;s incredibly easy&#8230;honestly this will take you less than 2 minutes to do it. Here&#8217;s what you do:<\/p>\n<p>Open your favorite graphic program and make a new file that&#8217;s <strong>45&#215;45 pixels<\/strong>. Keep it 72dpi if you like&#8230;.possible the new retina displays on the new phones can handle a higher resolution but I don&#8217;t have one to test <em>(buy me one?)<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2242\" title=\"apple-touch-icon\" src=\"http:\/\/raphaellowe.com\/portal\/wp-content\/uploads\/2010\/07\/apple-touch-icon.png\" alt=\"\" width=\"45\" height=\"45\" \/><\/p>\n<p>Now create your artwork&#8230;.doesn&#8217;t need any further flourish. You don&#8217;t need to round the corners, nor do you need to put any kind of reflective layers on it either. The iPhone will do that automatically.<\/p>\n<p>Now save your file as a .PNG file and name it &#8220;<strong>apple-touch-icon.png<\/strong>&#8220;.\u00a0 Upload it to the <strong>root<\/strong> directory of your website.<\/p>\n<p>That&#8217;s really it. See?\u00a0 2 minutes maybe?\u00a0 5 minutes tops?<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2243\" title=\"iphonephoto2\" src=\"http:\/\/raphaellowe.com\/portal\/wp-content\/uploads\/2010\/07\/iphonephoto2.png\" alt=\"\" width=\"320\" height=\"480\" srcset=\"https:\/\/raphaellowe.com\/portal\/wp-content\/uploads\/2010\/07\/iphonephoto2.png 320w, https:\/\/raphaellowe.com\/portal\/wp-content\/uploads\/2010\/07\/iphonephoto2-200x300.png 200w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/p>\n<p>The next time you open up your website in the iPhone Safari browser, click on the little plus &#8220;<strong>+<\/strong>&#8221; icon and select &#8220;<strong>Add to Home Screen<\/strong>&#8220;. Viola! Your new icon should turn up. Needless to say anyone who bookmarks your site on their iPhone (<em>should you be so lucky<\/em>) will have your new icon appear on their phone.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2244\" title=\"iphonephoto\" src=\"http:\/\/raphaellowe.com\/portal\/wp-content\/uploads\/2010\/07\/iphonephoto.png\" alt=\"\" width=\"320\" height=\"480\" srcset=\"https:\/\/raphaellowe.com\/portal\/wp-content\/uploads\/2010\/07\/iphonephoto.png 320w, https:\/\/raphaellowe.com\/portal\/wp-content\/uploads\/2010\/07\/iphonephoto-200x300.png 200w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/p>\n<p style=\"text-align: center;\">\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m trying to avoid being Apple-centric&#8230;but with the release of the iPhone4 just last week, it&#8217;s hard to avoid at least some kind of conversation about it. I actually saw my first iPhone4 in hand yesterday&#8230;.a associate of mine actually braved that long line to get one. I must say that Retina display is pretty [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,8,134],"tags":[306,305,145],"class_list":["post-2241","post","type-post","status-publish","format-standard","hentry","category-howto","category-business","category-webdesign","tag-graphic","tag-icon","tag-iphone"],"_links":{"self":[{"href":"https:\/\/raphaellowe.com\/portal\/wp-json\/wp\/v2\/posts\/2241"}],"collection":[{"href":"https:\/\/raphaellowe.com\/portal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/raphaellowe.com\/portal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/raphaellowe.com\/portal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/raphaellowe.com\/portal\/wp-json\/wp\/v2\/comments?post=2241"}],"version-history":[{"count":5,"href":"https:\/\/raphaellowe.com\/portal\/wp-json\/wp\/v2\/posts\/2241\/revisions"}],"predecessor-version":[{"id":2249,"href":"https:\/\/raphaellowe.com\/portal\/wp-json\/wp\/v2\/posts\/2241\/revisions\/2249"}],"wp:attachment":[{"href":"https:\/\/raphaellowe.com\/portal\/wp-json\/wp\/v2\/media?parent=2241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/raphaellowe.com\/portal\/wp-json\/wp\/v2\/categories?post=2241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/raphaellowe.com\/portal\/wp-json\/wp\/v2\/tags?post=2241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}