Meta Reference

Link

Edit this page

The Link component establishes a connection between the page and an external resource. Commonly, this is used for linking stylesheets and other associations.

This component renders a link element within the document's <head>.

import { Link } from "@solidjs/meta";
<Link rel="icon" href="/favicon.ico" />;

Usage

Adding a favicon

To add a favicon in an app, <Link> can be used to point to the asset:

import { MetaProvider, Link } from "@solidjs/meta";


export default function Root() {
  return (
    <MetaProvider>
      <Link rel="icon" href="/favicon.ico" />
    </MetaProvider>
  );
}

Using an emoji as a favicon

To use an emoji as a favicon, first create a function that returns a data URI containing an SVG image:

const emojiSvg = (emoji) => {
  return (
    `data:image/svg+xml` +
    `<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${emoji}</text></svg>`
  );
};

Following this, include the emoji as an argument within that function in the href property of the Link component:

import { MetaProvider, Link } from "@solidjs/meta";


export default function Root() {
  return (
    <MetaProvider>
      <Link rel="icon" href={emojiSvg("😎")} />
    </MetaProvider>
  );
}
Report an issue with this page