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 개선에 중요
*️⃣ 파비콘 제작 사이트
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>*️⃣ 이모지 사이
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>
Share article