13. Haed - 파비콘(favicon), 타이틀(title)

웹개발/HTML 간단태그소개

13. Haed - 파비콘(favicon), 타이틀(title)

** 이프로 ** 2024. 1. 2. 17:02

안녕하세요.

콤퓨타 학원에 원장을 하고 있는 이프로입니다. 헤헴 ^^

네이버에 들어간 후 브라우저 탭 헤더를 보시면 NAVER라는 텍스트와 그 옆에 아이콘 이미지가 보이실거에요

아이콘을 파비콘(favicon)이라고 부르고 NAVER 텍스트 부분은 타이틀(title)이라고 불러요.

한번 간단한게 둘어볼께요.

파비콘(favicon) 적용

<!DOCTYPE html>
<html>

<head>
    <title>index.html</title>
    <link rel="icon" type="image/x-icon" href="logo.png">
</head>

<body>
</body>

</html>

link 태그를 이용해서 type속성에 image/x-icon 속성을 넣으면 파비콘 설정을 할 수 있게 되는데요.

href속성에 이미지 경로를 넣어주면 해당 이미지가 파이콘 위치에 표시되는걸 확인 할수 있어요.

href에 넣을수 있는 종류는 icon파일부터 png, jpg등등 거희 대부분의 이미지 파일을 사용 할 수 있어요.

꼭 icon파일이 아니여도 가능하니 일반 이미지로 만들어 쉽게 넣을 수 있어요.

타이틀(title) 태그

head영역에 title태그가 바로 보이실거에요.

해당 태그가 타이틀 태그인데요.

title 태그 영역 내의 내용을 수정하면 브라우저에서 바로 확인해 볼 수 있어요.

이번 강의는 여기까지에요.

여러분들의 관심과 사랑이 있다면 좀 더 좀은 컨텐츠를 제공해줄 수 있을거 같습니다.

많은 관심과 사랑 부탁드립니다.

감사합니다.

그럼 콤빠~