[HTML] 브라우저 탭에 아이콘을 추가하는 법 (Favicon)

김태희·2024년 8월 3일

html

[HTML+CSS+JS] 시리즈

목록 보기

16/17

파비콘(Favicon)이란 ?

파비콘(Favicon)은 웹사이트를 대표하는 작은 아이콘이다.

웹 브라우저 상의 여러 위치에 표시되어 사용자에게 웹페이지를 식별하는 데 도움을 준다.

위의 사진처럼 주로 브라우저의 탭창 또는 즐겨찾기 메뉴에서 볼 수 있고 실제 크기는 일반적으로 16X16으로 매우 작다.

주로 .ico 파일로 사용된다.

파비콘(Favicon)을 써야하는 이유

요즘엔 파비콘을 안쓰는 웹사이트를 찾기가 더 어렵다.

이러한 환경에서 웹을 이용하는 사용자 입장에서 파비콘이 없는 사이트는 뭔가 있어야할게 없다는 느낌을 준다.

파비콘에는 아래와 같은 특성들이 있다.

브랜딩

웹사이트의 브랜딩에 사용되며, 작은 크기임에도 로고나 특징적인 이미지를 효과적으로 전달할 수 있다.

사이트 특정 기능 표시

파비콘을 사용하여 특정 기능이나 상태를 나타낼 수도 있다. 예를 들어 알림 아이콘이 파비콘으로 표시되어 알림을 표현할 수 있다.

사용자 경험(UX) 향상

사용자는 브라우저 탭에서 파비콘을 통해 더 빠르게 웹페이지를 식별할 수 있다.

장점은 많지만 단점이 없다고 봐도 무방하다.

파비콘(Favicon)을 추가하는 법

그럼 이렇게 좋은 파비콘을 어떻게 추가할까 ?

HTML

HTML에서는 head 태그 내에 아래의 코드를 추가한다.

<link rel="icon" href="favicon.ico"/>
<link rel="apple-touch-icon" href="favicon.ico"/>

MDN과 애플 개발자문서에 따르면 두번째 코드도 함께 사용해주는 것이 애플 유저들에게도 안정적으로 파비콘을 보여줄 수 있는 방법이라고 한다.

React

react-helmet과 같은 라이브러리를 통해 HTML <head> 섹션에 필요한 메타 데이터를 동적으로 추가하는 방식이 많이 사용된다고 한다.

npm install react-helmet

라이브러리를 설치하고나면 루트 컴포넌트에서 다음과 같이 meta 태그를 설정한다.

import React from 'react';
import { Helmet } from 'react-helmet';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Helmet>
        <title>페이지 제목</title>
        <meta name="description" content="페이지에 대한 설명"/>
        <link rel="icon" href="favicon.ico"/>
      </Helmet>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;