이미지 한 장으로 완성. favicon.ico와 사이즈별 PNG, 붙여넣을 HTML 스니펫까지 ZIP으로 받으세요.
클릭해서 파일을 선택하세요 이미지를 끌어다 놓으세요
정사각형 PNG 권장 (512px 이상)
이렇게 사용하세요
- 1아이콘으로 쓸 이미지를 끌어다 놓거나 클릭해서 올려요. (정사각형 PNG, 512px 이상 권장)
- 2올리는 즉시 favicon.ico와 여러 크기의 PNG가 자동으로 만들어져요.
- 3함께 뜨는 HTML 코드를 복사해 사이트 <head>에 붙여 넣어요.
- 4ZIP 다운로드를 눌러 파일을 받아 사이트 폴더에 넣으면 끝!
알아두면 좋은 팁
- 정사각형 이미지를 올려야 찌그러지지 않아요. 가로세로가 다르면 비율이 눌릴 수 있어요.
- 아이콘은 작게 표시되니, 가는 선이나 잔글씨보다 단순하고 또렷한 모양이 잘 보여요.
- ZIP 안의 파일을 사이트 최상위 폴더에 그대로 두면 코드의 경로(/favicon.ico 등)가 바로 맞아떨어져요.
ZIP에 담기는 파일들 — 파비콘 규격 한눈에
받는 ZIP에는 favicon.ico 하나에 16·32·48px 이미지가 겹겹이 들어 있어요. 브라우저가 상황에 맞는 크기를 알아서 골라 쓰기 때문에 하나만 넣어도 탭·북마크·주소창에서 또렷하게 보여요. 여기에 favicon-16x16.png와 favicon-32x32.png도 따로 담겨, ico를 잘 못 읽는 환경에서도 PNG로 대체돼요.
아이폰·아이패드에서 홈 화면에 사이트를 추가할 때 쓰는 apple-touch-icon.png는 180px로 만들어져요. 안드로이드·PWA용으로는 192px와 512px PNG가 들어가고, 이 둘을 연결해 주는 site.webmanifest도 함께 담겨요. 즉 데스크톱 탭부터 스마트폰 홈 화면 아이콘까지 한 세트로 챙겨지는 거예요.
잘 나오는 원본 만들기 — 단순·고대비·정사각
파비콘은 화면에서 16~32px 정도로 아주 작게 표시돼요. 그래서 자잘한 글자나 가느다란 선은 뭉개져 알아보기 어려워요. 로고에서 핵심 심벌 하나만 크게 남기거나, 회사 이름의 첫 글자만 뽑아 쓰는 식으로 최대한 단순하게 만드는 게 좋아요. 배경과 심벌의 색 대비가 뚜렷할수록 작은 크기에서도 눈에 잘 띄어요.
원본은 정사각형으로 준비하세요. 가로세로 비율이 다르면 정사각 아이콘에 맞추느라 눌리거나 늘어나 보일 수 있어요. 여백도 살짝 넉넉히 두면 아주 작게 줄었을 때 심벌이 가장자리에 붙어 답답해 보이지 않아요. 512px 이상의 정사각 PNG로 올리면 모든 크기가 선명하게 뽑혀요. 배경이 투명한 PNG를 쓰면 어떤 탭 색이나 홈 화면 배경 위에서도 아이콘이 깔끔하게 얹혀요.
받은 파일 사이트에 적용하는 법
ZIP을 풀면 나오는 PNG·ico·webmanifest 파일을 사이트의 최상위 폴더(루트)에 그대로 올려요. 그다음 화면에 함께 표시되는 HTML 코드를 복사해 페이지의 <head> 태그 안에 붙여 넣으면 돼요. 이 코드가 어떤 상황에 어떤 아이콘을 쓸지 브라우저에게 알려주는 안내판 역할을 해요.
코드 속 경로는 /favicon.ico처럼 루트 기준으로 적혀 있어요. 그래서 파일을 루트에 두기만 하면 경로를 손볼 필요 없이 바로 동작해요. 워드프레스나 노션·티스토리처럼 <head>를 직접 못 건드리는 서비스라면, 각 서비스의 "파비콘 설정" 항목에 favicon.ico나 512px PNG를 올리는 방법을 쓰면 돼요.
자주 묻는 질문
favicon.ico와 favicon-16x16.png·favicon-32x32.png 같은 여러 크기의 PNG, 애플 기기용 apple-touch-icon.png, 192·512px PNG, site.webmanifest, 그리고 붙여 넣을 HTML 코드(snippet.html)까지 들어 있어요.
화면에 함께 표시되는 코드를 그대로 복사해서 사이트의 <head> 안에 붙여 넣으면 돼요. ZIP 파일들을 사이트 최상위에 두면 코드 속 경로가 바로 동작해요.
PNG·JPG·WebP 같은 이미지면 올릴 수 있고, 투명 배경이 깔끔하게 나오는 정사각형 PNG(512px 이상)를 권장해요. 결과는 favicon.ico와 PNG 세트로 만들어져요.
아니요. 모든 처리가 브라우저 안에서만 이뤄져서 로고 원본이 기기 밖으로 나가지 않아요. ZIP도 브라우저에서 바로 만들어 받는 거예요.
아이콘이 쓰이는 자리가 저마다 크기가 달라서예요. 브라우저 탭은 16~32px, 북마크나 바로가기는 그보다 크고, 스마트폰 홈 화면 아이콘은 훨씬 커요. 각 자리에 맞는 크기를 미리 담아두면, 하나를 억지로 늘리거나 줄여 흐릿해지는 일 없이 어디서나 또렷하게 보여요. favicon.ico 하나에도 16·32·48px가 함께 들어 있어 브라우저가 알아서 골라 써요.
브라우저가 예전 파비콘을 캐시에 저장해 두고 계속 보여주는 경우가 많아요. 새로고침을 강하게 하거나(Ctrl/Cmd+Shift+R), 시크릿 창에서 열어 보거나, 잠시 뒤 다시 확인해 보세요. 파일 경로가 코드와 맞는지, 파일이 정말 루트에 올라갔는지도 함께 확인하면 좋아요.