With the big jump in the mobile market places browsing the internet and the way websites are accessed and utilized have changed. Many of us put our hands in the marketability of our web properties pool by making optimizations and much efforts to be appealing to our visitors and search engines.
So why stop there and miss out on other trends that you may possibly miss out on, decreasing your reach. Mobile is no longer just a fad, its change! Recently I took a step and changed this blog site to support many standards and most recently a step in the mobile direction by adding Apple Icons to the website.
With Apple Icons
Apple Icons are simply the graphics you’ve chosen to represent your site when a user saves your page to their home screen in iOS. Sites without them get a compressed thumbnail of your website and displays it as the icon. The result is typically indistinguishable and unappealing, why do that to your visitors, and it’s not a good user experience.
Outside of something awesome, it allows you the website owner another opportunity to have your brand reach more and engage your audience, just like that of the faveicon when added to traditional web browsers.
Adding the icons are simple, here are some steps you can take today:
- Choose an image – company log, something that is the brand of your site, product, or the market your reaching out to.
- Create it as a square 144 x 144 pixels in .png format – make it look nice
- Upload the image to your website into the root folder or where you store your site images. – by default the root is where the iOS devices will look unless specified
- Add HTML code to your headers before the closing as such </head> tag: <link rel=”apple-touch-icon” href=”your-image-folder/apple-touch-icon.png”>
Precomposed Icons
iOS by default styles your Apple Icon with rounded corners and glossy effect. If this isn’t what you desire you can remove this with some HTML code in your header: <link rel=”apple-touch-icon-precomposed” href=”your-image-folder/apple-touch-icon.png”>
There is a wealth of information out there so don’t be fearful of taking the big dive in, the water is fine.
Link: How to add a website icon to your Home screen
Link: Custom Icon and Image Creation Guidelines
Have fun! and Like me on Facebook