PRO members can upload a custom screenshot for Pens.
Screenshots are shown:
- As the thumbnail view of a Pen for logged-out visitors and visitors on mobile browsers
- As the thumbnail view of a Pen for members who choose to browse CodePen with images instead of iframes on the desktop (an optional user setting).
- in metadata for social media, like Twitter cards and Facebook shares.
Adding a Custom Screenshot
To upload a screenshot for your Pen, open the Settings menu and select the “Screenshot” tab. Click the “Upload a Custom Screenshot” button to upload your screenshot image.
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.
Was this article helpful?