favicon 파비콘이란?

Html,CSS

by rui_3557 2024. 1. 23. 17:56

파비콘(Favicon)은 웹사이트나 웹 페이지를 대표하는 아이콘으로, 웹 브라우저의 주소창, 탭, 즐겨찾기 등에서 표시됩니다.

파비콘은 'favorites’와 'icon’의 합성어로, 주로 16x16 픽셀 또는 32x32 픽셀 크기의 작은 이미지로 사용됩니다.

파비콘의 주요 역할은 다음과 같습니다:

브랜드 인식 및 가시성 강화: 파비콘은 웹사이트나 애플리케이션의 아이덴티티를 대표하는 이미지로써, 브랜드 인식과 가시성을 강화하는 역할을 합니다.
웹사이트 식별 및 사용자 경험 개선: 파비콘은 웹사이트 북마크, 탭, 주소창 등에서 사용되어 사용자가 웹사이트를 쉽게 식별하고 관리할 수 있도록 돕습니다.
모바일 호환성: 파비콘은 모바일 장치에서도 표시되는데, 이는 웹사이트가 모바일 장치에서도 일관된 브랜딩과 가시성을 유지할 수 있음을 의미합니다.
SEO 영향: 검색엔진최적화 (SEO) 관점에서도 파비콘은 중요한 역할을 합니다. 검색 엔진은 파비콘을 인덱싱하여 웹사이트의 신뢰성과 전문성을 평가하는 요소로 활용되어 검색 엔진 결과 페이지의 클릭률을 높이는 데에 기여할 수 있습니다.

파비콘은 그래픽 편집 도구를 사용하여 제작할 수 있으며, 무료 온라인 도구를 이용하여 간편하게 만들 수도 있습니다. 웹사이트의 주요 색상과 테마를 반영한 아이콘을 제작하는 것이 좋습니다.

파비콘을 웹 페이지에 적용하기 위해 HTML 문서의 <head> 태그 내에 <link> 태그를 사용합니다.

아래는 파비콘을 적용하는 기본적인 방법입니다:

<head>
    <link rel="shortcut icon" href="http://www.mysite.com/favicon.ico">
</head>

위의 예시에서, rel 속성은 파비콘의 유형을 정의하고, href 속성은 파비콘 이미지 파일의 URL을 지정합니다.

rel 속성에는 다음과 같은 값들을 사용할 수 있습니다:

웹 페이지 내에 파비콘 마크업이 여러 개가 존재한다면, 검색 노출에 사용되는 파비콘은 아래 규칙을 기준으로 우선순위를 결정하여 처리합니다:

동일한 rel 속성값이 여러 개가 존재하는 경우, 파비콘 사이즈가 큰 것을 우선으로 합니다.

ICO 파일은 웹 브라우저의 주소창, 탭, 즐겨찾기 등에서 표시되는 웹사이트나 웹 페이지를 대표하는 아이콘입니다.

ICO 파일을 만드는 방법은 다음과 같습니다:

준비된 이미지 파일이 있는 경우, 구글검색창에 'ICO변환' 입력 후 파일 변환 웹 사이트로 접속합니다.
변환할 확장자가 제대로 설정되어 있는지 확인합니다. PNG에서 ICO로 변환한다고 설정한 후 이미지 파일을 드래그해서 파일 선택란에 드롭합니다.
파일 선택 버튼을 눌러 컴퓨터에서 찾아 추가합니다.
이미지 파일을 업로드하면, 16x16에서 256x256픽셀까지 ICO 크기를 지정한 후 "변환"버튼을 누르시면 됩니다.
새로운 ICO 아이콘이 즉시 생성됩니다.
변환이 완료되면 "다운로드"를 클릭하면 끝.

이렇게 만들어진 ICO 파일은 웹 페이지의 파비콘으로 사용할 수 있습니다.

이 과정은 웹 브라우저를 통해 간단하게 변환이 가능하며, 설치 또는 가입이 필요하지 않습니다.

다만, 일부 사이트는 무료 변환 횟수에 제한이 있을 수 있으니 이 점을 유의해 주세요.

<head>엔 어떤 정보들이 들어갈까

HTML의 This is my page 위 예시에서, 요소는 두 가지 메타데이터를 포함하고 있습니다: : 이 요소는 문서의 문자 인코딩을 정의합니다. 여기서는 "utf-8"이 사용되었습니다. My test page: 이 요소는 웹 페

ruiatrworks.tistory.com