Web Guide파비콘앱 아이콘브라우저 아이콘
파비콘과 앱 아이콘 만들기
브라우저 탭에 기본 아이콘이 떠 있으면 미완성처럼 보입니다.
작지만 눈에 띄는 부분입니다. 만드는 데 시간도 거의 안 걸립니다.

01어디에 쓰이는가
브라우저 탭이 가장 눈에 띄지만, 그 외에도 여러 곳에 쓰입니다. 북마크, 검색 결과, 모바일 홈 화면 아이콘 등입니다.
각각 필요한 크기가 다르므로 여러 개를 준비해야 합니다.
가장 작은 크기. 단순한 형태여야 보입니다.
즐겨찾기에 추가했을 때 표시됩니다.
일부 검색엔진이 결과 옆에 표시합니다.
홈 화면에 추가하면 앱 아이콘처럼 보입니다. 가장 큰 크기.
메신저로 공유할 때 일부 표시됩니다.
02로고를 그대로 줄이면 안 된다
가로로 긴 로고를 작은 정사각형에 넣으면 아무것도 안 보입니다. 파비콘은 별도로 만들어야 합니다.
심볼만 쓰거나, 회사명 첫 글자를 쓰거나, 단순한 도형으로 표현하는 방법이 있습니다.
로고를 그대로 축소
글자가 안 보임 · 회색 뭉치처럼 보임 · 무슨 사이트인지 알 수 없음
파비콘용 별도 제작
심볼만 또는 첫 글자 · 작은 크기에서도 형태가 구분됨 · 브랜드 색 적용 · 알아볼 수 있음
03단순하게 만든다
아주 작은 크기에서 보여야 하므로 디테일이 있으면 뭉개집니다. 형태를 최대한 단순화해야 합니다.
색도 두세 가지로 제한하는 것이 좋습니다. 그라디언트나 그림자는 작은 크기에서 의미가 없습니다.
형태
단순한 도형이나 글자 하나. 디테일을 뺍니다.
색상
두세 가지. 대비가 확실하게.
여백
가장자리에 약간의 여백을 둡니다. 꽉 차면 답답해 보입니다.
배경
투명과 단색 두 버전. 다크모드 탭에서 안 보일 수 있습니다.
효과 제거
그라디언트, 그림자, 얇은 선은 작은 크기에서 사라집니다.
04여러 크기를 준비한다
용도마다 필요한 크기가 다릅니다. 하나만 만들어 두면 큰 화면에서 흐릿하게 보입니다.
제작사에 파비콘 세트를 요청하면 필요한 크기를 모두 만들어 줍니다.
작은 크기 브라우저 탭용. 가장 기본입니다.
중간 크기 북마크, 바로가기용.
큰 크기 모바일 홈 화면 아이콘용. 가장 크게 표시됩니다.
벡터 버전 가능하면 SVG도 함께. 어떤 크기에서도 선명합니다.
확인 실제로 탭에 띄워 보고, 모바일 홈 화면에도 추가해 봅니다.
CHECK POINT
□ 파비콘이 설정되어 있는가
□ 로고를 그대로 축소하지 않고 별도로 만들었는가
□ 작은 크기에서 형태가 구분되는가
□ 그라디언트나 얇은 선 같은 디테일을 뺐는가
□ 여러 크기를 준비했는가
□ 모바일 홈 화면 아이콘용 큰 크기가 있는가
□ 실제 브라우저와 모바일에서 확인했는가
#파비콘#앱 아이콘#브라우저 아이콘#홈 화면 추가#로고 활용#브랜드#디테일#홈페이지 디자인#웹비스타#홈페이지 제작