Facebook SDK init creating a second pixel

Two pixels are being initialized on my website even though I have only initialized one pixel. I've pin pointed the second pixel being initialized to the appId that is being used to initialize the Facebook SDK for Facebook login. How do I stop that second pixel from being initialized. According to this and this, having multiple pixels on one webpage is not a good idea. Below are the details of what I am doing.

I am initializing a facebook pixel in my header using the standard facebook pixel code below

<script>
!function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '{pixel-id}');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id={app-id}&ev=PageView&noscript=1"
/></noscript>

This works fine and initializes the pixel fine. The issue is that when I initialize facebook login with my app ID, it creates another pixel, but this time it is with my app ID as the pixel ID. I am checking this through the pixel helper for facebook.

I initialize it with the following code:

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_US/sdk.js';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

window.fbAsyncInit = () => {
  FB.init({
    appId: '{app-id}',
    autoLogAppEvents: true,
    xfbml: false,
    version: 'v2.12'
  });

Solution

The issue is that when I initialize facebook login with my app ID, it creates another pixel, but this time it is with my app ID as the pixel ID.

That would be the effect of

autoLogAppEvents: true,

in your FB.init call to initialize the SDK. Remove that, then the additional, unwanted pixel should be gone as well.