AI로 홈페이지를 만든 뒤 브라우저 탭에 빈 종이 아이콘이 뜨고 카카오톡에 링크를 붙였더니 회색 네모만 나온다면, 빠진 것은 디자인이 아니라 파일 두 개입니다. 탭에 들어가는 파비콘과 링크 미리보기에 들어가는 OG이미지입니다. 둘 다 무료 도구로 10분 안에 만들 수 있고, 유료 결제가 필요한 지점은 «여러 개를 한꺼번에, 브랜드 글꼴까지» 쓰려는 순간부터입니다.
핵심 요약
- AI 빌더는 HTML에 파비콘·OG 태그를 써 주기는 하지만 실제 이미지 파일은 만들지 않습니다.
- 파비콘은 정사각형 이미지 한 장, OG이미지는 1200×630 가로 이미지 한 장이면 시작할 수 있습니다.
- 변환·확인 도구는 대부분 무료이고, 유료로 갈리는 지점은 템플릿·글꼴·대량 생성입니다.
- 만든 뒤 반드시 다른 기기에서 링크를 한 번 보내 봐야 실제로 보이는지 알 수 있습니다.
AI가 만든 사이트에 파비콘이 없는 이유는 무엇인가요?
AI는 코드를 쓰지만 파일을 만들지는 않기 때문입니다. 대화로 홈페이지를 만들면 결과물 HTML 안에는 보통 아이콘을 불러오는 한 줄과 미리보기용 메타 태그가 들어 있습니다. 그런데 그 줄이 가리키는 이미지 파일은 어디에도 없습니다. 브라우저는 없는 파일을 찾다가 포기하고 기본 아이콘을 띄우고, 메신저는 가져올 그림이 없으니 회색으로 비워 둡니다.
그래서 화면 디자인이 아무리 잘 나왔어도 탭과 링크만 초라해 보이는 일이 생깁니다. 마치 새 가게 인테리어는 다 끝냈는데 간판만 안 달린 것과 비슷합니다. 안에 들어와 본 사람은 괜찮다고 하는데, 지나가는 사람 눈에는 아직 문 닫힌 가게로 보입니다.
무엇부터 확인해야 할까요
파일을 만들기 전에 지금 상태를 먼저 봐야 헛일을 안 합니다. 순서는 4가지입니다.
- 브라우저 탭을 봅니다 — 빈 종이 모양이면 파비콘 파일이 없습니다.
- 소스 보기로
rel="icon"이 적힌 줄을 찾습니다 — 있으면 경로만 맞춰 주면 끝납니다. - 같은 방법으로
og:image가 있는지 봅니다 — 없으면 태그부터 넣어야 합니다. - 자신에게 링크를 한 번 보내 봅니다 — 미리보기가 비어 있는지 눈으로 확인합니다.
2번에서 경로를 찾았다면 일이 훨씬 쉬워집니다. 코드를 고치지 말고 그 경로에 파일을 올리는 쪽이 실수가 적습니다. AI가 써 둔 줄을 건드리다가 다른 곳이 틀어지는 경우가 의외로 많습니다.
1. 브라우저에서 바로 변환하는 파비콘 생성기
가진 이미지를 올리면 탭용 아이콘 파일로 바꿔 주는 도구입니다. 회원가입 없이 쓰는 곳이 많고, 아이비전트도 무료 파비콘 생성기를 따로 열어 두고 있습니다.
특징은 준비물이 로고 파일 하나뿐이라는 점입니다. 어떤 경우에 맞나 — 이미 로고나 심볼이 있고 그걸 그대로 작게 쓰려는 경우입니다. 주의점은 가로로 긴 로고를 넣으면 양옆이 잘리거나 여백이 커진다는 것입니다. 탭에서는 아주 작게 보이므로, 긴 회사 이름 전체보다 앞글자나 심볼만 쓰는 쪽이 알아보기 쉽습니다.
2. 글자만 넣어 만드는 문자 아이콘 도구
로고가 아예 없을 때 쓰는 방법입니다. 배경색과 글자 한두 자를 정하면 정사각형 이미지가 나옵니다.
어떤 경우에 맞나 — 아직 로고를 못 만들었는데 사이트는 먼저 공개해야 하는 경우입니다. 주의점은 색을 너무 연하게 잡으면 탭에서 안 보인다는 점입니다. 브라우저 탭은 밝은 회색 바탕이라, 흰 배경에 연한 글자를 넣으면 빈 칸처럼 보입니다. 진한 배경 + 흰 글자 조합이 가장 안전합니다.
3. 무료 그래픽 편집 도구
OG이미지처럼 «글자가 들어간 가로 그림»을 만들 때는 편집 도구가 필요합니다. 브라우저에서 바로 쓰는 무료 서비스들이 있고, 빈 캔버스 크기를 1200×630으로 지정해 시작하면 됩니다.
어떤 경우에 맞나 — 회사 이름과 한 줄 소개를 얹은 미리보기 카드를 만들려는 경우입니다. 주의점이 두 가지 있습니다. 첫째, 무료 요금제에서 쓸 수 있는 글꼴·템플릿이 제한되는 서비스가 있어 다운로드 직전에 유료 표시가 뜨는 일이 있습니다(서비스마다 다릅니다). 둘째, 저장할 때 PNG나 JPG로 받아야 합니다. 편집 도구 전용 형식으로 저장하면 사이트에 올려도 표시되지 않습니다.
4. 이미지 용량 줄이는 압축 도구
1200×630 이미지를 만들면 파일이 제법 커집니다. 그림이 많고 색이 복잡하면 수백 KB가 금방 넘습니다. 무료 압축 도구에 한 번 넣으면 눈으로 구분 안 되는 선에서 크기가 줄어듭니다.
어떤 경우에 맞나 — 사진을 배경으로 쓴 OG이미지를 만든 경우입니다. 파비콘은 원래 작아서 압축이 필요 없습니다. 주의점은 압축을 너무 세게 하면 글자 테두리가 지저분해진다는 것입니다. 글자가 들어간 이미지는 JPG보다 PNG로 저장하는 쪽이 깔끔합니다.
5. 링크 미리보기 확인 도구
파일을 올렸다고 끝이 아닙니다. 실제로 메신저·SNS가 그 이미지를 읽어 가는지 확인해야 합니다. 주소를 넣으면 미리보기를 대신 불러와 보여 주는 무료 확인 도구들이 있고, 페이스북·X·카카오도 각자 개발자용 확인 페이지를 두고 있습니다.
어떤 경우에 맞나 — OG이미지를 넣었는데 카톡에 여전히 회색만 나오는 경우입니다. 여기서 「이미지를 못 찾았다」고 나오면 파일 경로가 틀린 것이고, 「이미지는 찾았는데 표시가 안 된다」면 용량이나 형식 문제입니다. 원인이 갈리는 지점을 알려 주기 때문에 헛수고가 줄어듭니다.
주의점 하나가 있습니다. 메신저는 한 번 읽은 미리보기를 저장해 두기 때문에, 이미지를 바꿔도 예전 그림이 계속 나옵니다. 확인 도구에서 «다시 읽기»를 눌러 주지 않으면 며칠씩 옛 화면이 남아 있습니다.
6. 호스팅·빌더에 딸려 있는 설정 화면
도구를 따로 찾지 않아도 되는 경우가 있습니다. 빌더나 호스팅 관리 화면에 파비콘 업로드 칸과 미리보기 이미지 칸이 이미 들어 있는 경우입니다. 이미지를 넣으면 태그까지 알아서 붙습니다.
어떤 경우에 맞나 — 코드를 직접 건드리고 싶지 않은 경우입니다. 주의점은 AI가 만든 정적 HTML을 올리는 방식이라면 그 칸이 없을 수도 있다는 점입니다. 그럴 때는 HTML에 직접 한 줄을 넣어야 합니다. 아이비전트의 경우 AI로 만든 HTML을 편집 화면에서 그대로 열어 고칠 수 있어서, 파비콘 줄과 OG 태그를 화면에서 찾아 수정하는 방식으로 처리하게 됩니다.
파일 크기는 어떻게 잡아야 하나요?
파비콘은 정사각형, OG이미지는 가로가 긴 직사각형으로 만듭니다. 널리 쓰이는 값은 아래와 같습니다.
| 용도 | 권장 크기 | 모양 |
|---|---|---|
| 브라우저 탭 아이콘 | 512 × 512 | 정사각형 |
| 스마트폰 홈 화면 아이콘 | 180 × 180 | 정사각형 |
| 링크 미리보기(OG이미지) | 1200 × 630 | 가로 직사각형 |
확인 기준 : 2026년 9월
512×512 한 장을 만들어 두면 작은 크기는 브라우저가 알아서 줄여 씁니다. 처음부터 여러 크기를 다 만들 필요는 없습니다. OG이미지의 1200×630은 가로세로 비율이 약 1.9:1인데, 이 비율에서 벗어나면 메신저가 위아래를 잘라 내므로 가운데에 중요한 글자를 두는 편이 안전합니다.
파비콘 하나와 사이트 전체, 어느 쪽이 더 급할까요?
질문부터가 모순이 있는 질문입니다. 파비콘은 사이트의 일부인데, 그 일부만 따로 급하다는 말이 성립하는 경우가 실제로 있기 때문입니다.
사이트를 아직 아무도 모르는 단계에서는 파비콘이 급하지 않습니다. 볼 사람이 없으니까요. 그런데 링크를 어딘가에 뿌리기 시작한 순간 순서가 뒤집힙니다. 카톡 단체방에 주소를 올리는 그 한 번이 대부분의 사람이 우리 사이트를 처음 만나는 장면이 되고, 그 장면에는 본문이 아니라 미리보기 카드만 보입니다. 페이지를 몇 개 더 만드는 일보다 회색 네모를 없애는 일이 먼저가 되는 지점이 여기입니다.
“보여 줄 준비가 됐는지는 본문이 아니라 링크 미리보기가 먼저 말해 줍니다.” 그래서 판단 기준은 완성도가 아니라 «지금 이 주소를 남에게 보낼 일이 있는지»입니다. 보낼 일이 없으면 뒤로 미뤄도 되고, 내일 보낼 일이 있으면 오늘 30분이 가장 값싼 투자입니다.
순서대로 하면 이렇게 끝납니다
도구를 다 알아도 순서가 없으면 헤매게 됩니다. 5단계로 정리하면 이렇습니다.
- 로고나 글자 하나로 512×512 정사각형 이미지를 만듭니다.
- 변환 도구에 넣어 파비콘 파일로 바꿉니다.
- 1200×630 캔버스에 회사 이름과 한 줄 설명을 얹어 OG이미지를 만듭니다.
- 두 파일을 사이트에 올리고, HTML의 아이콘 줄과
og:image주소를 그 경로로 맞춥니다. - 미리보기 확인 도구에서 «다시 읽기»를 누르고, 다른 기기로 링크를 보내 눈으로 봅니다.
여기서 가장 많이 빠지는 것이 5번입니다. 올려 놓고 확인을 안 하면, 경로 한 글자가 틀린 상태로 몇 달이 지나갑니다. 파일이 없어도 화면에는 아무 오류가 안 뜨기 때문에 스스로 알아차릴 방법이 없습니다.
고치는 자리를 한 곳으로 모으면 편합니다
파비콘과 OG이미지는 한 번 넣고 끝나는 일이 아닙니다. 로고를 바꾸면 다시 만들어야 하고, 회사 소개 문구가 바뀌면 미리보기 카드도 따라가야 합니다. 그때마다 파일을 내려받아 고쳐서 다시 올리는 과정을 거치면 손이 많이 갑니다.
아이비전트는 AI로 만든 HTML을 편집 화면으로 그대로 받아 고치는 방식을 쓰고 있어서, 이미지 교체와 태그 수정을 같은 화면에서 처리할 수 있습니다. AI 호스팅은 xxx.ibigent.com 주소가 바로 나오고 무료 SSL이 기본으로 붙어서, 만들자마자 링크 미리보기까지 확인해 볼 수 있습니다. 14일 무료체험이 있으니 한 번 만들어 보고 판단하시면 됩니다.
목적을 먼저 정하고 도구를 고르시면 됩니다
여기 적은 6가지는 어느 하나가 정답인 목록이 아닙니다. 로고가 있으면 1번만으로 끝나고, 없으면 2번부터 시작하면 됩니다. 사진을 쓰면 4번이 필요하고, 코드를 건드리기 싫으면 6번이 맞습니다. 지금 내 상황에서 빠진 것이 파일인지 태그인지 확인만 먼저 하시고, 그 다음에 도구를 고르시면 됩니다.
확인 기준 : 2026년 9월
