파비콘

파비콘의 정의, 표시되는 위치, 사용할 형식과 크기, 만들 때 자주 하는 실수를 설명합니다.

파비콘은 브라우저 탭, 북마크, 방문 기록, 일부 검색 결과에서 웹사이트를 식별하는 작은 아이콘입니다. 이름은 Internet Explorer가 북마크를 가리키던 용어인 "favorites icon"에서 왔습니다.

브라우저는 처음에 사이트 루트의 favicon.ico 파일을 요청했습니다. ICO 형식은 16×16, 32×32, 48×48픽셀처럼 여러 크기를 한 파일에 담을 수 있습니다. 현재 HTML은 rel 속성이 icon인 link 요소로 아이콘을 선언하며, 파일은 ICO뿐 아니라 PNG나 SVG도 될 수 있습니다.

Apple 기기는 홈 화면 바로가기에 별도의 터치 아이콘을 사용하며, 보통 180×180 PNG입니다. 설치 가능한 웹 앱은 웹 앱 매니페스트에 192×192, 512×512처럼 더 큰 아이콘을 나열합니다.

파비콘 형식과 크기

파일	형식	일반적인 크기
favicon.ico	ICO	한 파일에 16, 32, 48 px
아이콘 link	PNG 또는 SVG	32×32 PNG 또는 확장 가능한 SVG 하나
Apple 터치 아이콘	PNG	180×180
매니페스트 아이콘	PNG	192×192, 512×512

파비콘이 표시되는 위치

브라우저 탭과 주소창.
북마크, 읽기 목록, 방문 기록.
휴대폰과 태블릿의 홈 화면 바로가기.
일부 서비스의 검색 결과와 링크 미리보기.

파비콘 만드는 방법

워드마크 전체가 아니라 정사각형 로고 마크에서 시작합니다.
16×16픽셀에서도 읽히도록 단순하게 다듬습니다.
PNG 크기들, 선택적으로 SVG와 ICO 파일을 내보냅니다.
페이지 head에 link 요소를 추가하고 여러 브라우저에서 확인합니다.

실제 게시 작업에서

파비콘이 없으면 탭 스크린샷과 문서에 일반 아이콘이 표시됩니다. 가이드나 출시 글에 브라우저 창을 캡처하기 전에 파비콘이 로드되는지 확인하십시오. 브라우저는 파비콘을 적극적으로 캐시하므로, 업데이트 후에도 이전 아이콘이 남을 수 있습니다.

자주 하는 실수

세부 묘사가 많은 로고를 사용해서 16픽셀에서 뭉개짐.
Apple 터치 아이콘을 빠뜨려서 휴대폰에 페이지 스크린샷이 표시됨.
투명 아이콘을 제공해서 어두운 브라우저 테마에서 사라짐.
한 브라우저에서만 테스트함.

지금 고쳐야 할 이미지가 있나요?

Image Converter로 로고를 PNG, JPG, WebP 사이에서 변환하고, Screenshot Resolution Checker로 픽셀 크기를 확인하십시오.

자주 묻는 질문

favicon.ico가 여전히 필요한가요?

일부 도구는 사이트 루트에서 이 파일을 요청하므로, 많은 사이트가 여전히 포함합니다. 최신 브라우저에서는 PNG 또는 SVG 아이콘 link로 충분합니다.

파비콘에 애니메이션을 넣을 수 있나요?

일부 브라우저는 애니메이션 GIF 파비콘을 표시하지만 지원 범위는 다릅니다. 안정적으로 쓰려면 정적 아이콘을 사용하십시오.

출처

같은 스크린샷을 반복해서 찍고 계십니까?

Temposhot은 타이머에 맞춰 화면, 창 또는 영역을 캡처하고 결과를 PDF, 이미지, ZIP 또는 MP4로 내보냅니다. 무료 브라우저 도구는 단일 이미지만 다룹니다.

Mac용 다운로드 기능 보기

파비콘