How to make Facebook use a custom thumbnail image for your website

Are you frustrated by the choice of thumbnail images Facebook offers when linking to your website pages?

You are not alone.  But there is a way to fix the problem.

When sharing a link to your website on your Facebook news feed, you will be given a choice of thumbnails to accompany the post and they can sometimes feel pretty darn random.

Even more frustrating is when the image you want to use as the thumbnail is on the website page being shared but not in the list of thumbnails Facebook has chosen for you.

Facebook seems to have its own bizarre method of deciding which images on a page are the most relevant to the link you are sharing.

This may include images from any adverts or unrelated sidebar widgets that are also being displayed on the linked website page.

Facebook has a developer tool called URL Linter that checks a URL, showing which image it finds as being most relevant to the link.  Very handy for testing your changes.

Assigning your own thumbnail

As you can see from the image above, we have setup a standard image for Facebook to use with our website blogs and articles.

This is what we are going to show you how to do.

First create and upload a thumbnail image to your website.  We decided on an optimised 250 x 250 pixel PNG image.

Secondly, include a line similar to the one below, into the HEAD section of your website HTML.

<link rel="image_src" href="/images/blog-thumbnail.png" />

The “image_src” link rel is one of the key tags that Facebook will look for when associating images with shared links.  Of course you need to change the “href” to the URL for your own uploaded thumbnail image.

We use a custom WordPress theme for our website and our thumbnail resides in the images folder of our theme and the code we use in our header.php file to produce the line above is this:

<link rel="image_src" href="<?php bloginfo('stylesheet_directory'); ?>/images/gravitational-fx-web-design-dublin-blog-articles.png" />

It outputs the same result but PHP dynamically works out the URL path to our current theme and will work for your WordPress theme too.

Tip: Facebook usually picks up your thumbnail changes within a day or so, but you can force a change for a particular page link using the URL Lint tool.

Just one thumbnail?

This example is great for assigning a standard thumbnail to your website but what is you want to choose a different thumbnail image per page on your website.

For this you will need to implement Facebook’s open graph meta tags on each page you need a different thumbnail image to be used.  The open graph meta tags will override the “image_rel” link tag.

The key tag to implement is the “og:image” meta property tag but you should add the others too to give Facebook as much information as it needs to properly classify your web pages.

If you use WordPress, perhaps you could check for and assign the featured image to the “og:image” property.

That’s a whole tutorial for another day perhaps.

In Summary

Don’t be shackled to the bizarre thumbnail choices Facebook provides for your shared links.

Take the time to implement a standard thumbnail image for your website or go further and dynamically assign an open graph image for each page.

Let us know how you got on.

Post maintained by .

  • Tim

    Found a quicker way. Post the full url of the image when it displays, rename the link url then save and FB will only show the link and the correct url

  • joinerbuilder

    Giving it a whirl.

  • Gravitational FX Web Design

    Not too sure how that’s a quicker way @1c16da669661a3ce78cb814cb791f0ca:disqus plus it sound like you’d have to do it manually for each posting.

  • Casie

    I need help I have a page on facebook and I copy and paste the link to my personal page to advertise it. No website. How do I use different thumbnails. I tried changing the profile picture and seeing if it would give me the options of using the different profile pics but it did not. Can you help me with this. Thanks

  • Gravitational FX Web Design

    @disqus_18pnSGqeEu:disqus in your case Facebook will use the profile picture associated with your personal Facebook page. You can’t associate another image with that.

    Usually though there are good reasons why people who run businesses keep their personal and business pages very separate.

    Are you sure you want the people who are interacting with your business page, seeing what your friends are up to, obtaining your personal information or endless requests for Farmville?

  • Tony Escobar

    Do you know of a tutorial for adding custom thumbnails to individual posts rather than site-wide? This would be for WordPress.

  • Gravitational FX Web Design

    Hey @Tony

    You could use the same concept but store the thumbnail image path in a custom field.

    In your header you would add $global post and then check that the $post-post_type==’post’ and then use get_post_meta( $post->ID, ‘customfieldname’, true); to get the value of the custom field.

    If it’s not blank then you can use the content to output to your link rel in the header.

    Make sense?


  • Bob Buzz Pople

    I have a SMF 2.04 Forum, I get an icon when posting the link on FB but it is an icon that makes no sense for the link itself, I am not familiar with php that much but would love to make this change you showed. What would you suggest I add in my index.php file to accomplish this? Just the first code posted?

  • Gravitational FX Web Design

    Hi Bob,

    You would need to add that code to your theme’s header.php.

    You should be able to find that file in your current theme’s directory or by going to Appearance > Editor


  • Nathan Seltzer

    This was incredibly helpful. I was pulling my hair out trying to get the right image to display. Thank you!

  • Valerie Rose

    Hmm, I thought I did everything correctly but facebook is ignoring my instructions and is still grabbing images from the accordion slider. Does facebook always honor this? I must have done something wrong but I don’t know what….

  • Gravitational FX Web Design

    Hi Valerie

    If you have previously tried the URL link in Facebook then implemented this fix and tried again then you’ll be hitting the Facebook cache.

    They cache images for URL requests for up to 48 hours.

    Try again with the same URL in a couple of days and see if that makes a difference, or try logging into a different Facebook account to test.

    Otherwise, send me the URL you’re trying to link to and I’ll have a look at the source to see if the FB meta info is in there correctly.


  • Gravitational FX Web Design

    Glad to help Nathan

  • John J Sweeney

    Wil, Where do I access the HEAD section of my website HTML? I am using a Blogger site with my own domain.

  • Gravitational FX Web Design

    Hi John,

    I’m not sure you can do that in Blogger.

    Blogger is very like in that it’s a managed service which doesn’t allow you to play around with the design of the site too much.

    My tutorials are very much aimed at privately hosted websites.


  • John J Sweeney

    Blogger does have a page where you can edit the HTML for the layout. Will this work if I do it there?

  • John J Sweeney

    It worked! Yay. O/ Thanks a whole bunch!

  • Gravitational FX Web Design