Have you tried re-exporting and re-uploading the correct sizes and file types for the Favicon and Webclip in Webflow?

Published on
September 22, 2023

Yes, re-exporting and re-uploading the correct sizes and file types for the Favicon and Webclip in Webflow can help ensure that these elements are displayed correctly on different devices and browsers. Here are the steps to follow:

  1. Prepare the correct file types and sizes:
  • Favicon: Save your favicon file in the .ico format. The recommended size is 32x32 pixels, but you can use other sizes like 16x16 pixels for better compatibility.
  • Webclip: Save your webclip file in the .png format. The recommended size is 180x180 pixels for high-resolution devices and 120x120 pixels for other devices.
  1. Access your Webflow project: Log in to your Webflow account and access the project for which you want to update the favicon and webclip.

  2. Go to Project Settings: Click on the "Project Settings" link located in the project dashboard.

  3. Upload the favicon and webclip files:

  • Favicon: In the Project Settings panel, click on the "Upload" button below the Favicon section. Choose the correct favicon file (in .ico format) from your computer and upload it.
  • Webclip: In the Project Settings panel, scroll down to the "Web Clips for Apple Devices" section. Click on the "+ Add Image" button and choose the correct webclip file (in .png format) from your computer. Repeat this process if you want to add more webclip images for different devices.
  1. Check and publish: After uploading the favicon and webclip files, preview your Webflow project to ensure that the changes are applied correctly. If everything looks good, publish your project to make the updated favicon and webclip live.

By re-exporting and re-uploading the correct sizes and file types for the favicon and webclip in Webflow, you can ensure a consistent branding experience across different devices and browsers. Remember to test the favicon and webclip on various devices and browsers to verify its visibility and functionality.

Additional Questions:

  1. How do I create a favicon in Webflow?
  2. Can I have multiple webclip images for different Apple devices in Webflow?
  3. What are the recommended sizes for a favicon and webclip in Webflow?