파비콘은 이미지 편집 프로그램 없이도 만들 수 있습니다. 로고나 사진 한 장을 정사각형으로 자른 뒤 무료 파비콘 생성기에 올리면 브라우저가 요구하는 크기의 파일이 한 번에 만들어집니다. 탭에 아이콘이 보이지 않는 경우도 파일을 잘못 만들어서라기보다는 연결 코드나 브라우저 캐시 때문인 경우가 많습니다.

핵심 요약

• 원본 이미지를 정사각형으로 자르고 가장자리에 여백을 남기는 것이 첫 단계입니다.
• ico 하나만 두지 말고 png를 함께 두면 모바일 홈 화면 아이콘까지 덮입니다.
• 연결은 head 안에 link 태그 한 줄이며, 최상위 폴더에 두면 태그 없이도 인식되는 경우가 많습니다.
• 바꿨는데 그대로라면 파일보다 브라우저 캐시부터 확인하시면 됩니다.

탭에 아이콘이 안 뜨는 이유는 대개 경로와 캐시입니다

파비콘이 보이지 않는다고 해서 파일이 잘못된 경우는 생각보다 드뭅니다. 가장 흔한 원인은 파일을 올려둔 위치와 코드에 적은 경로가 서로 다른 경우입니다.

두 번째 원인은 브라우저가 예전 아이콘을 기억하고 있는 상황입니다. 파비콘은 한 번 읽어두면 오래 남겨두는 파일이라, 새로 올려도 화면에는 한동안 이전 그림이 그대로 뜹니다.

세 번째는 크기가 지나치게 큰 이미지를 그대로 올린 경우입니다. 사진 한 장을 이름만 바꿔 올려두면 브라우저가 축소해 보여주기는 하지만, 작은 탭 안에서 무엇을 그린 그림인지 알아볼 수 없게 됩니다.

원본은 정사각형으로 자르고 가장자리에 여백을 남깁니다

파비콘은 탭 안에서 아주 작게 표시됩니다. 그래서 준비 단계에서 해야 할 일은 그리는 것이 아니라 덜어내는 쪽에 가깝습니다.

가로세로가 같은 정사각형으로 자르고, 그림이 네 변에 닿지 않도록 안쪽에 약간의 여백을 두시면 됩니다. 여백 없이 꽉 채우면 브라우저가 모서리를 둥글게 다듬을 때 그림 끝이 잘려 나갑니다.

상호가 길다면 글자를 전부 넣는 대신 첫 글자나 심볼만 남기는 편이 낫습니다. 색은 두세 가지로 줄이고, 선이 가는 그림은 굵게 바꿔야 작은 크기에서 형태가 남습니다.

ico, png, svg는 쓰이는 자리가 다릅니다

파비콘 이야기에서 형식이 헷갈리는 이유는 하나만 고르는 문제가 아니기 때문입니다. 자리마다 읽어가는 파일이 달라서, 보통은 두세 개를 함께 둡니다.

무료 생성기를 쓰면 크기별 파일이 한 번에 나옵니다

형식별로 파일을 따로 만들려면 손이 많이 갑니다. 그래서 대부분은 정사각형 이미지 한 장을 올리면 필요한 크기를 한꺼번에 뽑아주는 무료 도구를 씁니다.

아이비전트도 상단 메뉴의 무료 도구 항목에 무료 파비콘 생성기를 두고 있습니다. 로그인 없이 열어 이미지를 올리면 탭용과 모바일용 파일을 함께 받을 수 있어, 처음 만드는 경우에도 형식 이름을 외울 필요가 없습니다.

도구를 고르실 때는 올린 이미지를 어떻게 처리하는지 한 번 확인해 보시는 편이 좋습니다. 로고 원본은 사업자의 자산이므로, 어디에 올리는지 모르는 도구에 그대로 넣기보다 서비스 주체가 분명한 쪽을 쓰시는 것이 안전합니다.

만든 파일을 홈페이지에 연결하는 순서

파일을 받았다면 순서는 단순합니다. 먼저 사이트의 최상위 폴더에 파일을 올립니다. favicon.ico 라는 이름으로 최상위에 두면 별도 코드 없이도 인식되는 경우가 많습니다.

이름이나 위치를 다르게 두려면 문서의 head 안에 <link rel="icon" href="/favicon.ico"> 처럼 경로를 적어주시면 됩니다. png를 함께 둘 때는 같은 방식으로 한 줄을 더 추가합니다.

AI 호스팅처럼 만든 파일을 압축해 올리는 방식이라면 압축 파일 안 최상위에 파비콘을 함께 넣어 올리면 그대로 반영됩니다. 기능형 빌더 호스팅처럼 관리 화면에서 사이트를 운영하는 경우에는 파일을 올린 뒤 편집 화면에서 head 부분에 링크 한 줄을 넣는 방식으로 처리하시면 됩니다.

즐겨찾기와 모바일 홈 화면까지 확인합니다

탭에서 잘 보인다고 끝난 것은 아닙니다. 파비콘은 즐겨찾기 목록, 브라우저 방문 기록, 휴대전화 홈 화면 바로가기에서도 함께 쓰입니다.

휴대전화로 사이트를 연 뒤 홈 화면에 추가해 보면, 준비한 png가 제대로 잡혔는지 바로 확인됩니다. 이때 흰 사각형이나 화면 축소본이 뜬다면 모바일용 아이콘이 빠져 있다는 뜻입니다.

밝은 배경과 어두운 배경을 모두 보는 것도 필요합니다. 다크 모드 탭에서는 검은 선으로만 그린 아이콘이 배경에 묻혀 사라진 것처럼 보입니다.

바꿨는데 그대로면 캐시부터 비웁니다

새 파비콘을 올렸는데 예전 그림이 계속 뜬다면 순서대로 확인하시면 됩니다. 먼저 브라우저 주소창에 파일 주소를 직접 입력해 그림이 새로 뜨는지 봅니다. 여기서 새 그림이 나온다면 파일은 정상이고 화면 쪽 캐시 문제입니다.

이 경우 브라우저 캐시를 비우거나 시크릿 창에서 사이트를 다시 열어 확인합니다. 다른 기기나 다른 브라우저로 열어보는 것도 빠른 확인 방법입니다.

주소를 직접 열었는데 파일을 찾을 수 없다고 나온다면 올린 위치와 코드에 적은 경로가 다른 경우입니다. 폴더 위치를 다시 확인하고, 경로 앞에 슬래시를 붙여 최상위 기준으로 적어주시면 대부분 해결됩니다.

정리

파비콘은 로고를 새로 그리는 작업이 아니라 이미 가진 이미지를 작게 다듬는 작업입니다. 정사각형으로 자르고, 무료 도구로 크기별 파일을 받고, 최상위 폴더에 올린 뒤 링크 한 줄을 넣는 것으로 끝납니다.

사이트를 어디에 올릴지부터 정하는 단계라면 요금제에서 무료로 시작할 수 있는 구성을 먼저 확인해 보시면 됩니다.