파비콘 생성기: favicon.ico, PNG, Apple 터치 아이콘 만들기
이미지나 텍스트로 favicon.ico, PNG 파비콘, Apple 터치 아이콘, 웹 앱 매니페스트를 브라우저에서 만들고, 복사할 HTML 태그도 제공합니다.
여기에 이미지를 끌어다 놓거나 선택하세요
PNG, JPG, WebP, GIF(첫 프레임), BMP, SVG를 지원합니다. 512 × 512픽셀 이상의 정사각형 이미지가 가장 좋습니다.
텍스트는 이 기기에 설치된 글꼴로 그려지므로 다른 컴퓨터나 휴대폰에서는 글자와 이모지가 다르게 보일 수 있습니다. 다운로드한 PNG와 ICO 파일은 여기서 보이는 모습을 유지합니다.
미리보기
16, 32, 48은 실제 크기로, 더 큰 아이콘은 작게 표시됩니다. 체크무늬는 투명한 부분을 나타냅니다.
브라우저 탭에서
밝은 테마와 어두운 테마의 탭 표시줄을 단순화해 보여 줍니다. 두 테마 모두에서 아이콘이 잘 보이는지 확인하세요. 투명 배경의 어두운 로고는 어두운 탭 표시줄에서 보이지 않을 수 있습니다.
파일
일부 Apple 기기는 홈 화면 아이콘의 투명한 부분을 검은색으로 표시하므로, apple-touch-icon.png는 투명도 없이 저장되며 투명한 부분은 이 색으로 채워집니다. iPhone과 iPad가 홈 화면 아이콘의 모서리를 직접 둥글게 처리하므로 모양 설정은 적용되지 않습니다.
HTML 태그와 매니페스트에 사용됩니다. "/"는 웹사이트의 루트 폴더를 뜻합니다.
배경, 모양, 안쪽 여백, 자르기 설정은 favicon.svg에 적용되지 않습니다.
브라우저는 테마 색상으로 주소 표시줄이나 창 제목 표시줄에 색을 입힐 수 있습니다. 앱 배경색은 설치된 웹 앱이 시작되는 동안 표시됩니다.
이미지를 선택하거나 텍스트로 전환해 시작하세요.
site.webmanifest 내용
참고
- 파일을 웹사이트의 루트 폴더(홈페이지가 있는 폴더)에 업로드하거나, HTML과 매니페스트의 경로가 맞도록 위에서 다른 폴더를 입력하세요.
- favicon.ico에는 PNG 데이터로 저장된 16 × 16, 32 × 32, 48 × 48 이미지가 들어 있습니다. 최신 브라우저와 Windows Vista 이상에서 읽을 수 있으며, 아주 오래된 일부 프로그램은 압축되지 않은 아이콘 이미지만 읽습니다.
- 64 × 64 이미지처럼 작은 원본은 큰 아이콘을 만들 때 확대되므로 흐릿해 보입니다. 가능하면 512 × 512픽셀 이상의 이미지나 SVG 파일을 사용하세요.
- 텍스트 아이콘은 아이콘을 만드는 기기에 설치된 글꼴을 사용합니다. PNG와 ICO 파일은 그 모습을 유지하지만, 다른 기기에서 아이콘을 다시 만들면 결과가 달라질 수 있습니다.
- SVG 파일은 브라우저가 그립니다. SVG 파일이 다른 파일이나 웹사이트에서 불러오는 이미지, 글꼴, 스타일은 불러오지 않으므로 아이콘에서 빠질 수 있습니다.
- 브라우저는 파비콘을 캐시에 오래 보관합니다. 파비콘을 교체한 뒤에도 한동안 이전 아이콘이 보일 수 있으며, 강력 새로 고침, 시크릿(비공개) 창, HTML의 파일 이름 변경이 도움이 될 수 있습니다.
- 이미지와 텍스트는 브라우저에서 처리되며 LeedyBox로 업로드되지 않습니다.
사용 방법
- "이미지"를 선택해 로고를 고르거나 끌어다 놓고, 또는 "텍스트 또는 이모지"를 선택해 최대 세 글자를 입력하세요.
- 배경, 모양, 안쪽 여백을 설정하고, 밝은 테마와 어두운 테마에서 미리보기와 브라우저 탭을 확인하세요.
- 필요하면 웹사이트 이름, 짧은 이름, 테마 색상, 파일을 둘 폴더를 입력하세요.
- "파비콘 파일 만들기"를 누른 다음 파일을 하나씩 또는 favicon-package.zip으로 한꺼번에 다운로드하세요.
- 파일을 웹사이트에 업로드하고, 복사한 HTML 태그를 페이지의 head 섹션에 붙여넣으세요.
자주 묻는 질문
이미지가 서버로 업로드되나요?
아니요. 이미지나 텍스트는 브라우저에서 그리고 변환하며, 파일은 기기에서 만들어집니다. LeedyBox로는 아무것도 전송되지 않습니다. 페이지를 열 때 leedybox.com에서 ZIP 라이브러리만 내려받습니다.
어떤 이미지를 쓸 수 있고, 제한이 있나요?
PNG, JPG, WebP, GIF(첫 프레임), BMP, SVG 파일을 쓸 수 있습니다. SVG 파일은 최대 10MB까지 가능합니다. 매우 큰 사진(약 5,000만 화소 이상)은 필요한 메모리 때문에 휴대폰에서 실패할 수 있습니다. 512 × 512픽셀 이상의 정사각형 이미지나 SVG 파일이 가장 선명한 결과를 냅니다.
파비콘이 흐릿하거나 알아보기 어려운 이유는 무엇인가요?
16픽셀 아이콘에는 공간이 매우 적습니다. 세밀한 로고나 긴 텍스트보다 단순한 모양, 강한 대비, 한두 글자가 더 잘 보입니다. 작은 원본 이미지는 큰 크기로 확대되어 흐릿해 보입니다. 미리보기를 확인하고 안쪽 여백을 줄이거나 로고를 단순화한 버전을 사용해 보세요.
이 파일 중 어떤 것이 필요한가요?
favicon.ico와 16·32픽셀 PNG 파일은 데스크톱 브라우저가, apple-touch-icon.png는 iPhone과 iPad가 사용합니다. 192·512픽셀 아이콘과 site.webmanifest는 사이트를 홈 화면에 추가하거나 웹 앱으로 설치할 때 사용됩니다. HTML 태그와 함께 모두 사용하면 일반적인 경우를 지원할 수 있습니다.
apple-touch-icon.png에 투명도가 없는 이유는 무엇인가요?
일부 Apple 기기는 홈 화면 아이콘의 투명한 부분을 검은색으로 표시합니다. 그래서 이 도구는 투명한 부분을 선택한 색(기본값 흰색)으로 채우고, iPhone과 iPad가 모서리를 둥글게 처리하므로 모서리는 각진 그대로 둡니다.