Favicon Rotator 1.1: Optimized Icons

By Sol in Lab

Favicon Rotator received a few updates recently, but the main highlight is that optimized icons are now created for uploaded images.

Why?

The primary purpose of Favicon Rotator was to make it simple to upload a favicon for a WordPress site.  So in version 1.0, the plugin basically loaded the image as it was uploaded by the user.  This works perfectly fine, especially if the user uploads an image meant to be a favicon (i.e. 16×16 resolution).  Larger images were properly loaded as well, but it was left up to the browser to resize the image to fit in the 16×16 space in the browser’s address bar.  The other issue was that if the user selected a large image to use as a favicon, then the site’s loading time could be increased since the entire image needed to be downloaded (regardless of how small it was being displayed).

I definitely am not a fan of slower loading, but I was initially hesitant to create additional files since WordPress already automatically creates thumbnail files for all uploaded images, which is a waste of disk space if the user will never use them.  However, due to the potential for increased load times and the hit-or-miss results when letting the browser resize large images, I decided that Favicon Rotator should create an image optimized for use as a favicon.

Thankfully, WordPress is not stupid (quite smart in fact), and it will not create additional intermediate files (thumbnails, etc.) if the original image is smaller than the intermediate sizes.  This means that if a user does upload a 16×16 image file that is already optimized for use as a favicon, no additional files will be created.  Therefore, only images that would benefit from an intermediate file will have one created.

When?

Favicon Rotator doesn’t create favicon-sized files for all images uploaded to WordPress, but rather only when certain criteria are met:

  • Images that are uploaded via Favicon Rotator’s admin page
  • Images that were uploaded by other means, but are selected for use as a favicon

This minimizes the number of extraneous files in WordPress since optimized icons are created on-demand and saved for future use (so icons for an image are only created once).

How?

Adding a new intermediate size for uploaded images is very simple.  It only takes one quick line of code:

add_image_size($image_size, $width, $height, $crop);

Then, you simply add a hook to register this new size once WordPress has loaded.  Basically any hook including and beyond init will do, but I chose to hook into intermediate_image_sizes so that the favicon image size is added only when the available intermediate image sizes are requested (otherwise the favicon image size would be added during every request whether it was needed or not).

add_filter('intermediate_image_sizes', 'add_intermediate_image_size');

The custom function to add the favicon image size can be very simple:

function add_intermediate_image_size($sizes) {
	add_image_size('favicon', 16, 16, true);
	$sizes[] = 'favicon';
	return $sizes;
 }

However, since we only want to create an optimized file when uploading or selecting a file specifically for use as a favicon, we need to add a bit more code:

function add_intermediate_image_size($sizes) {
	$img = array('width' => 0, 'height' => 0, 'crop' => true);
	if ( $this->is_custom_media() ) {
		$img['width'] = $this->icon_dimensions['w'];
		$img['height'] = $this->icon_dimensions['h'];
	}
	add_image_size($this->icon_size, $img['width'], $img['height'], $img['crop']);
	$sizes[] = $this->icon_size;
	return $sizes;
 }

This updated function does the following:

  1. Creates a default array with zeroed-out values for the intermediate image (more on why later)
  2. Checks if the current request is initiated by Favicon Rotator (e.g. uploading/selecting an image via the admin page).  If so, set actual width/height values for favicon image (using object variables)
  3. Adds image size to WordPress
  4. Adds size name (e.g. ‘favicon’) to array of intermediate images sizes (using an object variable)
  5. Return updated array of intermediate image sizes to filter

The reason why we create an array with zeroed-out values for the image dimensions is because the intermediate image sizes may be requested in multiple situations (e.g. when deleting an image attachment from WordPress) so we need to add a valid size to the list of intermediate sizes whenever it is requested.  However, since we don’t want to actually create an additional favicon file for images unless they are uploaded/selected via Favicon Rotator’s admin page, we set the width/height to 0, which WordPress will then skip when creating intermediate images.

That’s a wrap!

By adding this functionality, favicons from large images look better and load faster, which makes this a worthwhile update for me.  As with most updates, I don’t really know where I’m going next (since I usually include everything I want to before updating), so any further updates will likely be based on user feedback.  If you have any requests, make sure to leave a comment to let me know how Favicon Rotator can be improved.