2-8. HTML의 기본 태그_파비콘, 타이틀, 이모지

Jan 02, 2026

Contents

1. 파비콘(Favicon)1️⃣ 파비콘이란?2️⃣ 파비콘이 보이는 위치 3️⃣ 파비콘 설정 방법 (기본)4️⃣ PNG / SVG 파비콘 (권장)5️⃣ 모바일 & 다양한 환경 대응 (실무 세트)6️⃣ 파비콘 제작 팁 🎨7️⃣ 자주 하는 실수 ❌8️⃣ 파비콘과 SEO / UX *️⃣ 파비콘 제작 사이트 2. 타이틀(title)1️⃣ 타이틀이란?2️⃣ 타이틀이 보이는 곳 3️⃣ 타이틀의 중요성 ⭐⭐⭐4️⃣ 좋은 타이틀 작성법 (실무 기준)5️⃣ 타이틀 vs h1 차이 (자주 헷갈림 ⚠️)6️⃣ 동적 페이지에서 title 바꾸기 7️⃣ 자주 하는 실수 ❌8️⃣ 타이틀과 파비콘의 관계 3. 이모지(Emoji)1️⃣ 이모지란?2️⃣ 이모지는 동장 방법 (중요 개념)3️⃣ 이모지 vs 이미지 차이 4️⃣ HTML에서 이모지 사용 5️⃣ 이모지 스타일 제어 (CSS)*️⃣ 이모지 사이 4. 실습

1. 파비콘(Favicon)

1️⃣ 파비콘이란?

웹사이트를 대표하는 작은 아이콘 이미지

Favorite Icon의 줄임말

사이트의 얼굴/로고 역할

주로 16×16, 32×32 같은 작은 크기

2️⃣ 파비콘이 보이는 위치

🌐 브라우저 탭

⭐ 즐겨찾기(북마크)

📱 모바일 홈 화면 바로가기

🔍 검색 결과(브라우저/환경에 따라)

3️⃣ 파비콘 설정 방법 (기본)

1) HTML에 링크 추가


<head>
	<link rel="icon" href="/favicon.ico">
</head>

가장 기본적인 방법

루트(/)에 favicon.ico를 두면 자동 인식되는 경우도 많음

4️⃣ PNG / SVG 파비콘 (권장)

1) PNG


<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">

2) SVG (고해상도, 최신 브라우저)


<link rel="icon" href="/favicon.svg" type="image/svg+xml">

5️⃣ 모바일 & 다양한 환경 대응 (실무 세트)


<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

apple-touch-icon : iOS 홈 화면 아이콘

여러 크기를 두면 기기별로 최적 선택

6️⃣ 파비콘 제작 팁 🎨

단순한 형태 (글자 1개, 심볼)

고대비 색상 (작아도 식별 가능)

투명 배경(PNG/SVG) 권장

➡️ 로고를 그대로 축소하면 잘 안 보이는 경우가 많아요.

7️⃣ 자주 하는 실수 ❌

1) ❌ 파비콘 경로 오류


<link rel="icon" href="favicon.ico"><!-- 실제 위치와 다를 때 -->

2) ❌ 너무 복잡한 이미지

작은 크기에서 뭉개짐

3) ❌ 캐시 때문에 안 바뀌는 문제

브라우저가 파비콘을 강하게 캐시

💡 해결 팁


<link rel="icon" href="/favicon.ico?v=2">

8️⃣ 파비콘과 SEO / UX

직접적인 SEO 점수는 크지 않지만

브랜드 인식, 클릭률, 신뢰도에 영향

특히 탭/북마크 UX 개선에 중요

*️⃣ 파비콘 제작 사이트

Favicon & App Icon Generator

Convert PNG to ICO, JPG to ICO, GIF to ICO. Create favicon.ico and iOS / Android App Icons. Edit a favicon to fit your needs, or search our gallery.

https://www.favicon-generator.org/

2. 타이틀(`title`)

1️⃣ 타이틀이란?

웹페이지의 제목을 정의하는 요소


<head>
<title>페이지 제목</title>
</head>

반드시 <head> 안에 위치

페이지당 1개만 존재

화면 본문에는 표시 ❌

대신 브라우저 탭 이름으로 표시 ⭕

2️⃣ 타이틀이 보이는 곳

🌐 브라우저 탭

⭐ 즐겨찾기(북마크) 이름

🔍 검색 결과의 제목(SEO 매우 중요)

➡️ 사용자는 페이지에 들어오기 전부터 타이틀로 페이지를 판단

3️⃣ 타이틀의 중요성 ⭐⭐⭐

1) 사용자 경험(UX)

탭이 여러 개일 때 페이지 구분

북마크 시 어떤 페이지인지 명확

2) SEO (검색엔진 최적화)

검색 결과에서 가장 눈에 띄는 요소

페이지 주제를 검색엔진에 전달

3) 접근성

스크린리더가 페이지 진입 시 title을 먼저 읽음

4️⃣ 좋은 타이틀 작성법 (실무 기준)

1) ✅ 기본 원칙

페이지 핵심 내용 요약

너무 짧지도, 길지도 않게 (약 30~60자)

페이지마다 고유한 title

2) ❌ 나쁜 예


<title>홈</title>


<title>사이트</title>

3) ⭕ 좋은 예


<title>로그인 | ABC 쇼핑몰</title>
<title>상품 상세 – 무선 키보드 | ABC 쇼핑몰</title>
<title>공지사항 | 고객센터</title>

➡️ 보통 페이지명 | 사이트명 패턴을 많이 씁니다.

5️⃣ 타이틀 vs h1 차이 (자주 헷갈림 ⚠️)

구분	title	h1
위치	head	body
화면 표시	❌	⭕
역할	페이지 제목(메타)	콘텐츠 제목
SEO	매우 중요	중요


<head>
<title>회원가입 | ABC</title>
</head>
<body>
<h1>회원가입</h1>
</body>

➡️ 둘은 같아도 되고, 달라도 됩니다

(보통 비슷하지만 title이 더 구체적)

6️⃣ 동적 페이지에서 title 바꾸기

1) JavaScript


<script>
	document.title ="결제 완료 | ABC 쇼핑몰";
</script>

➡️ SPA(React/Vue)에서 특히 중요

7️⃣ 자주 하는 실수 ❌

1) ❌ title 누락


<head></head>

2) ❌ 모든 페이지가 같은 title


<title>ABC 쇼핑몰</title>

➡️ 검색엔진/사용자 모두 혼란

8️⃣ 타이틀과 파비콘의 관계

title → 텍스트(이름)

favicon → 아이콘(이미지)

➡️ 브라우저 탭 = 파비콘 + title

3. 이모지(Emoji)

1️⃣ 이모지란?

😀🔥❤️ 같은 그림 문자(4 byte)

단순 이미지 ❌ → 유니코드(Unicode) 문자

그래서 텍스트처럼 복사/검색/저장 가능

2️⃣ 이모지는 동장 방법 (중요 개념)

✔ 유니코드 문자

이모지는 각각 고유한 코드 포인트를 가짐


😀  → U+1F600
❤️ → U+2764 U+FE0F

➡️ 폰트가 이 코드를 그림으로 렌더링함

그래서:

기기/OS/폰트마다 모양이 다름

의미는 같지만 디자인은 다를 수 있음

3️⃣ 이모지 vs 이미지 차이

구분	이모지	이미지(img)
본질	문자	이미지 파일
크기	글자 크기 따름	고정/조절
색상	제한적	자유
접근성	스크린리더 읽음	alt 필요
복사	가능	불가

➡️ 짧은 표현/감정 → 이모지

➡️ 정확한 디자인 → 이미지

4️⃣ HTML에서 이모지 사용

그냥 써도 됨 😊


<p>환영합니다 🎉</p>

문자 인코딩 주의 ⚠️


<meta charset="UTF-8">

➡ UTF-8 필수 (안 쓰면 깨질 수 있음)

5️⃣ 이모지 스타일 제어 (CSS)

이모지는 텍스트이기 때문에 CSS 적용 가능


.emoji {
	font-size:24px;
}


<span class="emoji">🔥</span>

*️⃣ 이모지 사이

홈 | Emoji 이모지 사전 | Emojiall 한국어 공식 웹사이트

유니코드 이모지에 특화된 저희는 명확한 의미, 사용 예시, 원클릭 복사, HD/벡터 자산 및 고급 검색 기능을 제공합니다. AI와 빅데이터를 활용하여 순위, 트렌드 그래프, 감성 분석 및 언어학 연구를 통해 이모지 세계를 깊이 탐구할 수 있습니다.

https://www.emojiall.com/ko

4. 실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>배달의 민족</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <h1>파비콘, 타이틀, 이모지</h1>
    <hr />
    <div>🚗🚗🚗🚗🚗🚗🧛‍♂️</div>
  </body>
</html>

Contents

HTML

2-8. HTML의 기본 태그_파비콘, 타이틀, 이모지

박은서

Jan 02, 2026

Contents

1. 파비콘(Favicon)

1️⃣ 파비콘이란?

웹사이트를 대표하는 작은 아이콘 이미지

Favorite Icon의 줄임말

사이트의 얼굴/로고 역할

주로 16×16, 32×32 같은 작은 크기

2️⃣ 파비콘이 보이는 위치

🌐 브라우저 탭

⭐ 즐겨찾기(북마크)

📱 모바일 홈 화면 바로가기

🔍 검색 결과(브라우저/환경에 따라)

3️⃣ 파비콘 설정 방법 (기본)

1) HTML에 링크 추가


<head>
	<link rel="icon" href="/favicon.ico">
</head>

가장 기본적인 방법

루트(/)에 favicon.ico를 두면 자동 인식되는 경우도 많음

4️⃣ PNG / SVG 파비콘 (권장)

1) PNG


<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">

2) SVG (고해상도, 최신 브라우저)


<link rel="icon" href="/favicon.svg" type="image/svg+xml">

5️⃣ 모바일 & 다양한 환경 대응 (실무 세트)


<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

apple-touch-icon : iOS 홈 화면 아이콘

여러 크기를 두면 기기별로 최적 선택

6️⃣ 파비콘 제작 팁 🎨

단순한 형태 (글자 1개, 심볼)

고대비 색상 (작아도 식별 가능)

투명 배경(PNG/SVG) 권장

➡️ 로고를 그대로 축소하면 잘 안 보이는 경우가 많아요.

7️⃣ 자주 하는 실수 ❌

1) ❌ 파비콘 경로 오류


<link rel="icon" href="favicon.ico"><!-- 실제 위치와 다를 때 -->

2) ❌ 너무 복잡한 이미지

작은 크기에서 뭉개짐

3) ❌ 캐시 때문에 안 바뀌는 문제

브라우저가 파비콘을 강하게 캐시

💡 해결 팁


<link rel="icon" href="/favicon.ico?v=2">

8️⃣ 파비콘과 SEO / UX

직접적인 SEO 점수는 크지 않지만

브랜드 인식, 클릭률, 신뢰도에 영향

특히 탭/북마크 UX 개선에 중요

*️⃣ 파비콘 제작 사이트

Favicon & App Icon Generator

Convert PNG to ICO, JPG to ICO, GIF to ICO. Create favicon.ico and iOS / Android App Icons. Edit a favicon to fit your needs, or search our gallery.

https://www.favicon-generator.org/

2. 타이틀(`title`)

1️⃣ 타이틀이란?

웹페이지의 제목을 정의하는 요소


<head>
<title>페이지 제목</title>
</head>

반드시 <head> 안에 위치

페이지당 1개만 존재

화면 본문에는 표시 ❌

대신 브라우저 탭 이름으로 표시 ⭕

2️⃣ 타이틀이 보이는 곳

🌐 브라우저 탭

⭐ 즐겨찾기(북마크) 이름

🔍 검색 결과의 제목(SEO 매우 중요)

➡️ 사용자는 페이지에 들어오기 전부터 타이틀로 페이지를 판단

3️⃣ 타이틀의 중요성 ⭐⭐⭐

1) 사용자 경험(UX)

탭이 여러 개일 때 페이지 구분

북마크 시 어떤 페이지인지 명확

2) SEO (검색엔진 최적화)

검색 결과에서 가장 눈에 띄는 요소

페이지 주제를 검색엔진에 전달

3) 접근성

스크린리더가 페이지 진입 시 title을 먼저 읽음

4️⃣ 좋은 타이틀 작성법 (실무 기준)

1) ✅ 기본 원칙

페이지 핵심 내용 요약

너무 짧지도, 길지도 않게 (약 30~60자)

페이지마다 고유한 title

2) ❌ 나쁜 예


<title>홈</title>


<title>사이트</title>

3) ⭕ 좋은 예


<title>로그인 | ABC 쇼핑몰</title>
<title>상품 상세 – 무선 키보드 | ABC 쇼핑몰</title>
<title>공지사항 | 고객센터</title>

➡️ 보통 페이지명 | 사이트명 패턴을 많이 씁니다.

5️⃣ 타이틀 vs h1 차이 (자주 헷갈림 ⚠️)

구분	title	h1
위치	head	body
화면 표시	❌	⭕
역할	페이지 제목(메타)	콘텐츠 제목
SEO	매우 중요	중요


<head>
<title>회원가입 | ABC</title>
</head>
<body>
<h1>회원가입</h1>
</body>

➡️ 둘은 같아도 되고, 달라도 됩니다

(보통 비슷하지만 title이 더 구체적)

6️⃣ 동적 페이지에서 title 바꾸기

1) JavaScript


<script>
	document.title ="결제 완료 | ABC 쇼핑몰";
</script>

➡️ SPA(React/Vue)에서 특히 중요

7️⃣ 자주 하는 실수 ❌

1) ❌ title 누락


<head></head>

2) ❌ 모든 페이지가 같은 title


<title>ABC 쇼핑몰</title>

➡️ 검색엔진/사용자 모두 혼란

8️⃣ 타이틀과 파비콘의 관계

title → 텍스트(이름)

favicon → 아이콘(이미지)

➡️ 브라우저 탭 = 파비콘 + title

3. 이모지(Emoji)

1️⃣ 이모지란?

😀🔥❤️ 같은 그림 문자(4 byte)

단순 이미지 ❌ → 유니코드(Unicode) 문자

그래서 텍스트처럼 복사/검색/저장 가능

2️⃣ 이모지는 동장 방법 (중요 개념)

✔ 유니코드 문자

이모지는 각각 고유한 코드 포인트를 가짐


😀  → U+1F600
❤️ → U+2764 U+FE0F

➡️ 폰트가 이 코드를 그림으로 렌더링함

그래서:

기기/OS/폰트마다 모양이 다름

의미는 같지만 디자인은 다를 수 있음

3️⃣ 이모지 vs 이미지 차이

구분	이모지	이미지(img)
본질	문자	이미지 파일
크기	글자 크기 따름	고정/조절
색상	제한적	자유
접근성	스크린리더 읽음	alt 필요
복사	가능	불가

➡️ 짧은 표현/감정 → 이모지

➡️ 정확한 디자인 → 이미지

4️⃣ HTML에서 이모지 사용

그냥 써도 됨 😊


<p>환영합니다 🎉</p>

문자 인코딩 주의 ⚠️


<meta charset="UTF-8">

➡ UTF-8 필수 (안 쓰면 깨질 수 있음)

5️⃣ 이모지 스타일 제어 (CSS)

이모지는 텍스트이기 때문에 CSS 적용 가능


.emoji {
	font-size:24px;
}


<span class="emoji">🔥</span>

*️⃣ 이모지 사이

홈 | Emoji 이모지 사전 | Emojiall 한국어 공식 웹사이트

https://www.emojiall.com/ko

4. 실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>배달의 민족</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <h1>파비콘, 타이틀, 이모지</h1>
    <hr />
    <div>🚗🚗🚗🚗🚗🚗🧛‍♂️</div>
  </body>
</html>

Contents