파비콘 생성기
favicon-generator• 이미지 하나로 favicon.ico와 PNG 세트를 한 번에 만들어요. • 둥근 모서리·여백·배경 조절과 HTML 삽입 코드까지 zip으로.
캡처한 이미지는 바로 붙여넣어도 돼요 Ctrl + V
이미지는 브라우저에서만 처리돼요. 서버로 업로드되지 않아요.
파비콘 만들기 사용법
이미지를 끌어다 놓거나 클릭해서 고르면 바로 아이콘이 만들어져요. 로고처럼 정사각형에 가까운 이미지가 가장 좋고, 가로로 긴 이미지는 꽉 채우기를 쓰면 양옆이 잘리니 전체 넣기를 고르고 여백을 조금 주세요. 미리보기 오른쪽 숫자들은 실제 픽셀 크기 그대로예요. 파비콘은 결국 16px에서 알아볼 수 있느냐가 전부라, 큰 화면에서 예쁜 것보다 작게 줄였을 때 뭉개지지 않는 단순한 형태가 훨씬 나아요.
전체 zip 다운로드를 누르면 favicon.ico, 선택한 크기의 PNG, site.webmanifest, HTML 삽입 코드가 한 번에 들어 있어요. 16·32·48은 브라우저 탭과 북마크용, 180은 아이폰 홈 화면 바로가기용, 192와 512는 안드로이드와 PWA 설치 아이콘용이에요. favicon.ico 안에는 16·32·48 세 가지가 함께 들어가서 상황에 맞는 크기를 브라우저가 알아서 고릅니다.
받은 파일들을 사이트 최상위 폴더에 올리고 HTML 삽입 코드를 head 안에 붙여넣으면 끝이에요. 파비콘은 브라우저가 오래 캐시하기 때문에 바꿔도 바로 안 보일 수 있어요. 강력 새로고침을 하거나 시크릿 창에서 확인해보세요. 모든 처리는 브라우저 안에서 이뤄지고 이미지는 서버로 전송되지 않아요.
자주 묻는 질문
파비콘을 바꿨는데 왜 예전 아이콘이 그대로 나오나요?
브라우저가 파비콘을 오래 저장해두기 때문이에요. Ctrl+F5로 강력 새로고침하거나 시크릿 창에서 확인해보세요. 그래도 그대로면 주소창에 아이콘 파일 주소를 직접 열어 새 파일이 올라갔는지 보고, 링크 뒤에 ?v=2 같은 값을 붙여 다른 파일로 인식시키면 대개 해결돼요.
파비콘 크기가 왜 여섯 가지나 필요한가요?
쓰이는 자리마다 요구하는 크기가 달라서예요. 16·32·48은 브라우저 탭과 북마크, 180은 아이폰 홈 화면 바로가기, 192는 안드로이드, 512는 PWA 설치 아이콘에 쓰여요. 이 여섯 개가 기본으로 선택돼 있고 64·96·128·256도 필요하면 추가로 고를 수 있어요.
요즘도 favicon.ico가 필요한가요?
네. 오래된 브라우저와 일부 프로그램은 HTML에 링크가 없어도 사이트 최상위의 /favicon.ico를 자동으로 요청해요. 이 도구가 만드는 favicon.ico 안에는 16·32·48 세 가지가 한 파일에 함께 들어가 있어서, 브라우저가 상황에 맞는 크기를 골라 씁니다.
16픽셀에서도 알아볼 수 있게 만들려면 어떻게 하나요?
글자는 많아야 한 글자만 남기고 가는 선과 그림자는 빼세요. 16픽셀에서는 1픽셀보다 얇은 선이 사라지고 옆 색과 섞여 뭉개져요. 색은 두세 가지로 줄이고 배경과 대비를 크게 주세요. 가로로 긴 로고는 꽉 채우기를 쓰면 양옆이 잘리니 전체 넣기를 고르고 여백을 조금 주면 됩니다.
티스토리나 워드프레스에는 어떻게 적용하나요?
티스토리는 블로그 설정에서 아이콘 이미지를 직접 올리면 되니 favicon.ico 만 받기로 충분해요. 워드프레스는 설정의 사이트 아이콘에 512 PNG를 올리면 작은 크기를 알아서 만들어줍니다. 직접 만든 사이트라면 zip 안의 파일을 최상위 폴더에 올리고 HTML 삽입 코드를 head 안에 붙여넣으세요.
배경을 투명하게 하거나 모서리를 둥글게 할 수 있나요?
배경색 채우기를 꺼두면 투명한 파비콘이 만들어져서 어두운 테마에서도 로고만 떠 보여요. 둥근 모서리는 0이면 각진 사각형, 50이면 완전한 원이고 그 사이 값으로 살짝만 둥글릴 수도 있어요. 여백은 최대 30%까지 줄 수 있으니 로고가 답답해 보일 때 쓰세요.