DM Blog

Back in January I mentioned that I’m setting custom icons for all my blog posts bookmarked in iOS:

Custom iPhone Icons

I’ve had a custom iPhone icon for my blog (and for DanielMenjivar.com) for years, but now all articles will have their own individual icons too. Bookmark an article and save it to the home screen on your iOS device (like an iPad or an iPhone) to see it in action. The homepage has its own icon, and every article falls back to a default icon if I’ve been too lazy to create one for that article, but it really isn’t that much work… it’s just a single 256x256 image that I create for every article and I use it everywhere on the site, Twitter uses it when embedding summaries of my articles into tweets, it’s the same image for the iPhone icons, and I also use it in my email updates to subscribers. One image, many uses.

But how simple is it to implement? Very simple, actually.

In the header.php file of your theme, before the closing </head> tag, add:

<link rel="apple-touch-icon-precomposed" href="ICON URL HERE" />

Using WordPress, there are many different ways to get the attachment url for the image you want to use… In my case, whenever I publish a new article, I also upload an image 256x256 and set it as the featured Image in WordPress (formerly known as "post thumbnail"). So my header.php looks like this:

<?php
if (is_single()) :
	$article = Article::factory($post);?>
	<link rel="apple-touch-icon-precomposed" href="<?php
		echo $article->thumbnail();?>" /><?php
endif;

You may have noticed that I’m using an Article class which doesn’t exist in WordPress. that’s because I’m extending the global $post object and using this everywhere in my custom plugin and theme. (Actually, the WP_Post class is defined as final and therefore can’t be extended so it’s not really extending the object, but you get what I mean.) For more on this, see "Extending the WP_Post Class".

Here’s the thumbnail() method of that Article class:

// get our post’s thumbnail image
public function thumbnail()
{
	$thumb_id	= get_post_thumbnail_id($this->ID);

	// if there isn’t an article thumbnail then use the default one
	$thumb		= (! empty($thumb_id))
				? wp_get_attachment_url($thumb_id)
				: get_option('upload_url_path').'/article_thumb.png';
	return $thumb;
}

Not too complicated. If the article doesn’t have a featured image, then I’m using {/wp-content/uploads}/article_thumb.png as a default. As I mentioned above, I’m only using one image (256x256) for multiple purposes (post thumbnails in subscriber emails and throughout the site, iPhone icons, Facebook, Twitter’s embedded summaries, etc.) so that’s why the image is much larger than standard iOS icon sizes, but it still works anyways. I wouldn’t use images much larger than that though, and I’ve also never tried it with non-square images.

Here’s what it would look like all together in header.php:

<?php
if (is_single()) :
	global $post;

	// get our post’s thumbnail image
	$thumb_id	= get_post_thumbnail_id($post->ID);

	// if there isn’t an article thumbnail then use the default one
	$thumbnail	= (! empty($thumb_id))
				? wp_get_attachment_url($thumb_id)
				: get_option('upload_url_path').'/article_thumb.png';

	// use our post thumbnail for iOS home screen bookmarks ?>
	<link rel="apple-touch-icon-precomposed" href="<?php
		echo $thumbnail;?>" /><?php
endif;

Go ahead and bookmark some articles on my blog to test it out.