브라우저 탭과 북마크에 표시되는 사이트 아이콘을 연결합니다.
파비콘은 head 안의 link 요소로 지정합니다. PNG, ICO, SVG 등을 사용할 수 있고 정사각형 이미지를 준비하는 것이 일반적입니다. 실습 결과 iframe에서는 탭 아이콘을 직접 보기 어려워 연결 문법을 화면에 표시합니다.
화면에 보이는 꺾쇠 괄호는 실제 태그가 아니라 <와 > 엔티티로 적은 글자라서, 브라우저는 이 줄을 link 요소로 만들지 않고 code 안의 문자열로 보여 줍니다. CSS의 code 규칙은 display: block으로 인라인 요소인 code를 한 줄 전체 상자로 바꾸고 어두운 배경을 입혀 코드 조각처럼 보이게 합니다.
href=/favicon.ico처럼 슬래시로 시작하는 경로는 지금 페이지가 어느 폴더에 있든 사이트 루트에서 파일을 찾습니다. link를 아예 두지 않아도 많은 브라우저가 사이트 루트의 /favicon.ico를 스스로 요청하며, sizes 속성으로 크기별 아이콘을 여러 개 지정하면 브라우저가 상황에 맞는 것을 고릅니다.
파일 경로와 MIME type이 실제 아이콘 형식과 맞는지 확인하세요.
직접 바꿔보세요favicon.ico를 /images/favicon.png 경로로 사용하는 문법으로 바꿔보세요.