사용 방법
1
로고 고르기정사각형에 가까운 로고 이미지(PNG 권장)를 골라요.
2
모양 다듬기여백, 배경색, 둥근 모서리를 정하고 크기별 미리보기를 확인해요. 16px에서도 알아볼 수 있는지 꼭 보세요.
3
저장·적용favicon.ico와 필요한 PNG를 저장해 사이트 최상위 폴더에 올리고, 아래 코드를 <head>에 넣어요.
이럴 때 쓰면 좋아요
- 🌐 새로 만든 홈페이지·블로그 탭에 아이콘을 넣을 때
- 📱 휴대폰 홈 화면에 추가했을 때 보일 아이콘이 필요할 때
- 🛠️ 웹앱(PWA)의 192·512 아이콘이 필요할 때
어떤 크기가 필요한가요?
| 파일 | 크기 | 쓰이는 곳 |
|---|---|---|
| favicon.ico | 16·32·48 | 브라우저 탭, 즐겨찾기, 검색 결과 |
| apple-touch-icon.png | 180 | 아이폰·아이패드 홈 화면 |
| icon-192.png | 192 | 안드로이드 홈 화면, 웹앱 |
| icon-512.png | 512 | 웹앱 설치 화면(manifest) |
구글 검색 결과에도 파비콘이 표시돼요. 구글은 48px의 배수 크기를 권장하므로 favicon.ico에 48px을 함께 넣었어요.
작은 크기에서 잘 보이게
- 글자가 많은 로고보다 첫 글자나 심볼만 쓰는 것이 16px에서 훨씬 잘 보여요.
- 투명 배경 로고는 어두운 탭(다크 모드)에서 안 보일 수 있으니 배경 채우기를 켜 보세요.
- 여백을 5~10% 주면 아이폰 홈 화면에서 답답해 보이지 않아요.
자주 묻는 질문
favicon.ico는 어디에 두나요?
사이트 최상위 폴더(https://내사이트/favicon.ico)에 두면 코드가 없어도 대부분의 브라우저가 찾아요.
바꿨는데 예전 아이콘이 보여요.
브라우저가 파비콘을 오래 저장해 둬요. 강력 새로고침하거나 시간이 지나면 바뀌어요.
SVG 파비콘도 만들 수 있나요?
지금은 ICO와 PNG만 만들어요.
티스토리·워드프레스에도 쓸 수 있나요?
네. 각 서비스의 파비콘 설정에 만든 파일을 올리면 돼요.