주말 내내 새 기술 블로그의 CSS 그리드를 완벽하게 정렬하는 데 시간을 보냈는데, 브라우저 탭에 여전히 기본 회색 지구본 아이콘이 표시된다면 설정이 아직 덜 끝난 것입니다. 개인 블로그용 커스텀 파비콘은 '내가 디테일에 신경 쓰고 있다'는 것을 보여주는 가장 쉬운 방법입니다. Velog나 Tistory의 인기 개발자 블로그들을 살펴보세요. 그들은 복잡한 기업용 로고를 쓰지 않습니다. 단순하고 알아보기 쉬운 얼굴 아바타나 깔끔한 이니셜 하나를 사용할 뿐입니다.
저는 이 부분에 대해 확고한 의견이 있습니다. 개인 블로그는 개인적인 느낌이 나야 합니다. 주말에 끄적이는 글을 위해 포춘 500대 기업 같은 로고를 디자인하려 애쓰지 마세요.
아이콘 준비물
정사각형의 대비가 뚜렷한 이미지만 있으면 됩니다. 배경을 지운 증명사진이나 단색 배경에 굵은 글씨 하나가 가장 효과적입니다.
1단계: 올바른 이미지 선택하기
실명으로 글을 쓴다면 본인 얼굴을 사용하는 것을 강력히 추천합니다. 꽉 찬 북마크 바에서 즉각적인 신뢰와 인지도를 쌓을 수 있습니다. 익명을 선호한다면 굵은 단일 문자 SVG를 사용하세요. 전체 단어나 복잡한 기하학적 모양은 피하세요. 16x16 픽셀에서는 알아볼 수 없는 얼룩이 되어버립니다. (기존 마크를 변형하고 싶다면 로고로 파비콘 만들기 가이드를 읽어보세요).
2단계: 최소한의 파일 생성하기
개인 블로그에는 30개의 파일이 필요한 기업용 설정이 필요하지 않습니다. 2026년 현재 정확히 세 가지만 있으면 됩니다. SVG(최신 브라우저용), 180x180 PNG(Apple 기기용), 그리고 대체용 ICO입니다. 이미지를 Mzu favicondl에 끌어다 놓으면 최적화된 파일들을 정확히 뽑아냅니다. 포토샵에서 수동으로 크기를 조절하느라 시간을 낭비하지 마세요.
3단계: HTML 삽입하기
블로그의 <head> 태그를 엽니다. Astro, Next.js 또는 정적 사이트 생성기 중 무엇을 사용하든 이 스니펫을 그대로 붙여넣으세요.
<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='icon' href='/favicon.ico' sizes='32x32'>피해야 할 흔한 함정
- 다크 모드의 덫: 이니셜이 투명한 배경에 검은색이라면, 다크 모드 브라우저 탭을 사용하는 사용자에게는 완전히 사라져 보이지 않게 됩니다. 항상 단색 배경을 사용하거나 두꺼운 흰색 테두리를 넣으세요.
- 캐시의 악몽: 브라우저는 오래된 파비콘을 아주 끈질기게 기억합니다. 블로그 아이콘을 업데이트했는데도 보이지 않는다면 당황하지 마세요. 파일 경로에
?v=2와 같은 쿼리 문자열을 추가하여 강제로 새로고침하세요.
블로그는 여러분의 디지털 거실입니다. 현관문을 흔한 템플릿처럼 보이게 방치하지 마세요. 좋은 사진을 골라 생성기를 돌리고, 브라우저 탭에 여러분의 자리를 차지하세요. (퍼스널 브랜딩에 대해 더 알고 싶다면 포트폴리오 웹사이트 파비콘 가이드를 확인하세요).