아이콘·파비콘
파비콘 만드는 법 — PNG를 ICO로 변환해 웹사이트 아이콘 넣기
※ 이 글에는 제휴(파트너스) 링크가 포함되어 있으며, 링크를 통해 가입·구매가 이뤄지면 운영자가 일정 수수료를 받을 수 있습니다. 구매자의 추가 비용은 없습니다.
💬 파비콘 하나만 넣어도 사이트가 훨씬 "완성된" 느낌이 납니다. 5분이면 충분해요.
파비콘(favicon)이란?
브라우저 탭 왼쪽, 즐겨찾기 목록, 스마트폰 홈 화면에 뜨는 작은 사이트 아이콘이 파비콘입니다. "favorite + icon"에서 온 말이에요.
작지만 역할은 큽니다. 탭이 여러 개 열려 있을 때 내 사이트를 한눈에 찾게 해주고, 브랜드 인상을 남기며, 검색 결과에도 노출돼 신뢰도와 클릭률을 높여줍니다.
왜 하필 ICO 포맷일까?
파비콘은 보통 favicon.ico 파일로 씁니다. ICO는 여러 크기의 아이콘을 하나의 파일에 담을 수 있는 특별한 포맷이에요.
- 탭에서는 16×16, 즐겨찾기는 32×32, 바로가기는 48×48…
- ICO 하나에 이 크기들을 모두 담아두면 브라우저가 상황에 맞는 크기를 골라 씁니다
PNG도 파비콘으로 쓸 수 있지만, 폭넓은 호환성과 다중 크기를 위해 ICO가 가장 안전한 선택입니다.
① 아이콘 이미지 준비하기
파비콘은 아주 작게 표시되므로 단순할수록 좋습니다. 복잡한 로고보다 글자 한두 개, 심볼 하나, 뚜렷한 색이 훨씬 잘 보여요.
- 정사각형(1:1)으로 준비 — 찌그러지지 않게
- 배경은 투명 PNG로 만들면 어디에나 잘 어울림
- 최소 256×256 이상으로 크게 만들어두면 축소해도 선명
| 용도 | 크기(px) | 비고 |
|---|---|---|
| 브라우저 탭 | 16×16 | 가장 기본 |
| 즐겨찾기·주소창 | 32×32 | 선명하게 |
| 바로가기 아이콘 | 48×48 | 데스크톱 |
| 원본 준비 | 256×256+ | 축소 대비 크게 |
② PNG를 ICO로 변환하기
준비한 PNG를 ICO로 바꿀 차례입니다. YN 변환기에서 출력 형식을 ICO로 고르면, 파비콘에 필요한 여러 크기를 자동으로 담은 favicon.ico가 만들어집니다.
- 준비한 정사각 PNG를 드래그
- 출력 형식에서 ICO 선택
- 「변환하기」 → favicon.ico 다운로드
파일을 서버에 올리지 않고 브라우저 안에서 변환되니 안전합니다.
③ 사이트에 적용하기
변환한 favicon.ico를 사이트 최상위 폴더에 올리고, HTML의 <head>에 아래 한 줄만 넣으면 끝입니다.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
티스토리·워드프레스·네이버 블로그 등은 관리자 설정의 「파비콘 업로드」 메뉴에 파일만 올리면 됩니다. 아래 표에서 용도별 권장 크기를 확인하세요.
무료로 파비콘 만들기
디자인 프로그램이나 별도 사이트 없이도, YN 변환기 하나로 PNG를 파비콘용 ICO로 바로 변환할 수 있습니다. 다중 크기 ICO를 지원하고, 설치·가입·워터마크가 없습니다.
아래 버튼을 눌러 여러분의 사이트에 딱 맞는 파비콘을 5분 만에 만들어보세요.
✅ 핵심 요약
- 파비콘은 탭·즐겨찾기에 뜨는 사이트 아이콘
- ICO는 여러 크기를 한 파일에 담는 포맷
- 단순한 디자인 + 정사각 PNG로 시작
- YN 변환기로 PNG→ICO 변환 후 head에 link 한 줄
💡 TIP
- 작게 보이므로 글자 1~2개나 심볼 하나로 단순하게 만드세요.
- 원본은 256px 이상으로 크게 만들면 축소해도 선명합니다.
- 투명 배경 PNG로 만들면 밝은/어두운 테마 모두에 어울립니다.
📌 체크리스트
- 이미지가 정사각형인가?
- 아주 작게 축소해도 알아볼 수 있는가?
- ICO에 여러 크기가 담겼는가?
- head에 link 태그를 넣었는가?