Monday, December 13, 2010

Create a custom iPhone icon for your WordPress site or blog

With the ever increasing number of people accessing the Internet using iPhone and iTouch it has become important to have customized icon for your website or blog to build brand awareness.

Fortunately, for those who use WordPress as a CMS or blogging platform, there are a couple of easy ways create a customized icon for iPhone and iTouch.

Option 1 - Manually create a customized iPhone or iTouch

  1. Create a nice looking PNG icon (45 pixels x 45 pixels). Save it on your hard disk.
  2. Upload the PNG icon file into the root of folder of the active theme.
  3. Edit the header.php file (you can use the WordPress editor in the administation panel or edit the file offline using your favorite PHP editor).
  4. Add the following code to the header.php file
    <link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/iphone-icon.png" />
    Make sure this is added between the head tags in the header.php file.
  5. Upload or save the file
  6. Access your website or blog using iPhone or iTouch.
  7. Bookmark the website. Viola you have a customized iPhone icon for your website. 

Option 2 - Use a Custom App Icons Plugin

For those who are looking for simpler solution there is a plugin which creates a customized iPhone and iTouch icon for your WordPress website or blog. The plugin is called Custom App Icons plugin.

  1. Create an PNG icon file (45 pixels by 45 pixels).
  2. Upload the PNG file to the images directory in wp-content
  3. All you need to do is download the plugin manually and upload the plugin to the plugins folder in wp-content folder. You can also use the search and install plugin option available in the adminstration area of a WordPress install. 
  4. Activate the plugin as normal plugins
  5. Go to the settings menu and select the "custom app icons"
  6. Add the path to the image you uploaded in the second step
  7. Optionally you can select use "use avatars as app icons for author pages" if you want the icon to be different when a user bookmarks the author profile page.

These are simple steps which even a novice can complete but it lends a professional and quality look to your website or blog.

Reference: http://wordpress.org/support/topic/iphone-custom-site-icon-question?replies=9

No comments:

Post a Comment