use-favicon

Change favicon
Import
Source
View source code
Docs
Edit this page
Package
@mantine/hooks

Usage

use-favicon appends <link /> element to head component with given favicon in React.useLayoutEffect hook. Hook is not called during server side rendering.

Call hook with favicon url (supported formats: .ico, .png, .svg and .gif) that should be set as favicon in any component. Hook is triggered every time url changes and value is not empty string (trailing whitespace is trimmed) or null.

import { useState } from 'react';
import { useFavicon } from '@mantine/hooks';
import { Group, Button } from '@mantine/core';


function Demo() {
  const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
  const setTwitterFavicon = () => setFavicon('https://twitter.com/favicon.ico');
  const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');


  useFavicon(favicon);


  return (
    <Group position="center">
      <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
      <Button onClick={setMantineFavicon}>Mantine favicon</Button>
    </Group>
  );
}

Definition

function useFavicon(url: string): void;
Go back
use-eye-dropper – @mantine/hooks
Up next
use-hash – @mantine/hooks
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter