좋은 파비콘 원본 고르기
파비콘은 16px처럼 아주 작게 보이는 경우가 많아요. 그래서 원본은 다음 조건을 갖추면 좋아요.
- 정사각형 이미지. 정사각형이 아니면 가운데에 맞추고 남는 부분은 투명하게 둬요.
- 256px 이상의 크기. 작은 원본을 키우면 흐려져요. SVG라면 크기 걱정 없이 선명하게 만들어져요.
- 단순한 모양. 가는 선이나 작은 글씨는 16px에서 뭉개지니, 로고에서 핵심 모양만 남긴 버전을 쓰는 게 좋아요.
사이트에 적용하기
만든 favicon.ico를 사이트의 가장 위 폴더(루트)에 올리고, 모든 페이지의 <head> 안에 아래 한 줄을 넣으면 돼요.
<link rel="icon" href="/favicon.ico" sizes="any">브라우저는 이 줄이 없어도 루트의 favicon.ico를 찾아보는 경우가 많지만, 직접 적어 두는 편이 확실해요. 자세한 내용은 파비콘 만들고 적용하는 법에 정리해 두었어요.
바뀐 파비콘이 안 보일 때
브라우저는 파비콘을 오래 기억해 두기 때문에 새 파일을 올려도 예전 아이콘이 보일 수 있어요. 강력 새로고침을 하거나, 주소 뒤에 ?v=2처럼 버전을 붙여 href="/favicon.ico?v=2"로 바꾸면 새 파일을 불러와요.