FavIcons, Apple Touch Icons, Site Thumbnail Images, and WordPress: Code and How to Use It

This page is part of a discussion on supporting favicons, Apple Touch icons, and site thumbnail images. If you're not quite sure what favicons or Apple Touch icons or site thumbnail images are, then you might want to back-up and read FavIcons, Apple Touch Icons, and Site Thumbnail Images. If you want to read about choices in how to code support for favicons, Apple Touch icons, and site thumbnail images with PHP in general and WordPress in particular, then read the next part of the discussion.

I think that a great many people are just going to want code that they can drop into a theme, and a practical explanation of how to use that code. Well, here it is.

The Code

In functions.php, if it's not already there, include the instruction

if (function_exists('add_theme_support'))
  add_theme_support('post-thumbnails');
Also into functions.php, insert

/* Returns string containing MIME type of an image file.
 * Requires PHP 4.3.0 or higher. */
function getimagemimetype ($filespec)
{
  $imagesizearray = getimagesize($filespec);
  $type = $imagesizearray['mime'];
  if (strlen($type) == 0)
  { /* See if it might be a .ICO */
    $identifier = fread(fopen($filespec,'r'),4);
    $bytes = "\x0\x1\x2";
    if ( ($identifier[0] == $bytes[0]) && ($identifier[1] == $bytes[0])
                               &&
        (($identifier[2] == $bytes[1]) || ($identifier[2] == $bytes[2]))
                               &&
        ($identifier[3] == $bytes[0]))
      $type = "image/vnd.microsoft.icon";
  }
  return ($type);
}

function tag_for_favicon ()
{
  $favicon_spec = "";
  $favicon_type = "";
  if (file_exists("favicon.png"))
  {
    $favicon_spec = get_bloginfo('siteurl') . "/favicon.png";
    $favicon_type = getimagemimetype("favicon.png");
  }
  else if (file_exists("favicon.gif"))
  {
    $favicon_spec = get_bloginfo('siteurl') . "/favicon.gif";
    $favicon_type = getimagemimetype("favicon.gif");
  }
  else if (file_exists("favicon.ico"))
  {
    $favicon_spec = get_bloginfo('siteurl') . "/favicon.ico";
    $favicon_type = getimagemimetype("favicon.ico");
  }
  if ($favicon_spec)
  {
    echo " <link rel=\"icon\" href=\"" . $favicon_spec . "\" type=\"" . $favicon_type . "\" />\n";
    echo " <link rel=\"shortcut icon\" href=\"" . $favicon_spec . "\" type=\"" . $favicon_type . "\" />\n";
  }
}

function tag_for_apple_touch_icons ()
{
  $siteurl = get_bloginfo('siteurl');
  if (file_exists("apple-touch-icon-57x57-precomposed.png"))
    echo " <link rel=\"apple-touch-icon-precomposed\" sizes=\"57x57\" href=\"" . $siteurl . "/apple-touch-icon-57x57-precomposed.png\" />\n";
  else if (file_exists("apple-touch-icon-57x57.png"))
    echo " <link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"" . $siteurl . "/apple-touch-icon-57x57.png\" />\n";
  else if (file_exists("apple-touch-icon-precomposed.png"))
    echo " <link rel=\"apple-touch-icon-precomposed\" sizes=\"57x57\" href=\"" . $siteurl . "/apple-touch-icon-precomposed.png\" />\n";
  else if (file_exists("apple-touch-icon.png"))
    echo " <link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"" . $siteurl . "/apple-touch-icon.png\" />\n";
  if (file_exists("apple-touch-icon-72x72-precomposed.png"))
    echo " <link rel=\"apple-touch-icon-precomposed\" sizes=\"72x72\" href=\"" . $siteurl . "/apple-touch-icon-72x72-precomposed.png\" />\n";
  else if (file_exists("apple-touch-icon-72x72.png"))
    echo " <link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"" . $siteurl . "/apple-touch-icon-72x72.png\" />\n";
  if (file_exists("apple-touch-icon-114x114-precomposed.png"))
    echo " <link rel=\"apple-touch-icon-precomposed\" sizes=\"114x114\" href=\"" . $siteurl . "/apple-touch-icon-114x114-precomposed.png\" />\n";
  else if (file_exists("apple-touch-icon-114x114.png"))
    echo " <link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"" . $siteurl . "/apple-touch-icon-114x114.png\" />
  if (file_exists("apple-touch-icon-144x144-precomposed.png"))
    echo " <link rel=\"apple-touch-icon-precomposed\" sizes=\"144x144\" href=\"" . $siteurl . "/apple-touch-icon-144x144-precomposed.png\" />\n";
  else if (file_exists("apple-touch-icon-144x144.png"))
    echo " <link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"" . $siteurl . "/apple-touch-icon-144x144.png\" />\n";\n";
}

function tag_for_thumbnail ()
{
  $thumbnail_graphic_spec = "";
  $thumbnail_graphic_type = "";
  if (is_singular())
  {
    if (function_exists('has_post_thumbnail')) /* Introduced in WordPress 2.9 */
      if (has_post_thumbnail())
      {
        $image_array = wp_get_attachment_image_src(get_post_thumbnail_id());
        $thumbnail_graphic_spec = esc_attr($image_array[0]);
        $thumbnail_graphic_type = getimagemimetype($thumbnail_graphic_spec);
      }
  }
  if (!$thumbnail_graphic_spec)
  {
    if (file_exists("thumbnail_graphic.png"))
    {
      $thumbnail_graphic_spec = get_bloginfo('siteurl') . "/thumbnail_graphic.png";
      $thumbnail_graphic_type = getimagemimetype("thumbnail_graphic.png");
    }
    else if (file_exists("thumbnail_graphic.gif"))
    {
      $thumbnail_graphic_spec = get_bloginfo('siteurl') . "/thumbnail_graphic.gif";
      $thumbnail_graphic_type = getimagemimetype("thumbnail_graphic.gif");
    }
    else if (file_exists("thumbnail_graphic.jpg"))
    {
      $thumbnail_graphic_spec = get_bloginfo('siteurl') . "/thumbnail_graphic.jpg";
      $thumbnail_graphic_type = getimagemimetype("thumbnail_graphic.jpg");
    }
  }
  if ($thumbnail_graphic_spec)
  {
    echo " <link rel=\"image_src\" href=\"" . $thumbnail_graphic_spec . "\" type=\"" . $thumbnail_graphic_type . "\" />\n";
    echo " <meta property=\"og:image\" content=\"" . $thumbnail_graphic_spec . "\" />\n";
  }
}

add_action('wp_head','tag_for_favicon',5);
add_action('wp_head','tag_for_apple_touch_icons',5);
add_action('wp_head','tag_for_thumbnail',5);

How to Use It

With this code, favicons, Apple Touch icons, and default site thumbnail icons must each be placed in the home directory of the 'blog, or tags will not be generated for them. Users should be explicitly told that file names are case-sensitive.

favicons must be named favicon.png, favicon.gif, or favicon.ico. If more than one of these were placed in that directory, then favicon.png would preëmpt favicon.gif, which would preëmpt favicon.ico.

Apple Touch icons must be named apple-touch-icon-XxX-precomposed.png (where X is a substring 57, 72, 114, or 144) or apple-touch-icon-XxX.png (where X is a substring 57, 72, 114, or 144) or apple-touch-icon-precomposed.png or apple-touch-icon.png. Icons with the substring -precomposed in their names will preëmpt those without that substring, and a tag will only be inserted for one 57×57 icon. Otherwise, a tag will be inserted for each of the conforming files.

Default site thumbnail images must be named thumbnail_graphic.png or thumbnail_graphic.gif or thumbnail_graphic.jpg. If more than one of these were placed in the directory, then thumbnail_graphic.png would preëmpt thumbnail_graphic.gif, which would preëmpt thumbnail_graphic.jpg.

WordPress Featured Images

What is called a post_thumbnail in the WordPress PHP code is called a featured image in the posting interface. In keeping with the conception implicit in these conventions, the above code allows the user, for any given post or page, to preëmpt the default thumbnail image with an image selected as a featured image.

Support for featured images is enabled by that

if (function_exists('add_theme_support'))
  add_theme_support('post-thumbnails');
bit above. With featured images enabled, a Featured Image widget appears in the middle or lower right-hand side of the posting page, with a Set featured image link. Simply uploading an image by way of this link does not complete the process of setting the featured image. One must additionally click the Use as featured image link that will appear towards the bottom of the image-editing window that appears after the image has been up-loaded.

Next: PHP and WordPress Coding Issues

Comments