Create a custom iOS Bookmark icon

joomlaBy default, iOS will use a screenshot of your website to create a bookmark icon for your Joomla website.  Wouldn't it be nice to create your own icon, and make your web application look like an iOS application?  This article describes the process.

Create your icon

Start by using your favourite graphics program to create a square icon 144 x 144 pixels.  Call it arbitrarily iOSbookmark.png, and save it in your current template's images folder.  Here's a helpful article describing some different size iOS icons, that may be applicable for you.



Now you need to edit the index.php file in your current template folder to include the following line inside the header section (you can add it just before the </head> tag)

<link rel="apple-touch-icon" href="/templates/yourtemplate/images/iOSbookmark.png" />

iOS will automatically add gloss and rounded corners to your image, in line with the other iOS icons.  Alternatively if you'd prefer your own style, you can add the following line instead...

<link rel="apple-touch-icon-precomposed" href="/templates/yourTemplate/images/iOSbookmark.png" />


Thanks for visiting.