파비콘 만들기
한 장의 이미지로 모든 크기의 파비콘을 만듭니다.
로고를 끌어 놓거나 클릭해서 고르세요
PNG, SVG, JPG, WebP, ICO. 512 × 512 px 이상의 정사각형 로고가 가장 좋습니다. 파일은 브라우저에서만 처리되고 업로드되지 않습니다. 이 브라우저에 보관되며, 빼기 전까지 남습니다.
Ctrl+O고르기Ctrl+V붙여넣기
파비콘은 브라우저 탭과 북마크에 보이는 작은 아이콘이고, 휴대폰에서는 사이트를 홈 화면에 추가할 때 더 큰 아이콘을 씁니다. 로고 한 장을 끌어 놓으면 favicon.ico, PNG 파비콘, 애플 터치 아이콘, 안드로이드 아이콘, 웹 매니페스트까지 웹사이트에 필요한 파일을 모두 만들고, 미리보기와 페이지에 붙여 넣을 HTML도 보여 줍니다. 브라우저 안에서 만들어 로고가 기기 밖으로 나가지 않으며, 무료이고 가입도 필요 없습니다.
파비콘 만드는 방법
- 로고(PNG, SVG, JPG, WebP)를 페이지 어디에나 끌어 놓거나, Ctrl+V로 붙여넣거나, 클릭해서 고릅니다. 다른 이미지 도구에서 넣은 이미지는 그 도구에서 손본 모습 그대로 이미 목록에 있으니 썸네일을 눌러 고르면 됩니다. 샘플 로고로 파일 없이 해 볼 수도 있습니다.
- 로고는 알아서 맞춰집니다. 가로로 긴 로고는 심벌을, 빈 가장자리가 있는 로고는 그림 부분만 씁니다. 로고 위의 정사각형 상자를 끌어 바꾸거나 ‘로고 전체 넣기’를 고르세요. 배경(로고의 색이 먼저 나옵니다), 여백, 모양을 고르면 미리보기가 바로 바뀝니다.
- 모두 저장 (ZIP)을 눌러 파일을 사이트의 최상위 폴더에 넣고, HTML 복사를 눌러 페이지의 <head>에 붙여 넣습니다.
주요 기능
- 16·32·48px가 든 favicon.ico와 16·32px PNG 파비콘
- apple-touch-icon.png(180px)와 안드로이드 크롬 아이콘(192·512px)
- 앱 이름과 테마 색이 든 site.webmanifest, <head>에 넣을 HTML 태그
- 가로로 긴 로고의 심벌을 자동으로 찾기, 정사각형 상자를 끌어 다른 부분 선택 또는 로고 전체 넣기
- 배경은 투명, 로고의 색, 원하는 색 중에서, 여백 0–30%, 사각·둥근 사각·원 모양
- 모든 크기와 브라우저 탭, 홈 화면 미리보기(라이트·다크)
- PNG, SVG, JPG, WebP, ICO에서 시작, 모든 파일을 ZIP 하나로
개인정보는 안전한가요?
네. 아이콘은 브라우저 안의 WebAssembly 이미지 엔진이 만들며, 로고와 파일은 기기 밖으로 나가지 않습니다. 로고는 목록에서 뺄 때까지 이 브라우저에만 남습니다.
자주 묻는 질문
파비콘은 어떤 크기가 필요한가요?
파일 네 가지면 거의 모든 곳에 맞습니다. 16·32·48px가 든 favicon.ico가 브라우저 탭, 북마크, Windows 바로 가기를, 180px apple-touch-icon.png가 iPhone·iPad 홈 화면을, site.webmanifest에 적힌 192·512px PNG가 안드로이드와 설치형 웹 앱을 맡습니다. ZIP에는 이 파일들과 PNG를 선호하는 브라우저용 16·32px PNG가 모두 들어 있습니다.
파비콘을 HTML에 어떻게 넣나요?
파일을 사이트의 최상위 폴더에 넣어 /favicon.ico가 열리게 한 뒤, HTML 복사를 눌러 모든 페이지의 <head>에 붙여 넣습니다. 브라우저는 태그가 없어도 /favicon.ico를 찾고, 태그는 PNG 크기와 애플 아이콘, 매니페스트를 알려 줍니다.
apple-touch-icon.png에는 왜 배경이 들어가나요?
iPhone과 iPad가 투명한 부분을 검게 보여 주고 모서리를 스스로 둥글게 만들기 때문입니다. 그래서 애플 아이콘은 늘 꽉 찬 불투명 정사각형으로, 고른 배경색을 쓰고 배경이 투명이면 흰색을 씁니다. 다른 아이콘은 투명도와 모양을 그대로 유지합니다.
SVG 로고도 쓸 수 있나요?
네. 브라우저가 SVG를 원래 크기로, 1024px보다 작으면 1024px로 그린 뒤 모든 아이콘을 만듭니다. 다른 파일(이미지, 글꼴, 스타일시트)을 연결한 SVG는 이미지로 그릴 때 그 파일을 불러오지 못하므로, 빠진 아이콘을 만드는 대신 알려 드립니다. PNG로 내보내거나 이미지를 SVG 안에 넣은 뒤 다시 추가하세요.
파비콘을 바꿨는데 브라우저에 예전 아이콘이 보여요.
브라우저가 파비콘을 오래 캐시하기 때문입니다. Ctrl+F5(Mac은 Cmd+Shift+R)로 새로 고치거나 시크릿 창에서 열면 새 아이콘이 보입니다.