본문 바로가기
기타정보공유

티스토리 블로그에 파비콘 달아서 브랜딩 하기

by 소싱 전문가 2020. 8. 3.
반응형

나의 티스토리를 조금이라도 돋보이게 하기 위한 방법들을 찾아보다가

파비콘을 활용하면 아무래도 나의 티스토리가 조금더 돋보이는 효과가 있을거라는 것을 알게 되었고

적용을 하다보니까 생각보다 까다로운 부분이 있어서 

알기 쉽고 사용하기 편리하게 정리하여 공유 합니다.

 

 

우선 파비콘이 무엇인지 알아야 겠죠? 

 

모두가 본적은 많지만 정확한 용어를 모를수도 있을 것 같습니다.

아무래도 전문 용어이니까요.

 

파비콘은 favorites icon 의 줄임말로 즐겨찾기 아이콘이라고 하고

주소창에 작은 아이콘으로 표현이 됩니다. 

사이트를 잘 나타내게 도움을 주는 역할을 합니다.

 

쉽게 설명 하면 파비콘은 사이트를 열면 상단에 보이는 제목앞에 보이는 조그만 아이콘입니다.

 

 

 

위 그림과 같이 브라우저 상단에 보이는 저 조그마한 아이콘을 파비콘이라고 하며, 브라우저 탭을 많이 열어놓을 경우 파비콘으로 구분하여 빠르게 찾을 수도 있습니다.

파비콘은 사이트의 아이덴티티를 나타내는 중요한 수단 중 하나입니다.

 

여러분도 많이 보셨을 건데요.

티스토리에 쉽게 적용이 가능하니까 활용을 하면 좋겠습니다.

 

참고로 네이버나 구글등 검색 사이트에 나의 사이트가 등록이 되면 검색시 이 파비콘도 같이 보여집니다.



​ <사이트별 파비콘 등록방법>

1. 네이버 블로그에서는 파비콘 등록이 안타깝게 불가능 합니다.

2. 티스토리는 자유도가 조금 더 높아서 파비콘 등록이 가능합니다. 

3. 워드프레스 등의 사이트에서는 "아이덴티티" 편집에 512px X 512px 사이즈의 *.png 이미지를 올려주기만 하면 등록이 됩니다. 자세한 워드프레스 파비콘 등록 방법은 여기를 참고하세요.

4. 일반 제작 웹사이트에 파비콘을 등록하기 위해서는 16px X 16px 혹은 32px X 32px 크기의 *.png 또는 *.ico 확장자 이미지 파일을 들어 서버에 올리고, html의 head 태그 사이에 링크태그로 걸어줍니다.

 

 

▶▶ 여기에서는 티스토리에 등록하는 방법을 자세히 알아 보겠습니다.

 

 

파비콘의 확장자는 기본적으로 .ico 입니다.

jpg 나 gif 등의 화일은 등록이 불가 합니다.

파비콘은 이미지 화일이 아니고 아이콘 화일이기 때문에 포토샵등으로 jpg나 png를  ico로 변경 하시면 안되고

이미지 화일을 따로 ico로 변경해주는 사이트나 프로그램을 이용해 주어야 합니다.

 

그리고 파비콘의 사이즈는 16px X 16px 혹은 32px X 32px 로 만들어 주어야 합니다.

 

정리해 드리면

먼저 16px X 16px 혹은 32px X 32px의 이미지 화일을 만들고 이 화일을 ico로 바꿔 주는 사이트를 이용하여

ico로 변환하여 저장한뒤에 사용하고자 하는 사이트에 업로드 해주시면 됩니다.

 

파비콘을 사용하는 방법과 png등의 이미지 화일을 ico로 변환 하는 방법을 자세히 올려 드리겠습니다.

한번식 따라해보면 쉽게 하실수 있습니다.

 

1.사용할 파비콘 이미지 만들기

6px X 16px 혹은 32px X 32px의 이미지 화일을 만듭니다

포토샵등 이미지를 만들어 주는 프로그램을 활용하여 사용할 이미지를 만들어 줍니다.

되도록이면 이미지에 장점이 있고 변환이 쉬운 png화일을 만들어 줍니다.

 

 

2.이미지 변환하기

컨버터converter 나 제네리어터generator 사이트등 이미지 변환 사이트를 이용하여 ico 화일을 만들어 줍니다.

png등의 이미지화일을  -->  ico로 변환해 줍니다.

 

무료 이미지 변환 사이트 

https://convertio.co/kr/

 

페이지를 열면 보이는 창에서  바꿔줄 화일과 확장자를 선택하고 다음페이지로 넘어 갑니다.

 

선택한 화일을 확인하고 변환하기를 클릭해 줍니다.

 

변환된 ico 화일을 다운로드 하여 저장 합니다.

 

 

3. 사용하는 블러그나 사이트에 등록하여 줍니다.

아래 설명은 티스토리에 적용하는 방법입니다.

설정>> 관리 >> 블로그  로 이동하셔서 

아래 보이는 이미지에서 파비콘을 클릭하여 저장된 파비콘을 등록해 주시면 됩니다.

* 참고로 등록은 100kb 이하만 등록이 가능 합니다.

다른 변환 사이트가 이미지가 크게 나오는 경우가 있는데 위에 소개드린 사이트는 적당한 크기로 

변환이 되어 사용이 편리 합니다.

설정 >> 블로그 >> 파비콘 >> 불러오기 >> 등록 

 

 

등록 완료를 하시면 아래 이미지 처럼 파비콘이 보입니다.

아무래도 조금더 있어 보이는 느낌이랄까요?

뿌듯한 느낌이 들면서 좋아 보입니다 ^^

 

도움 되셨길 바라면서 이상 마칩니다.

반응형

댓글