유틸리티 소개

파비콘 만들어서 웹사이트에 적용하는 방법

내 블로그 탭에 아이콘이 없어서 밋밋하다. 파비콘이라는 걸 만들어 적용해봤다.

파비콘이란

브라우저 탭에 보이는 작은 아이콘이다. 북마크할 때도 이 아이콘이 표시된다. 16x16, 32x32 픽셀의 작은 이미지다.

만드는 방법

로고를 작게 줄여서 ICO 파일로 변환하면 된다. 온라인 파비콘 생성기에 이미지 올리면 자동으로 만들어준다. 이미지 변환 도구를 활용할 수 있다.

적용 방법

HTML head 태그에 link 태그를 추가한다. 티스토리나 워드프레스는 설정에서 업로드하면 된다.

주의사항

너무 복잡한 디자인은 작게 줄이면 안 보인다. 단순한 모양이 좋다. 배경색과 대비되게 만들어야 잘 보인다. 온라인 생성 도구로 쉽게 만들 수 있다.

파비콘 적용 후 체크사항

브라우저 캐시 때문에 바로 안 바뀔 수 있다. 강력 새로고침이나 캐시 삭제를 해보자. 다른 브라우저에서도 확인해보자. 모바일에서 홈 화면에 추가했을 때도 확인이 필요하다. 파비콘 생성 도구로 여러 크기를 만들어두자.

브랜딩의 작은 디테일

파비콘은 작지만 브랜드 인식에 큰 영향을 줍니다. 브라우저 탭에서 내 사이트를 찾기 쉽게 만들어주죠. 간단하면서도 효과적인 브랜딩 요소입니다. 파비콘 생성기로 쉽게 만들어서 적용해보세요.

16x16, 32x32, 180x180 등 여러 크기로 만들어두면 다양한 기기에서 잘 보입니다.

사이즈별로 여러 개 만들어두면 반응형 웹에서 적절한 크기를 불러올 수 있어요. 모바일에서도 깔끔하게 보입니다.