파비콘이 16픽셀짜리 정사각형 하나로 끝나던 시절은 오래전에 지났습니다. 요즘 사이트는 탭, 윈도우 바로 가기, 아이폰 홈 화면, 안드로이드 설치 안내를 위해 여러 크기가 필요하고, 그것들을 가리키는 마크업도 있어야 합니다. 이 페이지는 그 전부를 이미지 한 장으로, 여러분의 브라우저 안에서 만듭니다.

사용 방법

1. 1 정사각형 이미지를 놓으세요. 되도록 512 px 이상이면 좋습니다.
2. 2 미리보기에서 크기마다 확인하고, 이미지가 투명하다면 배경을 정하세요.
3. 3 zip을 내려받아 사이트 루트에 풀고 HTML을 붙여 넣으세요.

로고가 아니라 16픽셀에 맞춰 만드세요

탭 크기에서 파비콘은 이 페이지의 마침표 하나쯤 되는 너비입니다. 글자로 된 로고는 회색 얼룩이 되고 가는 선은 아예 사라집니다. 그 축척에서 살아남는 것은 글자 한 자, 단순한 도형, 또는 로고에서 가장 특징적인 조각입니다. 로고 전체는 거의 살아남지 못합니다.

PNG면 충분합니다. ICO는 잔재입니다

오늘날 쓰이는 브라우저는 모두 PNG 파비콘을 읽습니다. 그러니 PNG 파일 한 묶음과 올바른 link 태그면 웹은 충분합니다. .ico라는 그릇이 존재하는 이유는 인터넷 익스플로러가 사이트 루트에서 그것을 찾았기 때문입니다. 아주 오래된 무언가를 지원해야 하는 게 아니라면 건너뛰어도 됩니다.

투명도는 휴대폰에서 다르게 동작합니다

브라우저 탭에서는 투명한 아이콘이 테마가 주는 배경 위에 잘 얹힙니다. 그런데 아이폰 홈 화면에서는 같은 파일 뒤에 새까만 정사각형이 깔립니다. iOS가 거기서는 투명도를 합성하지 않기 때문입니다. 배경색을 정해 두면 두 곳 모두에서 의도한 모습이 됩니다.

브라우저가 아직 옛 아이콘을 보여 주는 이유

파비콘은 아주 강하게, 그리고 오래 캐시됩니다. 때로는 평범한 새로고침으로도 바뀌지 않습니다. 먼저 아이콘 파일을 직접 열어 새 파일이 정말 있는지 확인하고, 그다음 시크릿 창에서 확인하세요. 파일 이름을 바꾸거나 이름에 버전을 붙이는 것이 갱신을 강제하는 확실한 방법입니다.