파비콘 만들기

파비콘은 브라우저 탭과 즐겨찾기에 뜨는 작은 아이콘입니다. 로고 파일 하나를 올리면 필요한 크기를 전부 만들고, HTML에 붙여넣을 코드까지 함께 드립니다. 로고가 없으면 글자 한 자로도 만들 수 있습니다.

어떤 크기가 필요한가

만든 파일을 사이트 최상위 폴더에 올리고, 받은 코드를 각 페이지의 <head> 안에 넣으세요. favicon.ico는 최상위에 두면 코드가 없어도 브라우저가 알아서 찾습니다.

탭에 뜨는 크기는 가로 16픽셀입니다. 손톱만 합니다. 여기서는 대부분의 디자인이 뭉개집니다.

위 미리보기에 실제 16px 크기를 그대로 띄워 두었습니다. 거기서 알아볼 수 있는지 확인하고 결정하세요.

작은 이미지를 크게 늘리면 흐려집니다. 512×512 이상의 정사각형 PNG를 올리세요. 로고가 가로로 긴 형태라면 그대로 넣지 말고, 심볼 부분만 잘라 정사각형으로 만든 뒤 올리는 편이 낫습니다.

브라우저가 파비콘을 오래 캐시하기 때문입니다. Ctrl+Shift+R로 강력 새로고침하거나, 코드의 파일 이름 뒤에 ?v=13 처럼 숫자를 붙여 올리면 바로 바뀝니다.

둘 다 넣는 것이 안전합니다. 최신 브라우저는 PNG를 잘 읽지만, 오래된 환경과 일부 즐겨찾기 기능은 favicon.ico를 찾습니다. ZIP에 둘 다 들어 있습니다.

됩니다. 다만 브라우저 탭 배경이 어두운 테마일 때 검은 로고가 안 보일 수 있습니다. 확실히 하려면 여백·투명 부분 색에서 배경을 채우세요.

됩니다. 글자로 탭에서 이모지를 입력하세요. 다만 이모지 모양은 기기마다 조금씩 다릅니다.

로고 색을 뽑으려면 이미지 색상 추출, 형식을 바꾸려면 이미지 형식 변환, 도장 모양 심볼이 필요하면 도장 만들기를 쓰세요.