{
  "id": "7676a1984eac44b31157b259",
  "source": "solid:signals",
  "type": "github-document",
  "title": "link",
  "content": "---\ntitle: Link\norder: 2\nuse_cases: 'adding favicon, stylesheets, external resources, preloading assets, web fonts'\ntags:\n  - link\n  - favicon\n  - stylesheet\n  - assets\n  - head\n  - resources\nversion: '1.0'\ndescription: \u003e-\n  Add external resources like stylesheets and favicons to your Solid app. Learn\n  to use the Link component for optimal resource loading and icons.\n---\n\nThe Link component establishes a connection between the page and an external resource.\nCommonly, this is used for linking stylesheets and other associations.\n\nThis component renders a [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element within the document's `\u003chead\u003e`.\n\n```tsx twoslash\nimport { Link } from \"@solidjs/meta\";\n\u003cLink rel=\"icon\" href=\"/favicon.ico\" /\u003e;\n```\n\n## Usage\n\n### Adding a favicon\n\nTo add a favicon in an app, `\u003cLink\u003e` can be used to point to the asset:\n\n```tsx twoslash\nimport { MetaProvider, Link } from \"@solidjs/meta\";\n\nexport default function Root() {\n\treturn (\n\t\t\u003cMetaProvider\u003e\n\t\t\t\u003cLink rel=\"icon\" href=\"/favicon.ico\" /\u003e\n\t\t\u003c/MetaProvider\u003e\n\t);\n}\n```\n\n### Using an emoji as a favicon\n\nTo use an emoji as a favicon, first create a function that returns a data URI containing an SVG image:\n\n```jsx\nconst emojiSvg = (emoji) =\u003e {\n\treturn (\n\t\t`data:image/svg+xml;utf8,` +\n\t\t`\u003csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22\u003e\u003ctext y=%22.9em%22 font-size=%2290%22\u003e${emoji}\u003c/text\u003e\u003c/svg\u003e`\n\t);\n};\n```\n\nFollowing this, include the emoji as an argument within that function in the `href` property of the Link component:\n\n```jsx\nimport { MetaProvider, Link } from \"@solidjs/meta\";\n\nexport default function Root() {\n\treturn (\n\t\t\u003cMetaProvider\u003e\n\t\t\t\u003cLink rel=\"icon\" href={emojiSvg(\"😎\")} /\u003e\n\t\t\u003c/MetaProvider\u003e\n\t);\n}\n```",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/reference/meta/link.mdx",
  "metadata": {
    "path": "src/routes/solid-meta/reference/meta/link.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 1753,
    "source_type": "github"
  },
  "hash": "0992fdc97a7f27289597b5d1a835524ce3d4332a7b6aa032ab18e3b58bf4b9fe",
  "timestamp": "2026-02-23T11:43:00.191238471+01:00"
}