파비콘이 뭔가요
브라우저 탭에 작은 아이콘이 보입니다. 네이버는 초록색 N이고 구글은 G입니다. 이게 파비콘입니다. 내 웹사이트에도 넣고 싶은데 어떻게 만들어야 할까요. 브랜드 아이덴티티를 완성하는 파비콘 만들기를 알려드릴게요.
왜 필요한가요
탭을 여러 개 열었을 때 구분하기 쉽습니다. 북마크에도 파비콘이 표시됩니다. 전문적인 사이트처럼 보입니다. 브랜드 인지도에 도움이 됩니다. 없으면 기본 아이콘이 나와서 허전합니다. 작은 디테일이지만 신뢰도에 영향을 줍니다.
파비콘 크기
기본은 16x16 픽셀입니다. 요즘은 여러 크기가 필요합니다. 32x32 48x48 등 다양한 크기를 준비하세요. 애플 기기용 180x180도 있습니다. 안드로이드 홈 화면 아이콘용도 따로 있습니다. 한번에 여러 크기를 만들어주는 도구를 쓰세요.
만드는 방법
로고를 작게 줄여서 만들 수 있습니다. 너무 복잡한 로고는 안 보입니다. 심플하게 핵심 요소만 남기세요. 파비콘 생성기에 이미지를 올리면 여러 크기로 변환해줍니다. ICO 파일로도 만들어줍니다.
디자인 팁
단색 배경에 심플한 형태가 좋습니다. 글자 하나만 넣어도 됩니다. 브랜드 컬러를 사용하세요. 다크 모드에서도 잘 보이는지 확인하세요. 작은 크기에서 테스트해보세요. 16픽셀에서 알아볼 수 있어야 합니다.
적용하기
HTML head 태그에 link 태그로 연결합니다. 워드프레스는 테마 설정에서 쉽게 넣을 수 있습니다. 브라우저 캐시 때문에 바로 안 바뀔 수 있습니다. URL 인코더와 웹 도구들로 사이트를 완성하세요.