파비콘 만들기

로고 하나로 favicon.ico 와 애플·안드로이드 아이콘을 한 번에 만들고 <link> 줄까지 줍니다.

파비콘은 파일 하나가 아닙니다

브라우저 탭, 아이폰 홈화면, 안드로이드 설치 배너가 각각 다른 파일을 찾습니다. 하나만 올려 두면 어딘가에서는 빈 칸이나 뭉개진 그림이 나옵니다.

ZIP 을 풀어 사이트 최상위에 그대로 올리고, 같이 들어 있는 head.html 세 줄을 <head> 안에 붙이면 끝입니다.

32px 한 장만 넣어 두면 탭에서는 브라우저가 16px 로 줄여 씁니다. 그런데 16px 로 줄어든 그림은 대개 죽이 됩니다 — 획이 한 픽셀 아래로 내려가면서 뭉개집니다. 크기마다 따로 그려 넣으면 각 자리에서 또렷합니다.

.ico 안에는 원래 BMP 를 넣지만, 비스타 이후로는 PNG 를 그대로 넣어도 됩니다. 훨씬 작고 투명도도 온전해서 그쪽을 씁니다.

로고를 그대로 넣으면 대개 실패합니다. 16×16 은 글자 한 자도 못 담는 크기입니다.

미리보기에 16·32·48px 을 실제 크기로 띄워 둡니다. 거기서 알아볼 수 있으면 됩니다.

탭 아이콘은 투명해도 됩니다 — 다크모드에서 배경이 비쳐 자연스럽습니다.

다만 아이폰 홈화면 아이콘은 투명을 지원하지 않습니다. 투명한 채로 두면 검은 사각형이 됩니다. 그래서 배경을 "투명"으로 골라도 180px 짜리에는 흰 바탕을 깔아 둡니다.

SVG 를 넣어도 되나요?

됩니다. 벡터라 어느 크기로 줄여도 깨끗해서 오히려 원본으로 좋습니다. 결과는 PNG·ICO 로 나갑니다.

아이콘을 바꿨는데 예전 게 계속 보입니다

파비콘은 브라우저가 아주 오래 캐시합니다. 강제 새로고침(Ctrl/⌘+Shift+R)으로도 안 바뀌면 /favicon.ico 를 주소창에 직접 열어 새로고침해 보세요. 그래도 안 되면 링크에 ?v=2 를 붙이는 방법이 있습니다.

ZIP 이 안 열립니다

무압축으로 담은 표준 ZIP 이라 윈도우 탐색기·맥 파인더·반디집 모두 그대로 열립니다. 파일이 6개뿐이라 압축해 봐야 얻을 게 없어서 그렇게 만듭니다.