{"id":4424,"date":"2011-02-24T01:31:34","date_gmt":"2011-02-24T09:31:34","guid":{"rendered":"http:\/\/www.oeconomist.com\/blogs\/daniel\/?page_id=4424"},"modified":"2020-05-21T01:57:40","modified_gmt":"2020-05-21T08:57:40","slug":"the-code-and-how-to-use-it","status":"publish","type":"page","link":"https:\/\/www.oeconomist.com\/blogs\/daniel\/?page_id=4424","title":{"rendered":"FavIcons, Apple Touch Icons, Site Thumbnail Images, and WordPress: Code and How to Use It"},"content":{"rendered":"

This page is part of a discussion on supporting favicons, Apple Touch icons, and site thumbnail images<\/a>. If you're not quite sure what favicon<\/code>s 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<\/q><\/a>. If you want to read about choices in how to code support for favicon<\/code>s, Apple Touch icons, and site thumbnail images with PHP<\/abbr><\/a> in general and WordPress<\/a> in particular, then read the next part of the discussion<\/a>.<\/p>

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.<\/p>

The Code<\/h4>

In functions.php<\/code>, if it's not already there, include the instruction<\/p>

if (function_exists('add_theme_support'))
  add_theme_support('post-thumbnails');<\/code><\/blockquote>

Also into functions.php<\/code>, insert<\/p>

\/* 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);
}<\/code><\/p>

<\/p>

function tag_for_favicon ()
{
    $siteurl = get_bloginfo('siteurl');
    $favicon_spec = \"\";
    $favicon_type = \"\";
    $favicon_size = \"\";
    if (file_exists(\"favicon.png\"))
    {
        $favicon_spec = $siteurl . \"\/favicon.png\";
        $favicon_type = getimagemimetype(\"favicon.png\");
        $favicon_size = \"16\";
    }
    else if (file_exists(\"favicon.gif\"))
    {
        $favicon_spec = $siteurl . \"\/favicon.gif\";
        $favicon_type = getimagemimetype(\"favicon.gif\");
        $favicon_size = \"16\";
    }
    else if (file_exists(\"favicon.ico\"))
    {
        $favicon_spec = $siteurl . \"\/favicon.ico\";
        $favicon_type = getimagemimetype(\"favicon.ico\");
    }
    if ($favicon_spec)
    {
        echo \" <link rel=\\\"icon\\\" href=\\\"\" . $favicon_spec . \"\\\" type=\\\"\" . $favicon_type . \"\\\"\";
        if ($favicon_size)
            echo \" sizes=\\\"\" . $favicon_size . \"x\" . $favicon_size . \"\\\"\" ;
        echo \" \/>\\n\";
        echo \" <link rel=\\\"shortcut icon\\\" href=\\\"\" . $favicon_spec . \"\\\" type=\\\"\" . $favicon_type . \"\\\" \/>\\n\";
    }
    $favicon_possible_size = array(\"32\", \"96\", \"128\", \"167\", \"192\", \"195\", \"196\", \"228\", \"512\");
    foreach ($favicon_possible_size as $favicon_size)
    {
        $favicon_sizes = $favicon_size . \"x\" . $favicon_size;
        $favicon_name = \"favicon-\" . $favicon_sizes . \".png\";
        if (file_exists($favicon_name))
        {
            $favicon_spec = $siteurl . $favicon_name;
            $favicon_type = getimagemimetype($favicon_name);
            echo \" <link rel=\\\"icon\\\" href=\\\"\" . $favicon_spec . \"\\\" type=\\\"\" . $favicon_type . \"\\\" sizes=\\\"\" . $favicon_sizes
                     . \"\\\" \/>\\n\";
        }
    }
    if (file_exists(\"favicon-196.png\"))
    {
        $favicon_spec = $siteurl . \"favicon-196.png\";
        $favicon_type = getimagemimetype(\"favicon-196.png\");
        echo \" <link rel=\\\"shortcut icon\\\" href=\\\"\" . $favicon_spec . \"\\\" type=\\\"\" . $favicon_type . \"\\\" sizes=\\\"196x196\\\" \/>\\n\";
    }
}

function tag_for_apple_touch_icons ()
{
    $siteurl = get_bloginfo('siteurl');
    $apple_touch_icon_possible_size = array(\"57\", \"72\", \"76\", \"120\", \"144\", \"152\", \"180\");
    foreach ($apple_touch_icon_possible_size as $apple_touch_icon_size)
    {
        $apple_touch_icon_sizes = $apple_touch_icon_size . \"x\" . $apple_touch_icon_size;
        $apple_touch_icon_name_partial = \"apple-touch-icon-\" . $apple_touch_icon_sizes;
        if (file_exists($apple_touch_icon_name_partial . \"-precomposed.png\"))
            echo \" <link rel=\\\"apple-touch-icon-precomposed\\\" sizes=\\\"\" . $apple_touch_icon_sizes . \"\\\" href=\\\"\"
                     . $siteurl . $apple_touch_icon_name_partial . \"-precomposed.png\\\" \/>\\n\";
        else if (file_exists($apple_touch_icon_name_partial . \".png\"))
            echo \" <link rel=\\\"apple-touch-icon\\\" sizes=\\\"\" . $apple_touch_icon_sizes . \"\\\" href=\\\"\" . $siteurl
                     . $apple_touch_icon_name_partial . \".png\\\" \/>\\n\";
    }
}
<\/code><\/p>

<\/p>

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";
  }
}<\/code><\/p>

<\/p>

global $wp_version;
if (version_compare($wp_version, '4.3', '<'))
{
    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);<\/code><\/p><\/blockquote>

How to Use It<\/h4>

With this code, favicon<\/code>s, Apple Touch icons, and default<\/em> 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.<\/p>

favicon<\/code>s may be named favicon.png<\/code><\/q>, favicon.gif<\/code><\/q>, or favicon.ico<\/code><\/q>. If more than one of these were placed in that directory, then favicon.png<\/code> would preëmpt favicon.gif<\/code>, which would preëmpt favicon.ico<\/code>.<\/p>

Otherwise, favicons must be named favicon-<\/code>X<\/var>x<\/code>X<\/var>.png<\/code><\/q> (where X<\/var><\/q> is a substring 32<\/code><\/q>, 96<\/code><\/q>, 128<\/code><\/q>, 167<\/code><\/q>, 192<\/code><\/q>, 196<\/code><\/q>, 228<\/code><\/q>, or 512<\/code><\/q>). A tag will be inserted for each of the conforming files.<\/p>

Apple Touch icons must be named apple-touch-icon-<\/code>X<\/var>x<\/code>X<\/var>-precomposed.png<\/code><\/q> (where X<\/var><\/q> is a substring 57<\/code><\/q>, 72<\/code><\/q>, 76<\/code><\/q>, 120<\/code><\/q>, 144<\/code><\/q>, 152<\/code><\/q>, or 180<\/code><\/q>) or apple-touch-icon-<\/code>X<\/var>x<\/code>X<\/var>.png<\/code><\/q> (where X<\/var><\/q> is a substring 57<\/code><\/q>, 72<\/code><\/q>, 76<\/code><\/q>, 120<\/code><\/q>, 144<\/code><\/q>, 152<\/code><\/q>, or 180<\/code><\/q>). Icons with the substring -precomposed<\/code><\/q> in their names will preëmpt those without that substring. Otherwise, a tag will be inserted for each of the conforming files.<\/p>

Default<\/em> site thumbnail images must be named thumbnail_graphic.png<\/code><\/q> or thumbnail_graphic.gif<\/code><\/q> or thumbnail_graphic.jpg<\/code><\/q>. If more than one of these were placed in the directory, then thumbnail_graphic.png<\/code> would preëmpt thumbnail_graphic.gif<\/code>, which would preëmpt thumbnail_graphic.jpg<\/code>.<\/p>

WordPress Featured<\/q> Images<\/h4>

What is called a post_thumbnail<\/code><\/q> in the WordPress PHP<\/abbr><\/a> code is called a featured image<\/q> 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.<\/p>

Support for featured images is enabled by that<\/p>

if (function_exists('add_theme_support'))
  add_theme_support('post-thumbnails');<\/code><\/blockquote>

bit above. With featured images enabled, a Featured Image<\/q> widget appears in the middle or lower right-hand side of the posting page, with a Set featured image<\/q> link. Simply uploading an image by way of this link does not complete the process of setting the featured image.<\/em> One must additionally<\/em> click the Use as featured image<\/q> link that will appear towards the bottom of the image-editing window that appears after the image has been up-loaded.<\/p>

Next:<\/span> PHP and WordPress Coding Issues<\/a><\/p>

Comments<\/a><\/p>","protected":false},"excerpt":{"rendered":"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 […]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-4424","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=\/wp\/v2\/pages\/4424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4424"}],"version-history":[{"count":0,"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=\/wp\/v2\/pages\/4424\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}