파비콘(ICO) 만들기
브라우저 탭에 보이는 작은 아이콘, 파비콘을 만들어요. 로고 이미지를 넣거나 글자와 색만 골라도 필요한 크기가 전부 만들어져요.
로고 이미지를 여기에 놓으세요
정사각형 PNG나 SVG가 가장 깔끔해요
글자 (1~2자)
글자색
배경색
모양
글꼴
미리보기
HTML <head> 안에 붙여넣을 코드
이 도구는 브라우저 안에서만 작동해요. 넣은 파일과 글은 어떤 서버에도 올라가지 않아요.
마지막 점검: · 만든 곳 손끝공방
이렇게 쓰세요
- 1
이미지로 만들기에서 로고를 넣거나, 글자로 만들기에서 글자·색·모양을 고르세요.
- 2
16px부터 192px까지 실제 크기 미리보기를 확인하세요.
- 3
favicon.ico 받기 또는 전체 세트(ZIP)를 받아 웹사이트 최상위 폴더에 넣으세요.
- 4
아래 HTML 코드를 복사해
<head>안에 붙여넣으면 끝이에요.
파비콘 세트에는 무엇이 들어 있나요?
| 파일 | 쓰이는 곳 |
|---|---|
| favicon.ico (16·32·48px) | 모든 브라우저의 탭, 즐겨찾기 |
| favicon-32x32.png | 최신 브라우저의 고해상도 탭 아이콘 |
| apple-touch-icon.png (180px) | 아이폰·아이패드 홈 화면에 추가할 때 |
| android-chrome 192·512px | 안드로이드 홈 화면, 앱처럼 설치할 때 |
| site.webmanifest | 안드로이드 아이콘을 알려 주는 설정 파일 |
보기 좋은 파비콘을 만드는 요령
16픽셀은 정말 작아요. 로고 전체를 넣기보다 상징이 되는 한 부분이나 첫 글자만 쓰는 편이 훨씬 또렷해요. 배경색을 넣으면 밝은 탭과 어두운 탭 모두에서 잘 보여요.
자주 묻는 질문
티스토리·워드프레스에도 쓸 수 있나요?
네. 티스토리는 '블로그 관리 → 블로그 → 파비콘'에서, 워드프레스는 '사용자 정의하기 → 사이트 아이덴티티'에서 만든 이미지를 올리면 돼요.
파비콘을 바꿨는데 그대로예요.
브라우저가 예전 아이콘을 기억하고 있어서 그래요. 강력 새로고침(Ctrl+Shift+R)을 하거나 시간이 조금 지나면 바뀌어요.
SVG 로고도 넣을 수 있나요?
네, SVG를 넣으면 각 크기에 맞게 선명하게 그려서 저장해요.