파비콘 생성기

파일 하나로 끝나지 않는 이유

예전에는 favicon.ico 하나면 됐습니다. 지금은 아이콘이 나가는 자리가 늘었고 자리마다 요구하는 크기가 다릅니다. 브라우저 탭은 16~32px, 아이폰 홈 화면은 180px, 안드로이드 홈 화면과 PWA는 192·512px입니다. 큰 이미지 하나를 브라우저가 줄여 쓰게 두면 작은 크기에서 뭉개집니다.

실무 최소 조합은 32(탭), 180(apple-touch-icon), 192·512(안드로이드·PWA) 네 개입니다. 16은 32가 있으면 브라우저가 알아서 줄여 쓰지만, 아주 작은 크기에서 형태가 뭉개진다면 따로 넣는 편이 선명합니다. 48은 구글이 검색결과 아이콘용으로 참고하는 크기라 넣어 두면 좋습니다.

apple-touch-icon은 별도 규칙이 있습니다. iOS는 이 아이콘의 투명 영역을 검은색으로 채워 버리므로, 홈 화면에 추가했을 때 로고 주변이 시커멓게 나오는 사고가 납니다. apple-touch-icon으로 쓸 이미지는 배경을 불투명하게 채우세요. "여백·배경 채우기"를 흰색이나 지정한 색으로 두면 됩니다.

16px에서 살아남는 디자인

오른쪽의 "브라우저 탭 미리보기"가 이 도구에서 가장 쓸모 있는 부분입니다. 실제 탭에서 보이는 16px 크기 그대로 그리기 때문에, 여기서 뭉개지면 실제 탭에서도 뭉개집니다. 96px 미리보기에서 예뻐 보이는 것에 속지 마세요.

16~32px에서는 디테일이 전부 사라집니다. 글자 획, 그라데이션, 얇은 선, 회사명 전체는 회색 덩어리가 됩니다. 살아남는 것은 단순한 도형, 굵은 획, 강한 명도 대비뿐입니다.

• 로고 전체를 우겨넣지 말고 심볼만 잘라 쓰거나 머리글자 한 글자를 크게 씁니다. 글자 모드가 그 용도입니다.
• 가로로 긴 로고는 축소하면 아무것도 안 보입니다. contain 으로 넣으면 위아래 여백만 남고 심볼은 점이 됩니다.
• 배경과 아이콘의 명도 차이를 크게 둡니다. 연한 회색 배경에 연한 파랑 로고는 탭에서 안 보입니다.
• 다크 모드 탭도 고려하세요. 검은 글자에 투명 배경이면 어두운 테마의 탭에서 사라집니다. 불투명 배경을 넣는 편이 안전합니다.
• 글자 모드에서 한글 두 글자보다 한 글자가 훨씬 잘 읽힙니다. 글자 크기 슬라이더를 올리면 더 커 보입니다.

검색결과에 뜨는 파비콘

구글 모바일 검색결과에서 사이트 이름 옆에 뜨는 작은 아이콘이 파비콘입니다. 이게 안 뜬다는 문의가 꽤 있는데, 구글이 밝힌 조건은 대략 이렇습니다.

• link rel="icon" 태그가 홈페이지(사이트 루트) HTML에 있어야 합니다. 개별 글 페이지에만 있으면 안 됩니다.
• 아이콘 파일이 크롤링 가능해야 합니다 — robots.txt로 이미지 경로를 막아 두면 구글이 못 읽습니다. 의외로 흔한 원인입니다.
• 정사각형이어야 하고, 48px의 배수 크기(48·96·144·192…)가 권장됩니다. 512px 정사각형 하나면 대부분 충족됩니다.
• 주소가 안정적이어야 합니다. 배포마다 해시가 바뀌는 파일명은 피하세요.
• 반영에는 시간이 걸립니다. 구글이 홈페이지를 다시 크롤링해야 하며, 며칠에서 몇 주까지 걸릴 수 있습니다.

바꿨는데 예전 게 계속 보입니다

파비콘은 브라우저 캐시가 유난히 질깁니다. 일반 새로고침으로는 거의 안 바뀌고, 강력 새로고침(Ctrl+Shift+R)으로도 안 되는 경우가 흔합니다. 브라우저가 파비콘을 페이지 캐시와 별도로 저장하기 때문입니다.

1. 먼저 파일이 실제로 바뀌었는지 확인합니다 — 브라우저 주소창에 아이콘 주소(예: https://example.com/favicon-32.png)를 직접 입력해 새 이미지가 나오는지 봅니다. 옛 이미지가 나오면 업로드가 안 된 것입니다.
2. 시크릿 창에서 사이트를 엽니다. 여기서 새 아이콘이 보이면 순수한 캐시 문제입니다.
3. link 태그 주소에 ?v=2 를 붙여 새 주소로 만듭니다. 가장 확실한 방법입니다.
4. 그래도 안 되면 파일명 자체를 바꾸고 link 태그를 함께 수정합니다.
5. CDN·프록시를 쓴다면 그쪽 캐시도 비워야 합니다.