본문 바로가기
IT컴퓨터

티스토리 아이콘과 파비콘 쉽게 만들기 및 설정방법

by 지식의쓰나미 2023. 7. 25.
반응형

 

안녕하세요.

여러분은 파비콘이 무엇인지 알고 계신가요?

구글 SEO 관련돼서 아마 들어보셨던 적이 있을 실 텐데요.

오늘은 파비콘을 간단하게 만드는 방법과 티스토리에서 아이콘과 파비콘을 어디서 등록하고 설정하는지 알아보겠습니다.

매우 쉬워서 5분도 안걸립니다.

함께 시작해 볼까요?

 

 

 티스토리 아이콘, 파비콘 간단하게 만들기

 

그런데 파비콘이 뭔가요?

시작하기에 앞서 파비콘에 대해 간단하게 알아보겠습니다.

 

파비콘(favicon : favorites + icon)이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘입니다. 네이버나 구글의 마크를 떠올려 보시면 쉽게 이해가 되실 겁니다.

 

구글과 네이버의 파비콘 사진
구글과 네이버의 파비콘 사진

 

이런 파비콘을 자신의 블로그에도 넣어준다면 개성을 표현하고 독립적이며 신뢰성을 줄 수 있겠죠.

이 파비콘을 쉽게 만들어 티스토리에 넣어보도록 하겠습니다.

 

 

① 아이콘 이미지 만들기

먼저 파비콘으로 사용할 로고 디자인이 필요한데 직접 그림작업이 가능하신 분들 빼고는 막막하시죠.

그래서 무료 로고 사이트를 이용하도록 하겠습니다.

세상이 참 편리해졌습니다.

무료로 아이콘을 만들어 주는 사이트로 이동하여 마음에 드는 아이콘을 다운로드하도록 하겠습니다.

우선 설명에 집중하실 수 있도록 사이트 주소는 글 하단에 적어놓겠습니다.

 

반응형

 

사이트에 접속을 하시면 검색창이 보이고 아래에 추천 아이콘들이 있습니다.

Weather, Social Media Pins, Dental 등 카테고리별로 마음에 드는 아이콘을 찾아보시거나 검색창에서 직접 입력하여 찾아보실 수 있습니다.

 

무료 아이콘 다운로드 사이트 사진
무료 아이콘 사이트

 

저는 병원 십자가 모양을 찾아서 다운로드하여 보겠습니다.

검색창에 영어나 한글로 둘 다 검색을 해도 됩니다.

병원이라고 입력하여 나온 아이콘들 중에서 저는 십자가 하트 모양이 마음에 들어 선택해 보았습니다.

 

티스토리에서 파비콘이나 아이콘 사이즈는 32px 또는 64px 사이즈를 권장하고 있습니다.

무료 사이트에서 다운로드할 때 64px 사이즈로 다운로드하여 주세요.

64px사이즈는 아래 정도 크기입니다.

 

무료 아이콘 사이트를 통해 다운로드한 64px 사이즈의 아이콘 사진

 

 

② PNG 아이콘을 파비콘용 ICO파일로 변환하기

자, 이제는 아이콘을 다운로드하였으니 파비콘용 파일로 변환을 시켜주겠습니다.

파비콘의 확장자명은 ICO입니다.

다운로드한 PNG파일을 ICO파일로만 변환시켜 주면 끝입니다.

 

이것도 무료 변환 사이트에서 진행하면 됩니다.

이 역시 설명에 집중하실 수 있도록 사이트 주소는 글 하단에 적어두겠습니다.

위에서 다운받은 아이콘 PNG파일을 선택하고 확장자는 ICO를 선택하여 변환버튼을 눌러주면 끝입니다.

 

 

무료 파비콘 확장자 변환시켜주는 사이트 사진
무료 파일 변환기

 

이렇게 아주 간단하게 아이콘과 파비콘 파일이 준비가 완료되었습니다.

마음에 드는 아이콘 고르느라 시간이 들어갈 뿐 편리한 무료 사이트들 덕분에 실제로는 1분도 안 걸리는 작업입니다.

이제 티스토리에서 설정하는 방법에 대해 알아보겠습니다.

 

 

 

티스토리에서 파비콘 설정하기

 

① 티스토리 관리 메뉴

티스토리 왼쪽 메뉴에서 맨 하단에 있는 관리항목에 있는 블로그를 찾아 진입합니다.

블로그를 선택하여 진입하면 화면 오른쪽에 아이콘과 파비콘 등록창이 보이실 겁니다.

저희는 둘 다 파일이 준비되었으니 불러오기 버튼을 이용해서 바로 등록을 해주면 됩니다.

 

티스토리 관리자 메뉴에서 아이콘과 파비콘을 등록하는 모습의 사진
티스토리 메뉴 설정

 

노란색 체크 박스를 보시면 예쁘게 아이콘과 파비콘이 등록되었습니다.

간혹 여기까지 작업을 다하시고 파비콘이 등록한 게 안 나오고 티스토리 꺼 그대로 나온다고 하시는 분들이 계십니다.

대부분의 이유는 불러오기를 하시고 아이콘 그림이 딱 뜨니 다 된 줄 아시고 변경사항 저장을 안 눌러서 그렇습니다.

변경사항 저장을 꼭 눌러주세요.

변경사항 저장을 바로 적용되지는 않고 누른 후 반영되기까지는 시간이 좀 걸리니 기다리시면 됩니다.

 

오늘 저와 함께 작업한 결과물입니다.

왼쪽이 파비콘 적용 전에 표출되었던 티스토리 파비콘이고 오른쪽이 적용 후의 파비콘입니다.

왼쪽은 새로고침을 하지 않아서 예전 티스토리 파비콘이 나오고 있고 오른쪽은 새로고침을 해서 적용된 모습이 잘 나오고 있는 겁니다.

 

파비콘 적용된 최종 모습 사진
적용된 파비콘 모습

 

 

모든 작업이 완료되었습니다.

고생하셨습니다.

이제 설명은 모두 끝났으니 사이트 주소를 안내해 드리겠습니다.

바로 아래 두 개 사이트를 이용하셔서 아이콘부터 만드시고 그다음 파비콘을 만들어 티스토리에 적용하시기 바랍니다.

 

 

 

오늘은 티스토리 파비콘 만들고 적용하는 방법에 대해 알아보았습니다.

도움이 되셨다면 아래 하트♡ 공감 부탁 드립니다.

아래 추천글도 많은 관심 바랍니다.

 

좋은 하루 보내세요.

감사합니다.

 

 

추천글

 

구글애즈 키워드플래너 CPC 광고단가 확인방법

안녕하세요. 오늘은 구글애즈 키워드플래너를 활용하여 CPC광고단가를 확인하고 내 블로그의 수익을 올리는 방법에 대해 알아보겠습니다. 왕초보도 바로 따라 할 수 있도록 매우 상세하게 작성

googlethx.tistory.com

 

구글서치콘솔 색인요청 실패: Robots.txt를 찾을 수 없음

안녕하세요. 오늘은 티스토리 블로그를 작성 후 구글서치콘솔에 색인등록을 할 때 색인요청 실패: Robots.txt를 찾을 수 없음 오류가 발생한 경우 해결방법에 대해 이야기해 보겠습니다. 평상시와

googlethx.tistory.com

 

티스토리 썸네일 사이즈 크기 변경방법 쉬운설명

안녕하세요. 오늘은 티스토리 블로그에서 썸네일 크기 변경하는 방법에 대해 알아보도록 하겠습니다. 티스토리를 하다 보면 썸네일이 직사각형으로 보여서 썸네일이 잘려 보이는 경우가 있습

googlethx.tistory.com

 

티스토리 다음 고객센터 저작권침해 신고 최고의 일처리 속도

안녕하세요. 오늘은 티스토리 다음 고객센터에서 저작권 침해 신고하는 방법에 대해 말씀드리고자 합니다. 막상 해보니 매우 간단하여 초보자도 금방 쉽게 따라 하실 수 있습니다.그럼 바로 알

googlethx.tistory.com

 

애드센스 광고심사센터 불필요한 광고 차단하기

안녕하세요. 오늘은 구글 애드센스 광고 심사 센터에서 불필요한 광고나 '더 이상 게재되지 않고 있음'으로 뜨는 광고들을 차단하는 방법에 대해 말씀드리겠습니다. 여러분도 티스토리나 워드

googlethx.tistory.com

 

 

 

 

 

반응형

댓글