블로그를 운영하다 보면 탭에 나오는 기본 아이콘이 살짝 아쉬울 때가 있어요.
뭔가 내 블로그만의 개성이 부족하달까요?
그래서 이번에 귀여운 강아지 이미지를 직접 파비콘으로 만들어서 적용해봤어요 🐶
생각보다 어렵지 않아서, 혹시 저처럼 파비콘 바꾸고 싶은 분들께 도움이 될까 싶어 방법을 정리해둡니다!
우선 저는 이 이미지를 사용했습니다. 강아지를 좋아하기도 하고 귀여서 ㅎㅎ
먼저 파비콘으로 적용하려면 파비콘 이미지로 바꾸셔야 합니다.
크기는 최소 32×32px 이상, 권장: 64×64, 128×128!
아무 이미지든 아래 사이트에서 파비콘으로 변환할 수 있어요:
저 강아지 사진을 .ico 파일로 바꿨을때
이렇게 바꼈습니다. 저랑 똑같이 하실 분은 이 파일 다운로드 받아주시면 될것 같아요.
다운로드를 다 받으셨다면 이제 개인 티스토리 관리자 페이지에 접속합니다.
왼쪽 메뉴에 있는 꾸미기 탭 중 스킨 편집 클릭!
상단에 떠있는 스킨의 html 편집 클릭!
그럼 이렇게 세 항목이 상단에 떠 있을 텐데 여기서 파일업로드 클릭!
여기서 + 추가 버튼을 눌러 파일을 올려주세요!
업로드 하신 후에 바로 닫지 마시고 꼭!!!! .ico 파일의 URL을 복사 해주세요!!
📌 복사한 URL은 보통 이렇게 생겼습니다:
https://blog.kakaocdn.net/dn/xxxxxxxxxxxxxxxx/puppy_favicon.ico
거의 다 왔습니다!
이제 이 코드를 HTML <head> 태그 안에 붙여넣기만 하면 돼요
<link rel="icon" href="복사한_아이콘_URL" type="image/x-icon">
<!-- 예시 -->
<head>
<meta charset="utf-8">
<title>내 블로그</title>
<link rel="icon" href="복사한_URL" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
❗ 캐시 때문에 안 보일 수도 있어요!
적용하고도 바로 안 보이면:
Ctrl + F5 (PC) 또는 Cmd + Shift + R (Mac)
또는 다른 브라우저/시크릿 창에서 확인!!
짜잔!
탭에서 살짝 고개 내밀고 있는 강아지를 볼 때마다 흐뭇해요 🐶
여러분도 좋아하는 이미지로 블로그에 소소한 즐거움을 더해보세요!
읽어주셔서 감사합니다 💛