HTML에 탭 아이콘 삽입
-
<link rel="icon">및 PNG 이미지를 사용하여 HTML에서 웹사이트용 Favicon 추가 -
<link rel="icon">및 ICO 이미지를 사용하여 HTML에서 웹사이트용 Favicon 추가
탭 아이콘은 기본적으로 브라우저 탭에서 볼 수 있는 작은 아이콘입니다. 일반적으로 픽셀 단위의 최소 크기의 매우 작은 크기의 이미지처럼 보입니다. 파비콘이라고도 합니다. 이 기사에서는 HTML에서 웹사이트에 대한 브라우저 탭 아이콘을 추가하는 방법을 소개합니다.
<link rel="icon"> 및 PNG 이미지를 사용하여 HTML에서 웹사이트용 Favicon 추가
<link> 태그와 rel="icon" 속성을 사용하여 HTML에 브라우저 파비콘을 추가할 수 있습니다. 코드의 <link>태그는 현재 문서를 외부 리소스에 연결합니다. 일반적으로 외부 스타일 시트에 연결하는 데 사용되는 태그입니다. 속성만 포함하므로 빈 요소라고도 합니다. rel 속성은 현재 리소스와 연결된 리소스 간의 관계를 정의하는 데도 사용됩니다. href 속성에서 파비콘으로 사용할 이미지 링크의 대상을 설정할 수 있습니다. .png 확장자를 가진 이미지는 href 속성에 사용해야 합니다.
먼저 장치에서 파비콘으로 사용할 PNG 이미지가 있어야 합니다. 작은 픽셀이어야 합니다. 파비콘을 만드는 가장 일반적인 크기는 16x16픽셀입니다. 그럼에도 불구하고 약간 더 큰 치수(32x32)로도 나타날 수 있습니다. 이제 HTML <head> 태그 내에서 <link> 태그를 열고 그 안의 rel 속성을 사용합니다. rel 속성을 icon으로 설정합니다. 그 뒤에 href 속성을 작성하고 따옴표 안에 파비콘으로 사용할 PNG 이미지 파일을 지정합니다. 그런 다음 이전에 열린 모든 태그를 닫습니다.
여기에서는 favicon.png 이미지를 파비콘으로 사용했습니다. 이미지는 로컬 시스템에 있습니다. 이런 식으로 HTML의 웹 페이지에 파비콘을 추가할 수 있습니다.
예제 코드:
<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
<link rel="icon"> 및 ICO 이미지를 사용하여 HTML에서 웹사이트용 Favicon 추가
ICO 이미지를 사용하여 이전 버전과의 호환성을 위해 웹사이트에 파비콘을 HTML로 추가할 수 있습니다. 거의 모든 최신 브라우저는 파비콘으로 사용할 PNG 이미지를 지원합니다. IE10 및 이전 버전과 같은 브라우저의 경우 ICO 이미지를 사용할 수 있습니다. ICO 이미지의 확장자는 .ico입니다. ConvertICO와 같은 도구를 사용하여 PNG 이미지를 ICO로 변환할 수 있습니다.
예를 들어 ConvertICO 웹사이트를 탐색하고 favicon.png 파일을 업로드합니다. 웹사이트에서 이미지를 ICO 형식으로 변환하고 다운로드할 수 있습니다. 그런 다음 첫 번째 방법에서와 같이 <link> 태그의 href 속성에 있는 이미지 경로를 사용합니다. 그러면 웹 페이지에서 파비콘을 볼 수 있습니다.
예제 코드:
<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn