HTML에서 웹사이트 아이콘 추가 방법

HTML에서 웹사이트 아이콘(Favicon) 추가 방법을 배우세요.

HTML에서 웹사이트 아이콘 추가 방법

웹사이트 아이콘(favicon)은 브라우저 탭에서 페이지 타이틀 옆에 표시되는 작은 이미지입니다.

당신이 좋아하는 어떤 이미지든 웹사이트 아이콘으로 사용할 수 있습니다. 또한, https://favicon.cc와 같은 사이트에서 자신의 웹사이트 아이콘을 생성할 수도 있습니다.

ヒント:웹사이트 아이콘은 작은 이미지이므로, 높은 대비도를 가진 간단한 이미지여야 합니다.

웹사이트 아이콘 이미지는 브라우저 탭의 페이지 타이틀 왼쪽에 표시됩니다. 예를 들어:

웹 아이콘 예제

웹사이트 아이콘을 웹 서버의 루트 디렉토리에 저장하거나, 루트 디렉토리에 "images" 폴더를 만들고, 웹사이트 아이콘 이미지를 이 폴더에 저장하세요. 웹사이트 아이콘 이미지의 일반 이름은 "favicon.ico".

다음은 "index.html" 파일에서: <title> 요소 뒤에 하나를 추가하세요 <link> 요소, 예를 들어 다음과 같이:

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

직접 시도해 보세요

지금, "index.html" 파일을 저장하고, 브라우저에서 다시 로드하세요. 브라우저 탭은 현재 페이지 타이틀의 왼쪽에 웹사이트 아이콘을 표시해야 합니다.