티스토리 로고, 아이콘, 파비콘을 맥(Mac) 미리보기로 쉽게 만들기

안녕하세요. beingfree79입니다.
오늘은 맥의 미리 보기 도구만을 사용하여 블로그에 사용할 로고, 파비콘(. ico) 파일을 만들어보겠습니다.
파비콘이 익숙하지 않아서 어려운 것 같지만 단지 '미리 보기'에서 '확장자'만 '마이크로소프트 아이콘'으로 저장하면 끝입니다.
대상 블로그는 tistory 기준으로 설명드리겠습니다.

블로그 로고 준비

무료 사이트를 이용한 블로그 로고 준비

  • Hatchful: 쇼피파이에서 운영하는 사이트로 다양한 로고의 템플릿을 추천해 주고 로고를 이메일로 다운로드할 수 있습니다.
  • 미리캔버스: 무료 디자인 툴로 블로그 로고는 물론 배너나 카드뉴스 등 간단한 디자인적 요소가 들어간 썸네일을 쉽고 빠르게 만들 수 있습니다. 단 추천된 글자나 내용을 편집할 수는 없습니다.
  • FreeLogoDesign: Hatchful과 유사하게 제목을 지어주면 다양한 로고를 추천해 주며, search 란에 키워드를 입력해 주면 해당 키워드에 맞게 로고 그림을 바꿔서 추천해 줍니다. 미리캔버스처럼 로고 안의 글자를 간단히 편집하거나 제거할 수 있습니다. 개인적으로는 간단한 로고를 만들 때 위의 두 사이트의 특징을 적당히 조합한 사이트 같다고 느꼈습니다. 최종적으로 만들어진 결과는 이메일로 받을 수 있습니다.

FreeLogoDesign 구경하기

로고 만들기

우선 FreeLogoDesign을 기준으로 간단히 설명드리겠습니다.

  • 우선 사이트에 접속하면 별도의 회원가입 없이 로고에 작성할 블로그 사이트 이름을 영어로 작성해 주시면 됩니다. 추천해 주는 로고들과 하단에 이름이 들어가는데 원하는 데로 편집해 주시면 됩니다.

블로그 이름 입력
블로그 이름 입력

  • 몇 가지 디자인들이 나오는데요. 좌측 상단의 '검색'을 눌러서 '아이콘'들을 바꿔 볼 수 있습니다.

추천 로고
추천 로고

  • 저는 로고를 book으로 바꾸기 위해 'book'을 입력해 보겠습니다. 책과 관련된 이미지를 확인할 수 있습니다. 이렇게 변경해 보세요.

로고 변경 결과
로고 변경 결과

  • 원하는 로고에 마우스를 놓고 'customize'를 누르면 편집화면에 들어갑니다.

편집화면
편집화면

  • 저는 아이콘, 파비콘을 만들기 위해 글자를 다 지웠습니다. 좌측 메뉴의 Text, Icons, Shapes, Templates 등을 이용해서 배경, 모양, 글자, 아이콘등을 변경하시고 원하는 디자인을 마치셨으면 다운로드를 누르세요.

최종 편집 결과
최종 편집 결과

  • START Free를 선택하시고 이메일을 입력하셔서 받으시면 됩니다. 이메일로 다운로드하지 않아도 브라우저에서 자동으로 다운로드됩니다.

다운로드
다운로드
다운로드 완료
브라우저의 다운로드 완료 후 Finder에서 보기

아이콘 만들기

다음은 아이콘을 만드는 순서입니다. 로고에 글자가 있지 않기 때문에 아이콘은 크기만 조절해 주겠습니다. FreeLogoDesign에서 샘플로 만든 로고를 열어주겠습니다.

  • 미리 보기로 로고 열기 (우측 상단의 마크업 도구를 토글로 열어주세요.)

  • 도구 - 크기조절 선택하기를 선택하여 티스토리의 권장 아이콘 크기인 64x64로 해보겠습니다. 물론 원하는 사이즈에 맞도록 변경해 주셔도 됩니다.

이미지 크기 변경 (64 x 64)
이미지 크기 변경 (64 x 64)

  • 크기가 변경된 아이콘을 저장해 줍니다.

파비콘(favicon,. ico) 만들기

파비콘은 위의 아이콘 만들기에서 만드신 이미지를 '마이크로소프트 아이콘'으로 확장자만 변경해서 저장하면 됩니다. 이때 다른 이름으로 저장하는 것이 안 보일 수 있는데요. 맥의 option 버튼을 누른 상태로 저장 및 확장자 선택을 진행하셔야 합니다. 차근차근 알아보겠습니다.

  • 미리 보기로 로고열기는 아이콘 만들기와 동일하게 진행해 줍니다.
  • 이미지 크기 변경하기로 이번에는 32x32로 변경해 보겠습니다. 크기가 많이 작아졌네요.

  • 저장하기 이때 option 키를 누른 채로 상단의 파일 메뉴의 '별도 저장'을 선택합니다. 또한 '포맷' 메뉴도 option 키를 누른 상태로 선택하여 'Microsoft 아이콘'으로 지정해 주면 파비콘이 완성됩니다.

Microsoft 아이콘(.icon) 포맷 설정
Microsoft 아이콘(.icon) 포맷 설정

이상으로 무료로 로고 만들기, 아이콘 만들기, 파비콘 만들기를 해보았습니다. 별도의 사이트에 접속해서 만드는 절차 없이 간단히 블로그에 사용할 준비를 완료했습니다.
감사합니다.