파비콘 만들기
이미지 하나로 사이트 아이콘 여러 크기를 한 번에 만들어요. HTML 태그도 같이 뽑아줘요.
이미지는 브라우저 안에서만 처리돼요. 서버로 전송되지 않아요.
파비콘 만들기 소개
이미지 하나를 올리면 사이트 아이콘에 필요한 크기를 한 번에 만들어요. 브라우저 탭용부터 iOS 홈 화면, 안드로이드 설치 아이콘까지 묶어서 ZIP으로 받고, head에 붙일 HTML 태그도 함께 뽑아 줘요. 배경과 모서리를 조절하고 밝은 화면·어두운 화면에서 어떻게 보이는지 미리 확인할 수 있어요.
왜 크기가 여러 개 필요한가요
브라우저 탭에 들어가는 아이콘은 아주 작아요. 반면 휴대폰 홈 화면에 추가하면 앱 아이콘만 한 크기로 나와요. 하나의 이미지를 늘리거나 줄여 쓰면 어느 한쪽에서 흐리거나 뭉개져요.
그래서 크기별로 따로 만들어 두고 기기가 알맞은 걸 골라 쓰게 해요. 브라우저와 운영체제가 각자 원하는 크기를 가져가요.
ZIP 안에는 아이콘 파일과 함께 안드로이드 설치 아이콘이 참조하는 설정 파일도 들어 있어요. 이 파일이 있어야 홈 화면에 추가했을 때 제대로 보여요.
어떤 이미지를 올려야 하나요
정사각형에 가까울수록 좋아요. 정사각형이 아니면 가운데를 기준으로 잘라내기 때문에 가장자리 요소가 사라질 수 있어요.
단순한 형태가 유리해요. 탭 아이콘은 아주 작게 보여서 글자가 여러 개 들어간 로고는 알아볼 수 없어요. 심벌 하나나 첫 글자만 쓰는 편이 나아요.
512픽셀 이상이면 모든 크기를 깨끗하게 만들 수 있어요. 여백이 조금 있는 이미지가 어느 크기에서도 답답해 보이지 않아요.
배경과 모서리 정하기
투명 배경은 밝은 탭에서는 깔끔한데 어두운 탭에서는 아이콘이 묻힐 수 있어요. 탭 미리보기로 밝은 화면과 어두운 화면 둘 다 확인해 보세요.
흰색이나 브랜드 색으로 배경을 채우면 어느 환경에서도 안정적으로 보여요. 대신 둥근 모서리가 적용되는 곳에서는 배경 사각형이 살짝 보일 수 있어요.
iOS는 홈 화면 아이콘의 모서리를 알아서 깎아요. 그래서 원본은 각지게 두는 편이 안전해요. 미리 둥글게 만들면 이중으로 깎여 어색해져요.
파비콘 만들기 사용 방법
- 정사각형에 가까운 이미지를 올려요.
- 배경과 모서리를 정하고 크기별 미리보기를 확인해요.
- 탭 미리보기로 밝은 화면·어두운 화면에서 묻히지 않는지 봐요.
- ZIP으로 받아 사이트에 올리고 HTML 태그를 head에 붙여요.
자주 묻는 질문
- 어떤 이미지를 올리면 되나요?
- 정사각형에 여백이 조금 있는 단순한 이미지가 좋아요. 512픽셀 이상이면 모든 크기를 깨끗하게 만들 수 있어요.
- 어떤 파일이 필요한가요?
- 브라우저 탭용 작은 아이콘과 홈 화면용 큰 아이콘이 기본이에요. 안드로이드 설치 아이콘이 보는 설정 파일과 HTML 태그도 함께 나와요.
- 바꿨는데 예전 아이콘이 나와요.
- 브라우저가 아이콘을 오래 저장해 둬서 그래요. 캐시를 비우거나 파일 이름을 바꿔 올리면 반영돼요.
- 모서리를 둥글게 만들어야 하나요?
- iOS는 알아서 깎아요. 원본은 각지게 두는 편이 안전하고, 웹에서만 쓸 거라면 취향대로 정하면 돼요.
- 파일을 어디에 올려야 하나요?
- 기본은 사이트 최상위예요. 다른 경로에 둘 거라면 화면에서 경로를 바꾸면 태그도 그에 맞게 나와요.
- favicon.ico만 받을 수도 있나요?
- 네, 그 파일 하나만 따로 저장할 수 있어요.
알아 두면 좋은 점
- 정사각형이 아닌 이미지는 가운데를 기준으로 잘려요.
- 아이콘을 바꾸면 브라우저가 한동안 예전 것을 보여줄 수 있어요.