파비콘 만들기 (PNG ICO 변환) 사용 방법
- 1로고를 PNG, JPG, SVG, WebP로 넣으세요. 512px 이상 정사각형이 가장 좋아요.
- 2실시간 미리보기를 보면서 여백, 배경색, 모서리 둥글기를 조절하세요.
- 3라이트·다크 브라우저 탭과 실제 크기 아이콘을 확인하고 사이트 이름과 테마 색상을 정하세요.
- 4ZIP 다운로드를 눌러 파일을 모두 받으세요.
- 5파일을 사이트 최상위 폴더에 올리고, HTML 코드를 페이지 <head> 안에 붙여 넣으세요.
만들어지는 파일
- favicon.ico: 16, 32, 48px 이미지가 들어 있어 브라우저 탭, 즐겨찾기, 윈도우에서 쓰여요.
- favicon-16x16.png, favicon-32x32.png: 최신 브라우저용이에요.
- apple-touch-icon.png(180 x 180): 아이폰·아이패드 홈 화면 아이콘이에요.
- android-chrome-192x192.png, 512x512: site.webmanifest에 연결돼 안드로이드와 설치형 웹앱에서 쓰여요.
- favicon.svg: SVG로 시작하면 함께 만들어져 어떤 크기에서도 선명해요.
- 바로 붙여 넣는 HTML 코드(ZIP에도 들어 있어요).
작은 아이콘을 잘 만드는 요령
16px에서는 가는 선과 작은 글씨가 사라져요. 전체 로고보다 심볼이나 글자 한두 개를 쓰는 게 좋아요. 16px 4배 확대 미리보기로 실제로 보일 픽셀을 확인하세요. 로고가 가장자리에 닿으면 여백을 조금 주고, 어두운 로고가 다크 모드 탭에서 안 보이면 배경색을 넣으세요. 라이트·다크 탭 미리보기로 둘 다 확인할 수 있어요.
아이폰은 애플 터치 아이콘의 투명한 부분을 검게 표시해요. 그래서 배경이 투명하면 이 아이콘에만 고른 단색(기본 흰색)을 넣어요. 모서리는 애플이 알아서 둥글게 깎으니 정사각형으로 저장해요.
파비콘 적용 방법
모든 파일을 홈페이지 최상위 폴더(index.html과 같은 위치)에 올리고 코드를 <head> 안에 붙여 넣으세요. 워드프레스나 아임웹 같은 빌더는 보통 사이트 설정에 파비콘 업로드 칸이 있어서 favicon.ico나 PNG만 올리면 돼요. 브라우저가 파비콘을 오래 캐시하니 시크릿 창이나 강력 새로고침으로 확인하세요. 로고 크기를 따로 바꾸려면 이미지 크기 조절을 쓰세요. 이미지는 브라우저에서만 처리되고 업로드되지 않아요.
자주 묻는 질문
favicon.ico 안에는 어떤 크기가 들어 있나요?
16 x 16, 32 x 32, 48 x 48px 세 가지가 PNG 형식으로 들어 있어요. 최신 브라우저와 윈도우 모두 지원해요.
아직도 favicon.ico가 필요한가요?
네. 가장 확실한 기본값이에요. 일부 프로그램, RSS 리더, 오래된 브라우저는 링크 태그가 없어도 /favicon.ico를 바로 찾아요.
동그란 파비콘도 만들 수 있나요?
네. 모서리에서 원형을 고르고 배경색을 넣으면 동그란 색 타일이 돼요. 배경이 투명하면 이미지 자체가 원 모양으로 잘려요.
어떤 이미지를 넣어야 하나요?
SVG나 512 x 512px 이상 정사각형 PNG가 가장 좋아요. 더 작은 이미지도 되지만 512px 안드로이드 아이콘이 확대돼서 흐려 보여요.
파일은 어디에 올리나요?
사이트 최상위 폴더에 올려서 example.com/favicon.ico 같은 주소로 열리게 하세요. 그다음 HTML 코드를 모든 페이지나 템플릿의 head에 붙여 넣으세요.
로고가 업로드되나요?
아니요. 모든 아이콘은 내 기기의 브라우저에서 그려져요.