Webflow 파비콘 추가 방법: 파비콘과 웹클립 설정하기

Webflow에서 파비콘과 웹클립을 추가하는 방법을 안내합니다. 아이콘 설정 위치, 자동 생성되는 크기, 게시 방법, 반영되지 않을 때의 해결법까지 정리했습니다.

자주 묻는 질문

Webflow 파비콘은 어떤 크기로 만들어야 하나요?

Webflow 고객센터에는 파비콘 32x32, 웹클립 256x256이 안내되어 있습니다. 현재 방식에서는 정사각형 이미지를 하나만 업로드하면 나머지 크기는 Webflow가 자동으로 만들어 줍니다. 따라서 256x256 픽셀 이상의 정사각형 파일로 시작하고, 작게 줄여도 알아볼 수 있는 디자인을 선택하세요.

Webflow에서 파비콘은 어디에 업로드하나요?

Site settings(사이트 설정)를 열고 General(일반) 탭으로 이동한 뒤 Icons(아이콘) 섹션을 찾으세요. 정사각형 이미지를 업로드하고, 업데이트할 아이콘을 선택해 적용한 다음 사이트를 게시하면 됩니다. 예전 가이드에서는 Project settings라고 부르지만 같은 위치입니다.

Webflow의 웹클립이란 무엇인가요?

웹클립은 방문자가 사이트를 휴대폰 홈 화면 등에 바로가기로 저장할 때 쓰이는 큰 아이콘입니다. Webflow에서는 256x256 픽셀로 안내하며, 브라우저 탭에 표시되는 작은 아이콘과는 별개입니다.

파비콘을 업로드했는데 Webflow에서 보이지 않는 이유는 무엇인가요?

가장 흔한 원인은 업로드 후 사이트를 게시하지 않은 경우입니다. 아이콘은 게시된 사이트에만 반영됩니다. 두 번째 원인은 브라우저 캐시입니다. 게시한 뒤 시크릿 창이나 다른 브라우저에서 확인해 보고, 그 전에는 업로드 실패로 단정하지 마세요.

Webflow는 SVG나 다크 모드 파비콘을 지원하나요?

Webflow 업데이트 노트에 따르면 PNG, JPG, GIF, ICO, SVG를 업로드할 수 있고, 고객센터 문서에는 선택 사항인 다크 모드용 브라우저 탭 아이콘도 안내되어 있습니다. 다만 SVG는 브라우저 호환성을 위해 PNG로 변환되므로, 주로 쓰는 브라우저에서 결과를 직접 확인하세요.

새 Webflow 파비콘이 구글에 표시되기까지 얼마나 걸리나요?

정해진 기간은 없습니다. 구글이 언제 다시 크롤링해서 검색 결과의 아이콘을 갱신할지는 구글이 결정하며, 커뮤니티에서는 며칠에서 몇 주, 때로는 그 이상 걸렸다는 후기가 있습니다. 직접 할 수 있는 일은 게시된 사이트에 아이콘이 제대로 적용되어 있는지 확인하는 것입니다.

한 줄 요약: Webflow에서 Site settings(사이트 설정) > General(일반) > Icons(아이콘) 로 이동해 정사각형 이미지를 하나 업로드하고, 업데이트할 아이콘(라이트 파비콘, 선택 사항인 다크 모드 파비콘, 웹클립)을 고른 뒤 적용하고 사이트를 게시하세요. Webflow는 파비콘 32x32, 웹클립 256x256을 안내하며, 나머지 크기는 업로드한 이미지에서 자동으로 만듭니다. 게시하기 전에는 라이브 사이트에 아무것도 바뀌지 않습니다. (2026년 11월 기준, Webflow 고객센터와 업데이트 노트 확인)

Webflow가 요구하는 것

예전 튜토리얼에서는 32x32 파비콘과 256x256 웹클립을 따로 업로드하는 두 개의 필드를 설명합니다. 현재 Webflow 고객센터 문서는 더 간단한 방식을 안내합니다. 정사각형 이미지를 하나 올리면 크기 조정은 Webflow가 처리합니다. 각 아이콘의 용도는 다음과 같습니다.

아이콘	Webflow가 안내하는 크기	표시되는 위치
파비콘(라이트)	32x32	브라우저 탭, 북마크
파비콘(다크 모드, 선택)	32x32	브라우저가 다크 모드일 때의 탭
웹클립	256x256	홈 화면 바로가기 등 저장된 링크
자동 생성되는 추가 아이콘	48x48 파비콘, 180x180 및 192x192 터치 아이콘	업로드한 이미지를 바탕으로 Webflow가 생성

Webflow 업데이트 노트 기준으로 업로드 가능한 형식은 PNG, JPG, GIF, ICO, SVG입니다. SVG는 브라우저 간 호환성을 위해 PNG로 변환됩니다.

플랫폼별 크기를 더 자세히 알고 싶다면 파비콘 크기 가이드를 참고하세요.

먼저 이미지를 준비하세요

파비콘은 탭에서 대략 16~32픽셀 너비로 표시되므로, 설정보다 원본 이미지가 더 중요합니다.

정사각형으로 시작하세요. 웹클립이 확대되어 흐려지지 않도록 256x256 이상의 정사각형 캔버스로 내보내세요.
단순하게 만드세요. 전체 워드마크 대신 로고 심볼이나 글자 하나를 쓰세요. 세부 요소는 탭 크기에서 뭉개집니다.
배경을 고려하세요. 투명 PNG는 밝은 탭에서는 잘 보이지만 어두운 탭에서는 사라질 수 있습니다. 다크 모드 파비콘을 쓴다면 밝은 색 심볼 버전을 따로 만드세요.
무난한 파일 이름을 쓰세요. 업로드한 에셋 이름이 게시된 HTML에 노출될 수 있으니 "final_v3_REAL.png" 같은 이름은 피하세요.

Webflow에서 파비콘과 웹클립 추가하는 방법

Webflow 디자이너 또는 대시보드에서 프로젝트를 열고 Site settings(사이트 설정) 로 이동합니다.
General(일반) 탭을 선택하고 Icons(아이콘) 까지 스크롤합니다.
Upload icon(아이콘 업로드) 을 클릭하고 정사각형 이미지를 선택합니다.
이 이미지로 업데이트할 아이콘(파비콘, 선택 사항인 다크 모드 파비콘, 웹클립)을 고릅니다.
다크 모드용 아이콘을 다르게 쓰고 싶다면 다크 모드 슬롯에 추가하세요. 이 단계는 선택 사항입니다.
Apply(적용) 를 클릭합니다. Webflow가 UI를 업데이트하면서 문구가 조금 달라질 수 있으니, 화면에 보이는 이름에 맞춰 진행하세요.
사이트를 도메인에 게시(Publish) 합니다. 저장만으로는 아이콘이 라이브 사이트에 반영되지 않습니다.
시크릿 창에서 라이브 사이트를 열어 탭 아이콘을 확인합니다.

복사해서 쓰는 체크리스트

`` [ ] 256x256 이상의 정사각형 원본 이미지 [ ] 탭 크기에서도 알아볼 만큼 단순한 심볼 [ ] 밝은 브라우저 테마와 어두운 테마에서 모두 확인 [ ] Site settings > General > Icons에 업로드 [ ] 변경 사항 적용(Apply) [ ] 라이브 도메인에 게시 (webflow.io 스테이징 도메인만 게시하지 않기) [ ] 시크릿 창에서 확인 [ ] 이전 아이콘이 계속 보이면 강력 새로고침 또는 캐시 삭제 ``

문제 해결

파비콘이 예전 아이콘이나 Webflow 로고로 보여요

아래 순서대로 확인하세요.

다시 게시하세요. 아이콘은 게시해야만 라이브에 반영됩니다. 여러 도메인에 게시한다면 모두 포함하세요.
시크릿 창에서 테스트하세요. 브라우저는 파비콘을 강하게 캐시하기 때문에, 일반 탭에서는 예전 아이콘이 오래 남아 있을 수 있습니다.
페이지를 강력 새로고침하거나 브라우저를 완전히 닫았다가 다시 여세요.
파일을 직접 열어 보세요. 페이지 소스에 있는 아이콘 URL이 새 탭에서 정상적으로 열리는지 확인하세요.

업로드가 거부되거나 이미지가 깨져 보여요

정확한 크기를 요구하던 이전 방식에서 크기 오류가 났다는 커뮤니티 글이 있습니다. 같은 문제가 생기면 정사각형 이미지로 다시 시도하고, 계속되면 다른 브라우저나 시크릿 창에서 해 보세요. 이 조언은 Webflow 공식 문서가 아니라 포럼 후기에 근거한 것이므로 임시 해결책으로 생각하세요.

구글 검색 결과에 엉뚱한 아이콘이 나와요

검색 결과의 아이콘은 Webflow가 아니라 구글이 관리합니다. 커뮤니티에서는 반영에 며칠, 몇 주, 또는 그 이상 걸린다는 이야기가 있습니다. 라이브 사이트에서 아이콘이 정상적으로 로드되는지 확인한 뒤 기다리세요. 일정한 URL에서 변하지 않는 정사각형 아이콘을 유지하면 도움이 됩니다.

탭에서 아이콘이 흐릿해요

대개 원본에 세부 요소가 너무 많거나 처음부터 해상도가 낮았기 때문입니다. 더 단순한 심볼을 큰 크기로 다시 만들어 업로드하세요.

어떤 형식으로 업로드해야 할까요?

형식	적합한 경우	주의할 점
PNG	대부분의 사이트. 안정적이고 투명 배경 지원	웹클립용으로 충분한 해상도 필요
SVG	깔끔한 벡터 원본	Webflow가 PNG로 변환하므로 결과를 미리 확인
ICO	레거시 작업 방식	Webflow가 크기를 자동으로 만들어 주므로 대개 불필요
JPG	거의 권장하지 않음	투명 배경이 없어 배경 상자가 남음

잘 모르겠다면 256x256 이상의 정사각형 PNG가 가장 안전합니다.

사이트 런칭 준비에서의 위치

파비콘은 제목, 설명, 소셜 이미지와 함께 런칭 체크리스트의 작은 항목 중 하나입니다. 플랫폼을 정하기 전에 비교하고 있다면 Webflow 비교와 Webflow 대안 페이지에서 장단점을 확인할 수 있고, 여러 플랫폼에서 사이트를 운영한다면 파비콘 변경 일반 가이드도 도움이 됩니다.

만들어진 레이아웃에서 시작하고 싶다면, We.Inc의 무료 플랜으로 준비된 템플릿을 사용해 최대 3개의 사이트를 게시할 수 있습니다. 프롬프트로 사이트 초안을 만들어 주는 AI 빌더는 Starter 플랜(월 $20)부터 사용할 수 있습니다. 여기에서 가입하세요.

무료로 시작하기 · 신용카드 필요 없음

Umair Ali Sadaqat

We.Inc 설립자

Umair는 We.Inc의 설립자입니다. AI 웹사이트 제작, 에이전시, 웹 스튜디오 운영 사업에 관해 글을 씁니다.

멋진 것을 만들 준비가 되셨나요?

하나의 플랫폼에서 출시하고 성장하고 자동화하는 15,000+개 비즈니스가 We.Inc를 사용합니다.