Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

😎 Hey CodePen PRO members! You can set your own custom screenshot for your Pens and Projects now. This feature was hotly requested, so it feels great to have it ready for you.

You can upload your custom screenshot on the “Screenshot” tab of your Pen or Project settings.

Just like our Asset Hosting feature, you can drag & drop an image right onto that area. Or, click the button and use your computer’s native file picker.

Where do custom screenshots get used?

Your custom screenshot will take the place of the auto-generated version everywhere we display screenshots. Which is…

  • to populate metadata for social media, like Twitter cards and Facebook shares.
  • in RSS feeds of your content
  • in place of the iframe preview of your Pen on mobile browsers
  • in place of the iframe preview for members who choose to browse CodePen with images instead of iframes (a user setting).

On a Project, your screenshot replaces our default thumbnail image. Check out how cool Giana’s Project looks in the grid with her custom screenshot!

A Project with a default thumbnail (left) and a Project with a custom screenshot (right)

What can I do?

You can design your screenshots however you like! We recommend you create them at 1000×562 in size.

Keep in mind that, like everything on CodePen, custom screenshots have to comply with our Terms of Service and Code of Conduct.

High five to Rachel for leading this release and bringing a much-wanted feature to life!