Mac에서 웹사이트용 파비콘 생성하기
웹사이트에 필요한 모든 파비콘, 그리고 웹 매니페스트와 페이지에 붙여 넣을 HTML까지.
Mac의 파비콘 만들기
샘플 파일을 사용한 앱 스크린샷.
파비콘 만들기 사용 방법
- 1
로고를 놓으세요
이미지 한 장을 쓰세요. 가능하면 정사각형에 512 px 이상이 좋아요. 정사각형이 아닌 이미지는 가운데를 기준으로 정사각형으로 잘려요.
- 2
사이트 세부 정보 추가
웹 매니페스트에 쓸 사이트 이름과 테마 색상을 입력하고, Apple 터치 아이콘 배경을 고르세요.
- 3
파비콘 만들기 클릭
모든 파비콘 파일이 매니페스트, HTML 스니펫과 함께 만들어져요.
- 4
사이트에 업로드하기
“favicons” 폴더(다운로드 › OneMacTools 안의 날짜별 폴더)의 파일을 웹사이트 루트에 복사하고, HTML을 페이지의 <head>에 붙여 넣으세요. 코드 조각은 앱에도 표시돼요.
파비콘 만들기의 기능
로고 하나로 16, 32, 48 px가 담긴 favicon.ico, 16 및 32 px PNG, iPhone에서 검게 변하지 않도록 단색 배경을 깐 180 px Apple 터치 아이콘, Android와 설치형 웹 앱용 192 및 512 px 아이콘을 받으세요. 사이트 이름과 테마 색상이 담긴 site.webmanifest와 <head>에 넣을 HTML 스니펫도 함께 만들어져요.
이럴 때 좋아요
- 새 웹사이트에 파비콘 추가
- 휴대폰에 사이트를 설치할 수 있게 만들기
- 흐릿한 파비콘 교체하기
옵션 설명
- 사이트 이름
- site.webmanifest에 쓰이는 이름으로, 누군가 휴대폰에 사이트를 설치할 때 표시돼요. 비워 두면 이미지 파일 이름을 사용해요. 짧은 이름은 처음 12자예요.
- 테마 색상
- #1E90FF 같은 16진수 색상으로, 브라우저 테마 색상과 매니페스트의 배경 색상으로 사용돼요. 비워 두면 흰색이에요.
- Apple 터치 아이콘 배경
- 흰색, 테마 색상 또는 검은색. iPhone은 투명한 홈 화면 아이콘을 검은색 위에 표시하므로, 180 px Apple 터치 아이콘에는 단색 배경이 들어가요.
- 모서리 둥글게
- 기본값은 꺼짐이에요. 모든 파비콘 크기에서 로고의 모서리를 둥글게 만들어요.
권장 사항
- 글자가 들어간 전체 로고 말고 단순한 마크를 쓰세요. 16 px에서는 굵은 모양만 알아볼 수 있어요.
- 투명 PNG로 시작하면 밝은 탭과 어두운 탭 모두에서 파비콘이 깔끔하게 보여요.
- 테마 색상을 16진수 값으로 입력하세요. 일부 휴대폰에서 브라우저 인터페이스 색이 되므로 대표 브랜드 색상을 고르세요.
- 브라우저는 파비콘을 오랫동안 캐시하므로, 업로드한 뒤 비공개 창에서 사이트를 열어 새 아이콘을 확인하세요.
함께 쓸 수 있는 곳
- 입력
- 이미지 하나, 512 px 이상의 정사각형 PNG가 가장 좋아요.
- 출력
- favicon.ico(16, 32, 48 px 포함), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png(180 px), android-chrome-192x192.png, android-chrome-512x512.png, 그리고 site.webmanifest와 add-to-head.html이 담긴 “favicons” 폴더.
- 정사각형이 아닌 이미지는 가운데 정사각형으로 잘려요.
파비콘 만들기에 관한 질문
웹사이트에는 어떤 파비콘 파일이 필요한가요?
구형 브라우저용 favicon.ico, 탭용 16 px 및 32 px PNG, iPhone 홈 화면용 180 px Apple 터치 아이콘, Android용 웹 매니페스트와 함께 192 px 및 512 px 아이콘. OneMacTools가 이 모두와 페이지의 <head>에 붙여 넣을 HTML까지 만들어요.
파일은 어디로 가나요?
웹사이트의 루트 폴더, index.html 옆이에요. HTML 스니펫과 매니페스트 모두 파일이 그곳에 있다고 가정해요.
Mac에서 favicon.ico를 만들려면 어떻게 하나요?
로고를 파비콘 만들기에 놓고 파비콘 만들기를 클릭하세요. 16, 32, 48 px 버전이 담긴 favicon.ico가 PNG 크기별 파일과 함께 만들어져요.
iPhone 홈 화면에서 아이콘이 검게 보이는 이유는 무엇인가요?
iOS는 홈 화면 아이콘의 투명한 영역을 검은색으로 표시해요. 이를 막기 위해 Apple 터치 아이콘은 흰색, 검은색 또는 테마 색상의 단색 배경 위에 놓여요.
site.webmanifest는 무엇에 쓰이나요?
누군가 사이트를 홈 화면에 추가하거나 웹 앱으로 설치할 때 휴대폰에 사이트 이름, 아이콘, 색상을 알려 줘요.
새 파비콘이 보이지 않아요. 뭐가 문제인가요?
브라우저는 파비콘을 적극적으로 캐시해요. 파일이 사이트 루트에 있는지, 코드 조각이 <head> 안에 있는지 확인한 다음 비공개 창에서 다시 불러오세요.
파비콘 만들기이(가) 내 파일을 업로드하나요?
아니요. 파비콘 만들기은(는) 전적으로 Mac에서 실행되므로 파일이 Mac 밖으로 나가지 않고 오프라인에서도 작동해요.
파비콘 만들기이(가) 원본 파일을 바꾸나요?
아니요. 결과는 다운로드 › OneMacTools의 날짜별 폴더에 새 파일로 저장되고, 따로 적힌 옵션을 켜지 않는 한 원본은 그대로 남아요.
파비콘 만들기에는 무엇이 필요한가요?
macOS 26 이상이 설치된 Mac만 있으면 돼요. 따로 설치할 것은 없어요.
다음으로 할 일
X, LinkedIn, Slack, WhatsApp, iMessage에서 링크를 공유할 때 보이는 1200 × 630 카드를 만들어요.
앱 아이콘 만들기정사각형 이미지 하나로 모든 앱 아이콘을 만들어요. Xcode용 iOS 에셋 카탈로그, Android 런처 및 적응형 아이콘, Mac .icns까지요.
관련 이미지 도구
PNG, JPEG, HEIC, AVIF, TIFF 간에 변환해요. WebP, RAW 등도 읽을 수 있어요.
이미지 압축실시간 전후 미리보기와 함께 이메일과 웹용으로 사진을 줄여요.
WebP로 변환투명도를 유지한 채 손실 또는 무손실 방식으로 작은 웹용 WebP 이미지를 만들어요.
이미지 크기 조절긴 변, 정확한 픽셀, 비율 또는 원하는 DPI에서의 cm, mm, 인치 인쇄 크기로 크기를 조절해요.
이미지 자르기화면비나 정확한 영역으로 자르거나 단색 테두리를 자동으로 잘라내세요 — 사진 한 장이든 폴더 전체든.
이미지 회전 및 뒤집기사진을 한 번에 회전하거나 반전해요.
