티스토리 파비콘 만드는 방법 정말 쉽고 빠르게 파비콘 제작!

파비콘 설명 및 파비콘 만들어 설정하기

Ai 일러스트에서 사진 오류 없이 불러오는 방법 + plus

favicon(파비콘)은

파란색으로 동그라미 친 곳을 봤을 때, 사이트처럼 앞에 저런 아이콘이 뜨는 것 보이시나요? 저겁니다! 좀 더 사전적으로 말해보면 인터넷 웹 브라우저의 주소창에 웹페이지를 대표하는 로고라 보시면 되죠.

 

티스토리 파비콘 권장: 100kb 이하입니다. 150px*150px 사이즈로 png파일을 만들어서 파비콘(확장자: .ico)을 만들면 대략 94kb 정도 나오더라고요.

16px*16px 이 기본규격이며, 32px*32px으로도 많이 만드세요.

저는 원래 만들어 둔 로고가 커서 그걸 줄였는데, 150px으로 했어요.

티스토리에서 설정하는 장소: 톱니바퀴 모양을 눌러 블로그관리홈 → 관리-블로그 → 파비콘

 

우선 필수는 아니나, 이것도 티스토리 블로그 최적화에 포함되지 않을까 싶어서 만들어 적용해봤어요.

---

만약 저처럼 사람얼굴이 들어간 로고로

하고 싶으신 분들을 위해 팁을 올릴게요.

1. 우선 포토샵photoshop이나 일러스트레이터 Ai를 켭니다.

새 창을 열고 약 500px*500px 만들기

포토샵에서는 open으로 사진을 불러오고,

일러스트레이터에서는 place 버튼을 눌러 사진을 소환해서 embed 버튼으로 embed시킵니다.

※왜 embed 해야 하는 것인가? 나중에 이미지 소실이 일어났을 때를 대비.

그냥 불러왔을 때 이미지가 사라지면 Ai가 못 꺼내오기 때문입니다.

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

2. 다 만들고 사이즈 줄이기.

포토샵에서는 Image-Image size에서 원하는 픽셀로 맞춥니다.

일러스트레이터에서는 Artboard(아트보드) 사이즈를 원하는 크기로 알맞게 줄입니다.

※파비콘 만들 때 유의할 점은 파비콘 파일 크기가 100kb 이내가 되게 해야 한다는 것입니다.

 

3. png 파일로 저장

---

https://icoconvert.com/

파비콘 만드는 사이트

ICO Convert - Create Icons From PNG & JPG Images Online

파비콘 사이트 이미지 정보

저긴 여러 확장자가 된다고 쓰여있지만, 아무래도 배경이 하얀 것보다 투명한 게 아이콘으로써 깔끔해 보이겠죠? 그래서 png를 쓴 것입니다.

 

파일 선택을 누르고 Upload 버튼을 누릅니다.

밑으로 그 후에 쭉 내리면 이렇게 뜨는데,

Convert ICO를 누르고 저장하면 나만의 파비콘 아이콘 만들기 완성! 너무 간단하죠? 그리고 블로그관리의 설정에 들어가서 파비콘을 업로드하면 저처럼 위에 티스토리 T 로고 대신 나만의 아이콘으로 변환되어 좀 더 사이트 기분을 낼 수 있습니다. 이게 최적화의 또 다른 단계였으면 좋겠다는 생각이 드네요~

---

너무 쉬워서 길게 글을 쓸 필요도 없겠네요.

요즘 블로그 작성하고 꾸미는데 점점 흥미가 생기고 있어요.

네이버 블로그 홈페이지형으로 만드는 것도 사실 정말 쉬운데, 그건 올려야 하나 말아야 하나 고민이 너무 되고 있습니다. 사실 성격에 귀차니즘이 너무 심각하기 때문인데요 ㅠ 아 여기서 영알못 분들을 위한 깜짝 영어 표현 하나 알려두고 이제 그만 포스트 작성을 마치겠습니다.

귀차니즘을 표현할 때, I am so lazy도 쓸 수 있고 couch potato도 쓸 수 있어요.

덤으로 나 그냥 있어 또는 그냥 시간 얼렁뚱땅하게 보낼 때는, I am (just) chilling 하고 표현하면 돼요!