수십 개의 탭을 열어두고 웹서핑을 하다 보면 어디가 어딘지 헷갈려서 엉뚱한 창을 닫아버린 적이 있을 것이다. 그 수많은 탭 속에서 내 블로그를 한눈에 찾게 해주는 비밀 무기가 바로 파비콘이다. 브라우저 탭 구석에 덩그러니 놓인 지구본 모양의 기본 아이콘을 그대로 방치하고 있다면, 오늘 이 글을 통해 1분 만에 내 블로그만의 개성 있는 간판을 달아보자.

이런 순간에 파비콘이 필요하다

  • 열심히 쓴 글을 공유했는데 링크 옆에 밋밋한 기본 아이콘만 뜰 때
  • 스마트폰 홈 화면에 블로그를 추가했는데 다른 앱들과 어울리지 않게 허전할 때
  • 내 블로그만의 시그니처 컬러나 로고로 방문자에게 확실한 인상을 남기고 싶을 때
  • 포트폴리오나 노션 페이지를 남들에게 당당하게 공유하고 싶을 때

1분 만에 파비콘 뚝딱 만드는 법

파비콘 제작 및 적용 절차

  1. 1
    이미지 준비

    블로그 로고나 마스코트가 담긴 선명한 이미지 파일을 준비한다.

  2. 2
    파일 업로드

    파비콘 생성기 화면에 준비한 파일을 올린다.

  3. 3
    자동 변환

    시스템이 기본 사이즈부터 고해상도 레티나 디스플레이용 파일까지 알아서 만들어준다.

  4. 4
    다운로드 및 적용

    압축 파일을 다운로드하고 블로그 관리자 페이지에 넣어준다.

디자인 프로그램이나 포토샵을 켤 필요도 없다. 그냥 갖고 있는 이미지 파일 하나만 있으면 Favicon(파비콘) 생성기를 통해 순식간에 끝낼 수 있다.

  1. 블로그 로고나 마스코트가 담긴 선명한 이미지 파일을 준비한다.
  2. 파비콘 생성기 화면에 파일을 올린다.
  3. 시스템이 자동으로 16x16, 32x32 같은 기본 사이즈부터 고해상도 레티나 디스플레이용 파일까지 알아서 척척 만들어준다. 만약 기기별로 필요한 정확한 규격이 궁금하다면 파비콘 크기 가이드를 참고해 보자.
  4. 압축 파일을 다운로드하고 블로그 관리자 페이지에 쏙 넣어주면 끝이다.

작아도 눈에 확 띄게 만드는 꿀팁

작은 아이콘을 눈에 띄게 만드는 요령
  • 복잡한 무늬보다는 단색이나 투명 배경을 사용하여 단순하게 구성한다
  • 로고의 디테일한 부분 대신 가장 특징적인 실루엣이나 첫 글자를 과감하게 키운다
  • 다크 모드와 라이트 모드 어디서나 잘 보이도록 배경과 아이콘의 색상 대비를 확실하게 준다

파비콘은 세상에서 가장 작은 그림 중 하나다. 스마트폰이나 모니터 탭 구석에서 겨우 16픽셀 남짓한 크기로 보이니, 복잡한 풍경 사진이나 글씨가 잔뜩 들어간 이미지는 역효과가 난다.

  • 배경은 단순하게: 복잡한 무늬보다는 단색이나 투명 배경이 훨씬 깔끔하다.
  • 핵심만 크게: 로고의 디테일한 부분은 다 지워지고 뭉개지기 쉽다. 가장 특징적인 실루엣이나 첫 글자만 과감하게 키우는 것이 좋다.
  • 대비 효과 주기: 어두운 다크 모드 브라우저와 밝은 라이트 모드 브라우저 어디서나 잘 보이도록 배경과 아이콘의 색상 대비를 확실하게 주는 것이 유리하다.