파비콘 만들기

이미지 한 장을 넣으면 favicon.ico와 필요한 크기의 PNG를 한꺼번에 만듭니다.

처리는 전부 사용자 PC 브라우저 안에서 이루어집니다. 이미지가 서버로 전송되지 않아 민감한 개인정보도 안전합니다. 페이지를 닫거나 새로고침하면 결과도 사라져 창을 닫기 전에 파일을 저장하세요.

이미지를 끌어다 놓으세요 또는 클릭해서 선택 · 정사각형에 가까운 이미지가 좋습니다

투명 배경 채우기 정사각형으로 잘라내기

HTML에 넣을 코드

파비콘은 무엇인가

브라우저 탭 왼쪽에 붙는 작은 아이콘입니다. 즐겨찾기 목록이나 방문 기록, 휴대폰 홈 화면에도 같은 이미지가 쓰입니다.

사소해 보이지만 탭을 여러 개 띄워둔 사람에게는 이게 사이트를 구분하는 유일한 표시입니다. 없으면 빈 문서 모양이 나오는데, 만들다 만 사이트처럼 보입니다.

favicon.ico 파일 하나에 16·32·48을 함께 담을 수 있습니다. 브라우저가 상황에 맞는 크기를 알아서 골라 씁니다. 이 도구도 그렇게 만듭니다.

받은 파일을 사이트 최상위 폴더에 두고, <head> 안에 위에 나온 코드를 넣으면 됩니다. favicon.ico는 최상위에 있으면 브라우저가 알아서 찾기도 하지만, 명시해 주는 편이 확실합니다.

작은 크기에서는 디테일이 사라집니다. 16픽셀은 글자 한 자도 온전히 안 들어갑니다. 복잡한 로고보다 단순한 형태나 글자 한 자가 잘 보입니다
정사각형이 아니면 잘립니다. 가운데를 기준으로 잘라내니, 중요한 부분이 가장자리에 있다면 미리 다듬어 오세요
투명 배경은 그대로 유지됩니다. 다만 밝은 탭과 어두운 탭 양쪽에서 보이는지 확인하세요. 위 미리보기가 그래서 두 벌입니다
아이폰 홈 화면 아이콘은 투명한 곳을 검게 칠합니다. 그 용도라면 배경 채우기를 켜두시는 편이 안전합니다
파비콘은 브라우저가 오래 기억합니다. 바꿔도 안 보이면 강력 새로고침이나 시크릿 창에서 확인해 보세요