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