🚀 같은 이모지를 몇 초 만에 파비콘으로 만듭니다. 배경색과 원형·둥근 사각형·사각형 모양을 고르고 ICO, PNG, SVG, 애플 터치 아이콘을 내려받으세요. 사이드 프로젝트, 시제품, 사내 도구에 간편합니다.
사용법
- 한두 글자나 이모지를 입력하거나, ‘이미지’로 바꿔 로고를 끌어다 놓습니다 (SVG가 가장 좋습니다).
- 배경, 글자색, 모양, 여백을 고릅니다. 미리보기가 바로 바뀝니다.
- 전체를 ZIP으로 내려받거나 파일을 하나씩 눌러 내려받습니다.
- HTML 코드를 페이지의 <head>에 붙여 넣고 파일을 사이트 루트 폴더에 올립니다.
- favicon.ico에는 모든 브라우저용 16, 32, 48 px PNG 아이콘이 들어 있고, favicon.svg는 어떤 크기에서도 선명합니다.
- iOS가 모서리를 직접 둥글게 처리하므로 apple-touch-icon.png는 투명하지 않은 정사각형으로 만듭니다.
- maskable 아이콘은 로고를 안전 영역 안에 두어 안드로이드가 어떤 모양으로 잘라도 보이게 합니다.
- 모든 파일은 브라우저에서 만들어지며 이미지는 업로드되지 않습니다.
요즘 파비콘 세트 구성
favicon.ico에는 16·32·48px 이미지가 들어 있고, 지금도 많은 브라우저와 도구가 사이트 루트에서 이 파일을 찾습니다. favicon.svg는 어떤 크기에서도 선명하며 최신 브라우저가 사용합니다. apple-touch-icon.png(180×180)는 아이폰 홈 화면에 사이트를 추가할 때 보입니다. android-chrome-192x192와 512x512, 512px 마스커블 아이콘은 안드로이드와 설치형 웹앱을 위해 site.webmanifest에 적습니다.
HTML 코드가 이 파일들을 모두 연결하므로 head에 붙여 넣고 파일을 루트 폴더에 올리기만 하면 됩니다.
16px에서도 알아보는 아이콘
브라우저 탭에서 파비콘은 고작 16×16픽셀로 보입니다. 글자가 들어간 로고 전체보다 굵은 글자 한두 개, 단순한 기호, 로고의 심벌만 쓰는 편이 훨씬 잘 보입니다. 배경과 그림의 대비를 강하게 하면 밝은 테마와 어두운 테마 모두에서 잘 보입니다. 내려받기 전에 밝은 탭과 어두운 탭 미리보기로 꼭 확인하세요.
애플 아이콘과 마스커블 아이콘
iOS는 모서리를 알아서 둥글게 깎고 투명 배경을 잘 처리하지 못해서, 애플 터치 아이콘은 불투명한 정사각형으로 만듭니다. 안드로이드는 마스커블 아이콘을 원 같은 모양으로 잘라 낼 수 있어, 중요한 부분이 잘리지 않도록 디자인을 안전 영역 안에 둡니다.
자주 묻는 질문
파비콘 크기는 얼마로 해야 하나요?
여러 크기가 필요합니다. favicon.ico 안의 16·32·48px, 모든 크기에 맞는 SVG, 애플 기기용 180×180, 안드로이드용 192px와 512px입니다. 이 생성기는 모두 한 번에 만듭니다.
favicon.ico가 아직도 필요한가요?
네. 일부 브라우저, RSS 리더 같은 도구는 여전히 사이트 루트의 /favicon.ico를 찾습니다. 두면 아이콘이 비거나 404 오류가 나는 일을 막을 수 있습니다.
웹사이트에 파비콘을 적용하려면?
ZIP 안의 파일을 사이트 루트 폴더에 올리고, HTML 코드를 모든 페이지의 head에 붙여 넣으세요. 캐시를 지우고 새로 고치면 새 아이콘이 보입니다.
새 파비콘이 바로 안 보이는 이유는?
브라우저가 파비콘을 오래 캐시하기 때문입니다. 아이콘 주소를 직접 열거나 강력 새로 고침을 하거나 시크릿 창에서 확인하세요. 검색 결과에 반영되기까지는 시간이 걸릴 수 있습니다.
이모지로 파비콘을 만들 수 있나요?
네. 이모지를 입력하고 배경과 모양을 고르면 아이콘이 그려집니다. 이모지는 운영체제마다 모양이 조금 다르고, 저장한 파일은 만든 기기에서 보이던 모양을 따릅니다.
로고가 업로드되나요?
아니요. 아이콘을 그리고 ZIP으로 묶는 과정이 모두 브라우저 안에서 이루어져 로고가 기기 밖으로 나가지 않습니다.