웹사이트에 필요한 파비콘 파일과 파일별 크기

웹사이트에는 작은 아이콘 파일 몇 개가 필요하고, 대부분의 결정은 크기에 관한 것이에요. 브라우저 탭과 Windows에서 쓸 favicon.ico는 16, 32, 48픽셀 이미지를 담아 사이트 최상위 폴더에 두세요. iPhone과 iPad 홈 화면용으로 180픽셀 애플 터치 아이콘을 추가하고, 웹 앱 매니페스트에 적을 192픽셀과 512픽셀 PNG 아이콘도 준비하세요. 파비콘 생성기에서 로고 하나로 이 파일을 모두 만들고, 페이지에 붙여 넣을 HTML 코드 줄까지 써 줘요.

파일과 크기

생성기가 내려받는 ZIP에는 파일 일곱 개가 모두 들어 있어요. favicon.ico 파일은 16, 32, 48픽셀 PNG 이미지 세 장을 한 파일 안에 담아 만들어요. 각 아이콘은 같은 로고를 작게 그린 것이에요. 생성기는 입력한 이미지를 512픽셀 버전으로 바꾼 뒤, 거기서 각 크기를 만들어요.

HTML 코드 줄

생성기는 페이지의 head 부분에 넣을 코드 줄 네 개를 써 줘요.

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

첫 줄은 favicon.ico를 가리키고 48×48 크기라고 알려줘요. 둘째 줄은 32픽셀 PNG를 연결해요. 셋째 줄은 애플 터치 아이콘을 지정하고, 넷째 줄은 192픽셀과 512픽셀 아이콘이 적힌 매니페스트를 가리켜요. 16픽셀 PNG는 ZIP에는 들어 있지만 이 줄들에는 없어요. 브라우저는 별도로 /favicon.ico도 찾기 때문에 첫 줄이 빠져도 파일은 찾을 수 있어요. 파일을 다른 위치에 두지 않았다면 경로는 그대로 두세요.

작은 크기에는 단순한 모양이 필요한 이유

아이콘이 16×16픽셀이면 전체 픽셀은 256개뿐이에요. 48픽셀 아이콘은 2,304개이고, 512픽셀 원본은 262,144개예요. 로고의 세부 묘사는 16픽셀까지 줄어들면 대부분 사라져서, 얇은 선이나 작은 글자는 흐릿하게 뭉개져요. 그러니 단순한 표시를 쓰거나, 대비가 강한 한두 글자를 사용하세요.

글자 옵션에서는 한두 글자를 입력할 수 있고, 글자가 너무 넓으면 줄여서 아이콘 가운데에 크게 그려요. 모양은 정사각형, 둥근 사각형, 원 중에서 고를 수 있어요. 미리보기에는 16, 32, 48, 180, 512픽셀 결과가 나란히 보이고, 밝은 배경과 어두운 배경 탭도 있어서 내려받기 전에 작은 크기를 확인할 수 있어요. 모양, 여백, 배경을 바꾸면 미리보기도 바로 바뀌므로 설정을 하나씩 먼저 시험해 보세요.

여백, 배경, 애플 아이콘

여백은 여백 없음, 작게, 크게 세 가지 중에서 고를 수 있어요. 작게는 아이콘 각 변의 10%를 비워 두고, 크게는 20%를 비워 둬요. 이미지 모드에서 여백 없음을 고르면 사진이 가운데 정사각형으로 잘리기 때문에 가로로 긴 로고의 양 끝이 사라져요. 여백이 있는 설정은 사진 전체를 정사각형 안에 맞춰 넣어요.

배경은 투명, 흰색, 사용자 지정 중에서 고를 수 있고, 기본값은 투명이에요. 애플 터치 아이콘은 항상 불투명해요. 이미지 모드에서는 투명한 부분을 선택한 배경으로 채우고, 배경이 투명이면 흰색으로 채워요. 글자 모드에서는 글자 배경색으로 채워요. 애플 터치 아이콘의 투명한 부분은 iPhone과 iPad에서 검은색으로 보일 수 있어서 생성기가 미리 채워 줘요. 다른 크기는 고른 투명도를 그대로 유지해요. 투명한 PNG가 검게 보이는 이유에서 원인을 자세히 설명해요.

파비콘은 정사각형이므로 가로로 긴 로고에는 먼저 정사각형 틀이 필요해요. 정사각형 사진 만들기는 사진 전체를 1:1 틀 안에 맞추고, 흐림, 흰색, 검은색 또는 사용자 지정 테두리를 넣어 주므로 아무 부분도 잘리지 않아요. 정확한 픽셀 크기가 필요하면 이미지 크기 조절을 쓰세요. 비율 유지를 켜고 가로와 세로를 모두 채우면, 사진이 찌그러지지 않고 상자 안에 맞아요. 자주 쓰는 사진 비율은 사진 화면비 설명에서 확인할 수 있어요.

바꾼 내용이 늦게 보이는 경우

브라우저는 파비콘을 캐시에 저장해 둬요. 같은 주소에 있는 파일을 바꾸면 이전 아이콘이 한동안 그대로 보일 수 있어서, 보통 새로 고침만으로는 부족해요. 먼저 아이콘 주소를 직접 열어 새 파일이 서버에 올라갔는지 확인하고, 캐시를 무시하는 강력 새로 고침으로 페이지를 다시 불러오세요. 그래도 이전 아이콘이 보이면 새 파일의 이름을 다르게 바꾸고, 링크도 그 이름을 가리키도록 수정하세요.

fixmint에서 하는 방법

1. 이미지를 고르고 로고를 상자에 끌어다 놓거나, 글자를 고르고 한두 글자를 입력하세요.
2. 여백은 없음, 작게, 크게 중에서, 배경은 투명, 흰색, 사용자 지정 색 중에서 고르세요.
3. 밝은 배경과 어두운 배경 탭에서 16, 32, 48px 아이콘을 확인하고, 180px과 512px 미리보기도 확인하세요.
4. 일곱 개 파일을 모두 받으려면 ZIP 다운로드를, favicon.ico 파일만 받으려면 favicon.ico 다운로드를 누르세요.
5. HTML 복사를 누르고, 머리글용 HTML의 줄을 각 페이지의 head 부분에 붙여 넣으세요.

예외 상황

• 이미지는 내 기기에 남아요. 생성기는 브라우저 안에서 아이콘을 만들며, 아무것도 업로드하지 않아요.
• 두 글자 입력. 두 글자도 받아들이지만 둘 다 들어가도록 더 작게 그려요. 그래서 16픽셀에서는 한 글자보다 알아보기 어려울 수 있어요.
• 파일 이름. HTML이 가리키는 이름을 그대로 유지하세요. 링크가 그 이름을 보고 있어요.
• 읽을 수 없는 파일. 이미지를 아이콘으로 바꿀 수 없으면 생성기는 "이 입력으로 아이콘을 만들 수 없어요. 다른 이미지를 시도해 보세요."라는 메시지를 보여 주고 결과를 지워요. 다른 파일을 쓰거나, 이미지를 일반적인 형식으로 다시 저장해 보세요.