수십 개의 탭을 열어두고 웹서핑을 하다 보면 어디가 어딘지 헷갈려서 엉뚱한 창을 닫아버린 적이 있을 것이다. 그 수많은 탭 속에서 내 블로그를 한눈에 찾게 해주는 비밀 무기가 바로 파비콘이다. 브라우저 탭 구석에 덩그러니 놓인 지구본 모양의 기본 아이콘을 그대로 방치하고 있다면, 오늘 이 글을 통해 1분 만에 내 블로그만의 개성 있는 간판을 달아보자.
이런 순간에 파비콘이 필요하다
- 열심히 쓴 글을 공유했는데 링크 옆에 밋밋한 기본 아이콘만 뜰 때
- 스마트폰 홈 화면에 블로그를 추가했는데 다른 앱들과 어울리지 않게 허전할 때
- 내 블로그만의 시그니처 컬러나 로고로 방문자에게 확실한 인상을 남기고 싶을 때
- 포트폴리오나 노션 페이지를 남들에게 당당하게 공유하고 싶을 때
1분 만에 파비콘 뚝딱 만드는 법
파비콘 제작 및 적용 절차
- 1이미지 준비
블로그 로고나 마스코트가 담긴 선명한 이미지 파일을 준비한다.
- 2파일 업로드
파비콘 생성기 화면에 준비한 파일을 올린다.
- 3자동 변환
시스템이 기본 사이즈부터 고해상도 레티나 디스플레이용 파일까지 알아서 만들어준다.
- 4다운로드 및 적용
압축 파일을 다운로드하고 블로그 관리자 페이지에 넣어준다.
디자인 프로그램이나 포토샵을 켤 필요도 없다. 그냥 갖고 있는 이미지 파일 하나만 있으면 Favicon(파비콘) 생성기를 통해 순식간에 끝낼 수 있다.
- 블로그 로고나 마스코트가 담긴 선명한 이미지 파일을 준비한다.
- 파비콘 생성기 화면에 파일을 올린다.
- 시스템이 자동으로 16x16, 32x32 같은 기본 사이즈부터 고해상도 레티나 디스플레이용 파일까지 알아서 척척 만들어준다. 만약 기기별로 필요한 정확한 규격이 궁금하다면 파비콘 크기 가이드를 참고해 보자.
- 압축 파일을 다운로드하고 블로그 관리자 페이지에 쏙 넣어주면 끝이다.
작아도 눈에 확 띄게 만드는 꿀팁
- 복잡한 무늬보다는 단색이나 투명 배경을 사용하여 단순하게 구성한다
- 로고의 디테일한 부분 대신 가장 특징적인 실루엣이나 첫 글자를 과감하게 키운다
- 다크 모드와 라이트 모드 어디서나 잘 보이도록 배경과 아이콘의 색상 대비를 확실하게 준다
파비콘은 세상에서 가장 작은 그림 중 하나다. 스마트폰이나 모니터 탭 구석에서 겨우 16픽셀 남짓한 크기로 보이니, 복잡한 풍경 사진이나 글씨가 잔뜩 들어간 이미지는 역효과가 난다.
- 배경은 단순하게: 복잡한 무늬보다는 단색이나 투명 배경이 훨씬 깔끔하다.
- 핵심만 크게: 로고의 디테일한 부분은 다 지워지고 뭉개지기 쉽다. 가장 특징적인 실루엣이나 첫 글자만 과감하게 키우는 것이 좋다.
- 대비 효과 주기: 어두운 다크 모드 브라우저와 밝은 라이트 모드 브라우저 어디서나 잘 보이도록 배경과 아이콘의 색상 대비를 확실하게 주는 것이 유리하다.