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 ()
{
$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";
}
}
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";
}
}
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);
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 may be named
, favicon.png
, or favicon.gif
. If more than one of these were placed in that directory, then favicon.icofavicon.png would preëmpt favicon.gif, which would preëmpt favicon.ico.
Otherwise, favicons must be named
(where favicon-XxX.pngX
is a substring
, 32
, 96
, 128
, 167
, 192
, 196
, or 228
). A tag will be inserted for each of the conforming files.512
Apple Touch icons must be named
(where apple-touch-icon-XxX-precomposed.pngX
is a substring
, 57
, 72
, 76
, 120
, 144
, or 152
) or 180
(where apple-touch-icon-XxX.pngX
is a substring
, 57
, 72
, 76
, 120
, 144
, or 152
). Icons with the substring 180
in their names will preëmpt those without that substring. Otherwise, a tag will be inserted for each of the conforming files.-precomposed
Default site thumbnail images must be named
or thumbnail_graphic.png
or thumbnail_graphic.gif
. If more than one of these were placed in the directory, then thumbnail_graphic.jpgthumbnail_graphic.png would preëmpt thumbnail_graphic.gif, which would preëmpt thumbnail_graphic.jpg.
WordPress Featured
Images
What is called a
in the WordPress PHP code is called a post_thumbnailfeatured 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.
Loading ...
