In designing a website, there are other small details that one needs to consider, like the favicon, the social media thumbnail and the home screen touch icon for mobile devices. Here is the HTML I use:
Social Media Thumbnail
Instead of allowing social sites to grab whatever image they feel works best, why not just tell them. This code tells the social media engine to grab a specific image. This same image will be used regardless of the content on the page.
<meta property="og:image" content="../img/logo-icon.png"/>In WordPress, if we want to make this image dynamic for each post or page, we can set it up to grab the featured thumbnail for each post:
<meta property="og:image" content="<?php $image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, 'thumbnail', true);
echo $image_url[0]; ?>" />In WordPress, if this isn’t acceptable, we can use custom fields and allow the user to designate an image for each post. Below it’s set up to be conditional: If there’s an image, serve it to the social media site, if not, let the social media site grab whatever image it likes.
<?php if(get_post_meta($post->ID, 'shareimage', true)): ?>
<meta property="og:image" content="<?php echo get_post_meta($post->ID, "shareimage", true);?>" />
<?php endif; ?>Your Google+ Thumbnail/Avatar in Search results
If you want a thumbnail to show up next to your search results in Google, you need to add a link to your website in your Google+ account. Then add this bit of code to your website, replace the URL with your address to your Google+ account.
<a href="http://plus.google.com/u/0/115374366194378765726" rel="author">Google Profile</a>This may take up to a few weeks, to a month for your Google+ avatar to begin showing up next to search results in Google.
Favicons
Both desktop and mobile browsers accept a favorite icon to display to the left of the URL in the address bar. The favicon should be 16×16 pixels. You can make one in a graphics program and save it as a .png. Order browser accept a file called favicon.ico. You can generate the graphic using this tool. After creating the graphic, here’s the HTML for that:
<link rel="shortcut icon" href="../img/favicon.ico" />The above goes in the <head> section of course.
The following HTML is for touch icons on mobile devices. These graphics should be no smaller than 32×32 pixels.
<link rel="apple-touch-icon" href="../img/logo-icon.png" />
<link rel="apple-touch-icon-precomposed" href="../img/logo-icon.png" />-precomposed means, it takes off the effects Apple’s IOS added to your thumbnails giving you full control over the look. The above declaration is for Android devices who strangely use therel="apple-touch-icon" as well. If this isn’t in place, Android will use the 16px favicon for the browser and it will look crappy, so make sure you have both.
More: Everything you always wanted to know about touch icons