iPhone Bookmark Icon Resolution WordPress
- SOLVED
HI,
I am quite familiar with how to assign an iPhone bookmark icon to a website. Either by (1) placing the icon in the root directory, or (2) using code .... but I’m having an issue you might be able to shed some light on. I have even used method (3) of using the iPhone Control Panel plugin. Still, no luck with the issue I'm having !!
FYI … I’m using the SAME “apple-touch-icon-precomposed.png” file in BOTH websites as a test.
[[LINK href="http://www.rkadia.net"]]<strong>Website A:</strong>[[/LINK]] The file is in the root directory and nothing else is on the domain, so simply in stand-by. The <strong>bookmark looks perfect</strong> and hi-res on the iphone.
[[LINK href="http://www.rezak.com"]]<strong>Website B: </strong>[[/LINK]]This is a WordPress based website. The file is again in the root directory. HOWEVER, for this one, the <strong>bookmark is displayed at a lower resolution !! </strong>No idea why or how?
<strong>SCREENSHOT:</strong> http://www.rkadia.net/iPhone_Bookmark_Resolution.PNG
Any idea what is going on?
Thanks,
Reza
Answers (1)
Pali Madra answers:
Hi Reza,
I'm sure you have the icon image with you. Upload the image to the image to the theme directory of the theme you are using. Lets say you named the image iphone-icon.png.
1. Open the header.php file in your theme and add the following code
"<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/iphone-icon.png" />". This line of code should be between the head tags (<head> and </head>)
2. Save the file header.php
3. In case you updated header.php offline then upload the page by replacing the old header.php.
4. Now access the website using the iPhone and bookmark it.
5. You should see the icon you uploaded.
Please let me know if this works or not.
You can also use a plugin for the same which is available at http://irama.org/web/cms/wordpress/plugins/custom-app-icons/.
If you want I can do this for you.
Thanks and Regards,
Pali Madra
RezaK comments:
Hi Pali,
Thanks for the proposal ... before getting to implement your proposal, I did some more testing to find the root cause as it seems very unusual yet basic.
It seems when I activate the WPtouch plugin, it causes the icon to be degraded since it probably does some other processing of the icon. When I disable the WPtouch, the bookmark icon is displayed perfectly in the hi-res mode... as it should be.
Any thoughts on this?
Thanks.
RezaK comments:
Hi,
Although I have found the source and resolved it through modifications to WPtouch plugin, Pali's response is in fact a correct solution for someone having the standard bookmark display problem ... so with that said, I will approve payment. Thanks for the assistance.