[metadata] re-insert icons to head for streamed metadata (#76915)
### What
Re-insert the metadata icons under body tag into head tag to ensure they
can be proper displayed.
### Why
* For chromium based browsers (Chrome, Edge, etc.) and Safari, icons
need to stay under `<head>` to be picked up by the browser. Firefox
doesn't have this requirement.
* Firefox will always render svg > icon > png, so it doesn't matter to
it.
Made a test in https://icons-order-test.vercel.app/, you can play with
the test cases here. These links can see the comparsion of the approach
in the this PR.
During deployment it's very hard to verify Safari as it's pretty broken.
But deploymet works well.
After we re-insert the icon from body into head, they can be properly
displayed across all the browsers.
Note: We insert the script during streaming rather than using a jsx
element right after metadata to avoid the hydration errors
Closes #76810
Closes NDX-951
next.js
8941f8a1 - [metadata] re-insert icons to head for streamed metadata (#76915)
