웹사이트 패비콘에 이모지 넣기 (raw)

웹사이트 패비콘에 이모지 넣기 (Raw Markdown)

I/O

2023. 11. 19.

이 문서에 대한 자세한 정보

문서의 판:
https://blog.atj.sh/post/14
문서의 소스코드:
https://blog.atj.sh/post/14/raw
렌더링된 버전:
https://blog.atj.sh/post/14
리포지토리:

제공되지 않음
문서의 형식:

Markdown
작성자:
전성훈

# 개요 이모지를 웹 페이지 파비콘으로 지정하는 방법을 소개한다. # 방법 `<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](https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)이라고 부른다. (데이터 URI라고도 부르기도 한다.) # 기타 이 블로그는 🫠 이모지를 파비콘으로 사용 중이다. 이름은 '사르르 녹는 얼굴 '이라고.