파비콘 만들기 (favicon.ico 생성)

<strong>정사각형</strong>에 가깝고 <strong>단순한</strong> 그림이 좋습니다. 파비콘은 16px, 그러니까 글자 한 자 크기로 표시됩니다. 로고에 글자가 들어 있으면 그 크기에서는 읽히지 않습니다. 직사각형 그림을 넣으면 <strong>가운데를 정사각형으로 잘라</strong> 씁니다 — 늘려서 맞추면 찌그러지기 때문입니다.

쓰는 곳마다 필요한 형식이 다르기 때문입니다. <strong>favicon.ico</strong>는 브라우저 주소창과 즐겨찾기, <strong>apple-touch-icon.png</strong>는 아이폰 홈 화면, <strong>icon-192·512.png</strong>는 안드로이드 홈 화면에 쓰입니다. 하나만 두면 어딘가에서는 흐릿하게 나오거나 안 나옵니다.

브라우저는 PNG·JPG는 만들어도 ICO는 만들지 못합니다. 그런데 ICO의 구조는 아주 단순합니다 — 머리말과 목록, 그림 데이터를 이어 붙인 것뿐이고, 요즘 ICO는 안에 <strong>PNG를 그대로 담을 수 있습니다.</strong> 그래서 브라우저가 만든 PNG 여러 장을 그 형식대로 엮었습니다. 만든 뒤에는 규격대로인지 되읽어 확인합니다.

웹사이트의 <strong>최상위 폴더</strong>(index.html이 있는 곳)에 그대로 넣으세요. 그리고 함께 드리는 HTML 조각을 <code>&lt;head&gt;</code> 안에 붙여 넣으면 됩니다. 파일 이름을 바꾸면 HTML도 같이 고쳐야 하니, 그대로 두시는 편이 간단합니다.

브라우저가 파비콘을 아주 오래 기억하기 때문입니다. 새로고침으로는 잘 안 바뀝니다. <strong>강력 새로고침</strong>(Ctrl+Shift+R)을 하거나, 주소창에 <code>주소/favicon.ico</code>를 직접 입력해 새 아이콘을 한 번 열어 보세요. 그래도 안 되면 시크릿 창에서 확인하시면 됩니다.

네. 투명한 PNG를 넣으면 투명한 채로 유지됩니다. 다만 브라우저 탭은 밝은 배경일 때도 어두운 배경일 때도 있어서, <strong>투명한 아이콘은 한쪽에서 잘 안 보일 수 있습니다.</strong> 배경색을 정해 두는 편이 안전할 때가 많습니다 — 아래에서 채울 색을 고를 수 있습니다.