파비콘 만들기
파비콘은 크기가 여러 개 필요합니다. 브라우저용 16·32·48px, 애플 기기용 180px, 웹앱 아이콘용 192·512px입니다. 이 도구가 이 크기를 모두, 여러 크기가 든 favicon.ico와 함께 만들어 주며 업로드는 없습니다.
사용 방법
- 글자/이모지를 고르고 한 글자에서 세 글자를 입력하거나, 이미지를 고르고 로고를 끌어다 놓습니다(최대 50MB). 정사각형이 아닌 이미지는 가운데를 기준으로 잘립니다.
- 배경색, 글자색, 모양을 고릅니다. 모서리를 비치게 하려면 배경 투명을 켜세요. 애플 아이콘만은 항상 단색 배경을 유지합니다.
- 각 파일의 다운로드 버튼으로 저장하고, link 태그는 페이지 head에, 매니페스트는 site.webmanifest 파일로 복사해 넣습니다. 파일은 모두 사이트 최상위 폴더에 올립니다.
계산 방법
크기마다 따로 캔버스에 그립니다. 큰 이미지는 마지막 축소 전에 절반씩 줄여서 16px에서도 가는 선이 읽히게 합니다. 글자는 측정한 높이로 가운데에 맞추고, 칸을 넘으면 자동으로 줄입니다.
favicon.ico는 이 페이지가 바이트 단위로 직접 만듭니다. 6바이트 헤더, 크기마다 16바이트 항목, 그 뒤에 PNG 파일 자체가 이어집니다. 최신 브라우저와 윈도우는 ICO 안의 PNG를 읽으므로 파일 하나로 16·32·48px을 모두 해결합니다.
서버로 보내는 것은 없습니다. 이미지는 브라우저가 직접 읽고, 아이콘은 이 탭 안에만 있으며, 다운로드를 누르면 내 기기에 바로 저장됩니다.
크기별 쓰임
| 파일 | 크기(px) | 쓰임 |
|---|---|---|
| favicon.ico | 16, 32, 48 | 브라우저 탭, 오래된 브라우저, 윈도우 |
| favicon-32x32.png | 32 | 고해상도 화면의 탭과 북마크 |
| apple-touch-icon.png | 180 | 아이폰·아이패드 홈 화면 |
| android-chrome-192x192.png | 192 | 안드로이드 홈 화면 |
| android-chrome-512x512.png | 512 | 안드로이드 스플래시, 설치형 앱 |
파일 두는 위치
모든 파일을 사이트 최상위 폴더에 올려서 내사이트.com/favicon.ico 주소로 아이콘이 열리게 하세요. 브라우저는 태그가 없어도 /favicon.ico를 스스로 요청합니다. 파비콘을 바꾼 뒤에는 브라우저 캐시 때문에 탭에 한동안 예전 아이콘이 보일 수 있습니다. 아이콘 주소를 직접 열어 새로고침하면 확인됩니다.
자주 묻는 질문
로고가 업로드되나요?
아니요. 이미지를 그리고 인코딩하는 모든 과정이 이 브라우저 탭 안에서 이뤄집니다. 업로드도 계정도 없고 다른 곳에 사본이 남지도 않습니다.
꼭 필요한 파일은 무엇인가요?
사이트 루트의 favicon.ico 하나면 거의 모든 브라우저에서 됩니다. 32px PNG, 180px 애플 터치 아이콘, 192·512px 아이콘을 더하면 탭, 북마크, 아이폰 홈 화면, 안드로이드 설치까지 다 챙길 수 있습니다.
애플 아이콘은 왜 둥글지도 투명하지도 않나요?
iOS가 모서리를 알아서 둥글게 처리하고 투명한 부분은 검게 보여 줍니다. 그래서 180px 아이콘은 홈 화면에서 제대로 보이도록 항상 단색 배경의 정사각형으로 만듭니다.
어떤 이미지로 시작하면 좋나요?
로고가 가운데에 있고 주위에 여백이 조금 있는 512×512px 이상의 정사각형 PNG가 좋습니다. 세부가 많은 그림은 16px에서 알아보기 어려워서 단순한 심벌이나 글자 하나가 가장 잘 맞습니다.
이모지가 다른 기기에서 다르게 보이나요?
이모지는 내 기기의 글꼴로 그려지므로 아이콘에는 내 시스템의 그림이 쓰입니다. 한번 저장한 PNG는 바뀌지 않으니 방문자 모두에게 같은 그림으로 보입니다.