파비콘 생성기
로고를 한 번만 올리면 웹사이트에 필요한 모든 아이콘과 페이지에 붙여 넣을 코드를 받을 수 있어요.
이 기기 안에서 봉인됨
브라우저에서 실행돼요. 아무것도 업로드되지 않아요.
봉인됨
내 아이콘
페이지에 넣을 코드
ZIP 안의 파일을 웹사이트 루트에 넣은 다음, 모든 페이지의 <head> 안에 이 코드를 붙여 넣으세요.
사용 방법
-
로고 추가하기
SVG, PNG, JPG를 끌어다 놓거나, 선택하거나, 붙여 넣으세요. 512 × 512픽셀 이상의 정사각형 이미지라야 아이콘이 가장 선명해요.
-
모양 다듬기
안쪽 여백, 배경 색상, 둥근 모서리를 추가하고 브라우저 탭과 휴대폰 홈 화면에서 결과를 확인하세요.
-
다운로드하고 코드 붙여 넣기
ZIP을 다운로드해 파일을 웹사이트 루트에 넣고, 페이지의 <head> 안에 코드를 붙여 넣으세요.
자주 묻는 질문
어떤 파일을 받게 되나요?
16, 32, 48픽셀 아이콘이 담긴 favicon.ico 파일, 16, 32, 48, 192, 512픽셀 PNG 아이콘, iPhone과 iPad용 180픽셀 apple-touch-icon.png, 그리고 Android가 192픽셀과 512픽셀 아이콘을 사용할 수 있게 해 주는 site.webmanifest 파일을 받아요. 하나씩 다운로드하거나 ZIP 파일 하나로 한꺼번에 받을 수 있어요.
파일은 어디에 넣어야 하나요?
웹사이트 루트, 즉 홈페이지와 같은 위치에 넣어서 /favicon.ico 같은 주소로 열 수 있게 하세요. 그런 다음 미리보기 아래에 표시된 코드를 모든 페이지의 <head> 안에 붙여 넣으세요. 브라우저는 /favicon.ico를 알아서 찾기도 하므로 코드가 없는 페이지에도 아이콘이 표시돼요.
이미지 크기는 어느 정도여야 하나요?
가장 큰 아이콘 크기인 512 × 512픽셀 이상의 정사각형이 좋아요. SVG가 가장 이상적이에요. 어떤 크기에서도 선명하게 그려지거든요. 더 작은 이미지도 쓸 수 있지만 큰 아이콘은 확대되어 흐릿해 보여요.
브라우저 탭에서 아이콘이 흐릿하거나 너무 작아 보이는 이유는 무엇인가요?
16픽셀에서는 세밀한 부분과 얇은 글자가 사라져요. 글자가 들어간 전체 로고보다는 글자 하나나 기호처럼 단순한 표시를 쓰고, 안쪽 여백은 작게 두세요. 이미지가 가로로 길다면 “정사각형으로 자르기”를 고르세요.
내 이미지가 업로드되나요?
아니요. 이미지는 내 기기의 브라우저에서 읽고, 크기를 바꾸고, 저장해요. 어디에도 전송되지 않아요.
애플 터치 아이콘에는 왜 배경이 있나요?
iPhone과 iPad는 홈 화면 아이콘의 모서리를 자체적으로 둥글게 처리하고 투명한 부분은 검은색으로 표시해요. 그래서 애플 터치 아이콘에는 항상 단색 배경과 각진 모서리가 적용돼요. 배경 색상을 고른 경우 그 색이, 투명을 고른 경우 흰색이 들어가요.