파비콘 동적으로 변경하기

파비콘을 동적으로 바꿔보는 작업을 해보시죠

const faviconHref = emoji =>
  `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2280%22>${emoji}</text></svg>`

위와 같이 faviconHref를 선언해서 emoji를 svg 형태의 data:image/svg+xml로 받을 수 있도록 선언해둡니다.

const changeFavicon = emoji => {
  // browser환경이 아니면 return 합니다.
  if (typeof window === 'undefined') return;
  
  // rel*=icon으로 사용하고 있는 파비콘이 이미 있다면 해당 link를 선택하고,
  // 그렇지 않다면 link 태그를 생성합니다.
  const link =
    window.document.querySelector("link[rel*='icon']") ||
    window.document.createElement("link");
  link.type = "image/svg+xml"
  link.rel = "shortcut icon"
  // 위에서 선언한 faviconHref 함수에 emoji를 arguments로 넘겨줍니다.
  link.href = faviconHref(emoji)

  // head태그에 appendChild 합니다.
  document.head.appendChild(link)
}

💃 < 복사

console을 열고 해당 구문을 선언한 다음에 changeFavicon('💃')를 해보시면 해당 favicon으로 변경되는 것을 볼 수 있습니다.

 

그럼 시간대 별로 파비콘을 달리 보여주고 싶다면 다음과 같이 사용할 수 있겠죠?

const currentEmoji = () => {
  // 기준을 15분으로 잡고 근처라면 해당 근처 15분 간격의 분으로 갈 수 있도록 선언합니다.
  const time = new Date(Date.now() + 15 * 60 * 1000);
  const hours = time.getHours() % 12;
  // 30분 단위로 분을 설정합니다.
  const minutes = time.getMinutes() < 30 ? 0 : 30;
  return {
    "0.0": "🕛",
    "0.30": "🕧",
    "1.0": "🕐",
    "1.30": "🕜",
    "2.0": "🕑",
    "2.30": "🕝",
    "3.0": "🕒",
    "3.30": "🕞",
    "4.0": "🕓",
    "4.30": "🕟",
    "5.0": "🕔",
    "5.30": "🕠",
    "6.0": "🕕",
    "6.30": "🕡",
    "7.0": "🕖",
    "7.30": "🕢",
    "8.0": "🕗",
    "8.30": "🕣",
    "9.0": "🕘",
    "9.30": "🕤",
    "10.0": "🕙",
    "10.30": "🕥",
    "11.0": "🕚",
    "11.30": "🕦",
  }[`${hours}.${minutes}`]
}

// 1분을 delay 타임으로 잡습니다.
const delay = 60 * 1000;

// 페이지가 재시작 되면 현재 emoji를 가지고 오기 위해서 currentEmoji()를 재계산/재할당 합니다.
const emoji = currentEmoji();
changeFavicon(emoji);

// setInterval을 사용해서 delay(현재 - 1분 간격) 타임마다 재할당해서 파비콘을 변경합니다.
setInterval(() => {
  const emoji = currentEmoji();
  changeFavicon(emoji);
}, delay);

 

리액트로는 어떻게 할까요?

import { useEffect } from "react";
import useInterval from "./useInterval";
// useInterval이라는 hook을 만듭니다.

// 마찬가지로 1분 간격으로..
const delay = 60 * 1000;

const useTimeFavicon = () => {
  // 컴포넌트 초기 렌더링 시에 한번 일어납니다.
  useEffect(() => {
    const emoji = currentEmoji();
    changeFavicon(emoji);
  }, []);

  // 그리고 업데이트를 딜레이(현재 - 1분간격)마다 합니다.
  useInterval(() => {
    const emoji = currentEmoji();
    changeFavicon(emoji);
  }, delay);
}

다음시간에 만나요~

 

출처 : https://css-tricks.com/how-to-create-a-favicon-that-changes-automatically/