top of page

High Resolution Wix Favicons

Are your Wix website's icons showing up blurry on iPhones, Droids or other mobile devices? As a Wix Website Designer, I have learned some tricks over the years on how to make your Wix website better. Here's one tip for making your website favicon looks good on mobile phones.


In addition to adding a Favicon to your Wix website, there is also a way to make sure that your Wix website design uses a high resolution icon on iPhones, Droids, and other devices. Just uploading a high resolution PNG or JPG (800x800px), using Wix's Favicon setting is not enough – you also need to add some Meta Tag code to tell devices where to find the high resolution icon in the Wix Editor.


Here is how to add a High Resolution Favicon to Wix Websites: (updated Oct 2021)

1a. First, upload a photo to your Wix media library so you have an image URL of your high resolution Favicon to use in the custom code. See *** note below for more details.


1b. Open your Wix Dashboard (login to wix.com), then select your website (if you have multiple sites). Once you have a website selected, you should see a lefthand menu, click on Settings near the bottom of the menu. See screenshot below and video below.

High Resolution Favicon on Wix - insert code in Tracking & Analytics

Here's the video to show you where to find the Custom Code area:


2. In Settings, scroll down to see the Advanced box, and click on Custom Code and click on the small right arrow on the right to open.


3. Click on Add Custom Code


This will launch a window with your Code Settings:

Enter the following code:

<link rel="apple-touch-icon" sizes="180x180" href="CHANGE_THIS_TO_IMAGE_FULL_URL.png" />

<link rel="icon" type="image/png" href="CHANGE_THIS_TO_IMAGE_FULL_URL.png" sizes="192x192">


***Note: You DO need to replace the above image URL in the quotation marks. See how to upload and use an image URL on Wix below. Name your code with something like "HighRes Favicon Custom Code", choose to Load code once on All Pages, and Place Code in Head. Scroll down to see all these settings.

3. Click "Apply" and Publish your Wix website for it to go live.


 

***How do you find your Wix image's URL?

High Resolution Favicon on Wix -where to find Image URL

The image URL from step 3 must be from an image that is hosted at Wix. You can upload your 800x800 PNG file then use the media library browser to find your image, then rollover the enlarge icon and then right click on the image to copy the image URL, and replace the URL in the above code with your specific image's URL. Or, you can also place the image on your site, open the Live site, and then right-click on the image and choose "Copy image address" or "Copy image Location" to get the image's URL. See this example below of what a typical image URL from Wix looks like:

https://static.wixstatic.com/media/139de8_20dec007afc1436cb02df5f2b00694b7.png/v1/fill/w_252,h_252,al_c,lg_1/139de8_20dec007afc1436cb02df5f2b00694b7.png

Add the customized code to your meta tags in the SEO settings of your Wix website Site Manager, and then make sure to PUBLISH to apply the changes and this will make it so that your website favicon shows up in high resolution on devices.



Looking for an expert Wix Website Designer?

Contact us for a free estimate »









14,197 views

Recent Posts

See All

3件のコメント


Joseph Duff
Joseph Duff
2021年4月09日

I’m using Editor X and I've tried this and it doesn’t work :/

いいね!

ryan
2021年3月27日

Hi there! This was an incredible article since I am launching my business in 6 days and have 0 experience with web design.


So, my logo is a blue letter and looking at my phone, the default background is black. Is there a way to change the black background to something else?


Thank you so much for your time!

いいね!

idelle
idelle
2021年1月07日

It may be cached in the browser memory, try to clear your history and cache to see if it will reload to the new favicon.

いいね!

Reach out with questions or for a free design estimate:

As a website designer and graphic designer, I love sharing great tips and tools that make designing easier. As part of my website design services, I train clients on how to update their websites or to do their own SEO (search engine optimization), so I post many of these tips for my clients to train them how to use Wix and other tools to keep their website up-to-date. Keeping websites current is the best way to get found and to keep people coming back to your website. 

Check out all my Design & SEO tips and resources in my blog

bottom of page