개요

이모지를 웹 페이지 파비콘으로 지정하는 방법을 소개한다.

방법

<link rel="icon" href="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>🧩</text></svg>">

위 텍스트를 당신의 웹페이지의 <head> 태그 안에 붙여넣은 후, "🧩"를 당신이 원하는 이모지로 바꿔주면 된다.

원리

🧩 이모지가 포함된 SVG 이미지 데이터를 하드코딩하여 파비콘으로 지정하는 것이다. 동일한 방법으로 PNG 이미지 또한 Base64로 인코딩한 후 하드코딩하면 파비콘으로 지정이 가능하다.

이런 하드코딩 방식을 데이터 URL이라고 부른다. (데이터 URI라고도 부르기도 한다.)

기타

이 블로그는 🫠 이모지를 파비콘으로 사용 중이다. 이름은 '사르르 녹는 얼굴 '이라고.

Emoji Favicon

개요

방법

원리

기타