How do I adjust the zoomed-in Facebook icon when sharing my Webflow site?

TL;DR
  • Set a 1200×630 px Open Graph image in Webflow's SEO settings and avoid using favicons or webclips as previews.  
  • Publish your site, then use Facebook’s Sharing Debugger to scrape and refresh the preview.

When sharing your Webflow site on Facebook, if the icon appears zoomed-in, it's likely because Facebook is pulling a meta image (like an Open Graph image or favicon) that’s too small, improperly cropped, or not optimized.

​

1. Use the Correct Open Graph Image Size

​

  • Go to Project Settings > SEO tab in Webflow.
  • Under Social Media Preview, upload an image to the Open Graph Image URL field.
  • Make sure the image is at least 1200×630 pixels (recommended by Facebook).
  • Avoid square or narrow images; the recommended aspect ratio is 1.91:1.

​

2. Double-Check Your Image Content

​

  • Avoid placing key content or logos too close to the edges; Facebook may crop or scale down.
  • Use a clear, centered logo or brand visual, sized appropriately within the frame.
  • Facebook often auto-crops from the center, so overly zoomed elements may end up cropped awkwardly.

​

3. Publish and Scrape Again

​

  • Publish your Webflow site after adding the new Open Graph image.
  • Go to the Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/).
  • Enter your site’s URL and click Debug.
  • Then click Scrape Again to refresh Facebook’s cache of your image and meta tags.

​

4. Remove or Resize Favicon and Webclip (If Needed)

​

  • If you haven't set a proper Open Graph image, Facebook might use your favicon or webclip, which are not intended for social previews.
  • Go to Project Settings > General > Favicon/Webclip:
  • Favicon is typically 32×32 px — too small for Open Graph.
  • Webclip is usually 256×256 px — still not ideal for Facebook sharing.
  • These should be distinct and not used interchangeably.

​

5. Test the Share Preview

​

  • After scraping, Facebook Debugger will show the preview exactly as it will appear in a shared post.
  • If the image is still zoomed-in or off, consider re-uploading a version with more padding and testing it again.

​

Summary

​

Set a properly sized Open Graph image (1200×630 px) in Webflow’s SEO settings, avoid relying on favicons or webclips, and use Facebook's Debugger tool to update the share preview. This ensures your Facebook icon is displayed correctly and not zoomed-in.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Where can I find the CSS class "wf-section" in Webflow, as it is used in a downloaded template but not listed in any of the stylesheets?
Can anyone provide recommendations and guidance on setting up and testing a reverse proxy with Amazon Cloudfront for a Webflow project, specifically when the client is not on the Enterprise plan?
How can I edit text in text blocks of a Webflow template?
How can I make the 'Select2' jQuery plugin work properly inside a Webflow form? I have included the necessary links to select2.min.js and select2.min.css, but it does not function as expected within Webflow. Outside of Webflow, it works fine. What could be causing this conflict?
Does every form submission count towards my Webflow plan? For instance, if I have a login form and 17 users login/logout daily, will I exceed the limits of the basic plan?
How can I lock the scrolling of the body when the burger menu is clicked in Webflow and ensure that it unlocks when the menu is closed?
How does Webflow charge their 2% transaction fee for ecommerce?
How can I display a cms collection of articles on a single page in Webflow and have the subsequent article displayed on the same page when clicked?
Can the background shadow animation shown on the Build microinteractions around mouse movement example on the Webflow Interaction feature page be achieved using just interactions or does it require custom code?
Can the PDF file link displayed in the browser be modified to remove the Webflow reference?
How can I create an animated hero section on my website using Webflow?
How can I install the Partytown library in Webflow using an NPM package?
What is the proper way to make the section with the Background video class stick for a longer time in Webflow? Should I add a sticky position to the background video or the section it is in, and why isn't it working on mobile view?
How can I change the hover color of a button in Webflow's Slate design? I've already updated the basic color to green, but it still shows orange on hover.
How can I use a jQuery-based databinding utility library to bind a CMS Collection to a Webflow Select form control in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?