티스토리 블로그 아이콘, 파비콘 만들기

블로그에서 사용할 아이콘과 파비콘을 무료로 쉽게 만들고 이를 티스토리에 적용해 보았다. Real Favicon Generator에서 아이콘과 파비콘을 손쉽게 만들고 티스토리 블로그 관리에서 맨 아래 '설정> 블로그'를 눌러 아이콘, 파비콘을 입력해 보았다.

 

아이콘 만들기

 

Free Logo Maker를 활용하여 아이콘 만들기 

무료로 손쉽게 아이콘을 만들 수 있는 Free Logo Maker 사이트를 소개한다.

Free Logo Maker - Create a Logo in Seconds - Shopify

(위의 그림을 누르면 Free Logo Maker로 바로 접속된다.)

 

손쉽게 아이콘 만들기 Free Logo Maker 1, 2

 

1. Free Logo Maker 홈페이지에 접속하여  회원 가입한 후 로그인한다.

홈페이지 첫 화면 오른쪽 위에 회원 가입 버튼을 누르면 이메일 주소와 비밀번호를 입력하는 창이 나오는데 두 가지만 입력하면 바로 회원가입이 완료된다.

회원 가입 시 입력된 이메일 주소로 로고의 최종 작업 결과물을 보내준다. 따라서 이메일 주소를 정확하게 입력해야 한다.

 

2.  로그인 후 Free Logo Maker 홈페이지 첫 화면의 '시작하기' 버튼을 누른다. 

 

손쉽게 아이콘 만들기 Free Logo Maker 3, 4, 5

 

3. 비즈니스 공간을 선택한다.

패션, 건강과 아름다움, 집과 정원, 음식과 음료, 스포츠 및 레크리에이션, 선물 및 수집품, 기술, 예술과 사진, 서비스, 계략, 어린이들, 애완동물, 해당 사항 없음 총 13개 중 1가지를 선택하고 맨 아래 다음 버튼을 누른다.

 

4. 시각적 스타일을 선택한다.

시각적 스타일은 최대 3개 선택할 수 있다. 용감한, 침착한, 믿을 수 있는, 권위적인, 보수적인, 창의적인, 우아한, 열정적인, 친숙한, 미래, 산업, 혁신, 현대의, 자연스러운, 강한, 포도 수확, 젊은, 해당 사항 없음 총 18가지 중에 원하는 것 최대 3가지를 선택한 후 맨 아래 다음 버튼을 누른다.

 

5. 비즈니스 이름과 슬로건을 입력한다.

이는 선택사항이며 모두 입력하지 않아도 된다. 필자의 경우 블로그 이름인 '경자꿈'과 '경제적 자유를 꿈꾸다'라는 슬로건을 입력하였다. 

 

손쉽게 아이콘 만들기 Free Logo Maker 6, 7, 8

 

6. 로고를 어디에서 사용할 것인지 위치를 선택한다.

해당되는 항목을 모두 선택할 수 있으며 필자의 경우 티블로그에서 사용할 것이므로 두 번째 줄에 있는 소셜 미디어를 눌렀다. 

 

7. 만들어진 로고 예시를 보며 마음에 드는 로고를 선택한다.

여러 가지 스타일로 만들어진 로고를 살펴본다. 페이지를 아래로 스크롤하면 더 다양한 로고를 볼 수 있다. 마음에 들지 않다면 왼쪽 위에 있는 Back(뒤로) 버튼을 눌러 3번과 4번의 내용을 수정해 본다. 

마음에 드는 로고가 있다는 선택하고 로고 편집으로 넘어간다.

 

8. 선택한 로고에 따라 글자 모양, 색상, 아이콘, 배경을 편집할 수 있다. 

글자 모양과 색상은 모두 변경 가능하며 선택한 로고에 따라 아이콘과 레이아웃을 변경할 수 있다. 편집이 완료되면 하단의 Next(다음) 버튼을 누른다.

 

9. 완성한 로고를 활용할 수 있도록 다운로드 버튼을 누른다.

다운로드 버튼을 누르면 회원 가입한 이메일 주소로 로고가 전송된다. 이메일을 확인하여 첨부파일에 온 아이콘을 다운로드하여 사용하면 된다.

 

아이콘 제작 시 유의점

아이콘을 제작할 때는 이미지의 크기가 작으므로 간단하면서도 특색이 드러나도록 이미지와 색상을 설정하는 것이 중요하다. 

너무 많은 요소를 담을 경우 의도하는 바를 알기 어렵다. 따라서 내 블로그를 인식할 수 있는 간단한 도형, 문자, 숫자 등을 활용하거나 특정 색상을 강조하는 것이 좋다.

 

 

파비콘 만들기

파비콘이란? 

파비콘은 웹사이트를 대표하는 아이콘으로 인터넷에 접속했을 때 주소창 위의 탭 제목 왼쪽에 보이는 아이콘을 의미한다.

티스토리 블로그의 경우 별도의 파비콘을 설정하지 않으면 T로고가 보이도록 설정되어 있다. 

 

파비콘의 형식은?

파비콘은 주로 16X16 픽셀의 ICO 형식이다.

픽셀의 경우 16X16 외에도 32X32, 64x64 픽셀의 정사각형 사이즈를 사용하기도 한다. 티스토리 파비콘의 경우 크기가 100KB 이하만 업로드가 된다. 따라서 필자는 16x16 픽셀의 ico 파일로 변환하여 업로드하였다.

 

파비콘 만들기 _ Real Favicon Generator 추천 이유

파비콘은 기존의 아이콘을 ICO 파일로 변환하여 만들 수 있다. 필자는 티스토리 파비콘 변환 사이트로 Real Favicon Generator를 추천한다. 

 

다양한 무료 파일 변환 사이트가 많으나 세 가지 이유에서 Real Favicon Generator(리얼 파비콘 제너레이터)를 선택했다.

첫 번째, 무료로 사용이 가능하며 번거로운 회원가입의 절차가 없을 것

두 번째, 이미지를 업로드한 후 변환하는 과정이 쉽고 편리하며 바로 다운로드할 수 있을 것

 세 번째, 티스토리 파비콘에 업로드할 수 있는 용량으로 변환될 것

 

convertio.co/kr의 경우 깔끔하게 변환이 잘 되었지만 크기가 커서 티스토리 파비콘에 업로드할 수 없었다. 

favicon-generator.org의 경우 변환은 잘 되었지만 크기가 너무 작아서 선명도와 사이즈의 만족도가 떨어졌다. 

 

파비콘 만들기 _ Real Favicon Generator 사용 방법

 

Favicon Generator for perfect icons on all browsers

컴퓨터 바탕화면에 변환할 이미지 파일을 꺼내 놓고, realfavicongenerator.net에 접속한다.

(위의 그림을 누르면 리얼 파비콘 제너레이터로 바로 접속된다.)

 

티스토리 파비콘 만들기 1, 2

1. Real Favicon Generator 첫 화면에서  '파비콘 이미지 선택' 아이콘을 누르고 파비콘으로 변환할 이미지 파일을 선택한다.

마스터 사진의 최솟값은 70x70이지만 최소 260x260 픽셀의 사진을 사용하길 권장한다.

 

2. 파일이 업로드되면 원본 이미지를 그대로 사용할 수도 있고 여백과 일반 배경을 추가할 수도 있다.

원본 이미지 그대로 사용을 원할 경우 첫 번째 원을 클릭하고,

컴퓨터 브라우저와 구글에서 보이는 파비콘의 배경 색상과 반경 그리고 사진 크기를 변경하려면 두 번째 원을 클릭한다.

배경색을 클릭하면 다양한 색상을 선택할 수 있고 배경 반경과 사진 크기를 좌우로 변경하면서 설정하였을 때 파비콘 모습을 바로 위의 이미지에서 확인할 수 있다.

 

티스토리 파비콘 만들기 3, 4

 

3. 설정을 완료한 후 페이지 맨 아래로 스크롤하면 파비콘 생성기 옵션이 있다. Path(길)의 첫 번째 '내 웹사이트의 루트에 파비콘 파일을 배치합니다.'를 선택하고 맨 아래 파비콘과 HTML 코드 생성 버튼을 누른다.

 

4. 파비콘 설치 페이지에서 첫 번째 패키지 다운로드를 누르면 파비콘을 다운로드할 수 있다.

웹사이트 코드가 필요할 경우 두 번째와 세 번째 설명을 참고하면 된다.

 

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

 

티스토리 관리자 모드로 접속하여 왼쪽 메뉴 맨 아래 ' 관리 > 블로그 '를 클릭한다.

아이콘과 파비콘 오른쪽에 '불러오기' 버튼을 눌러 작업했던 JPG 파일과 ICO 파일을 각각 선택하고 변경사항 저장 버튼을 누른다. 새로 고침(F5 키 누르기 또는 주소 창 왼쪽의 동그란 화살표 모양 클릭)해보면, 탭 제목 왼쪽에 파비콘이 바뀐 것을 알 수 있다.