아이콘 만들기 사이트 이용으로 파비콘(favicon) 만들기 그리고 적용하기

블로그활용법 /블로그활용법

by 친절한박팀장 2019. 1. 16. 18:37

오늘은 오랜만에 그동안 잊고 지냈던 저의 티스토리 블로그의 파비콘(favicon) 만들기를 해볼 거예요. 가지고 계신 파비콘으로 등록하고 싶은 이미지를 아이콘 만들기 사이트를 이용해 ico 파일로 변환해서 어떻게 적용하는지까지 함께 알아 보는 시간을 가질까 합니다.

먼저 파비콘(favicon)이 무엇을 뜻하는지부터 알고 시작을 해야겠죠. 웹 브라우저 창을 열면 각 사이트들의 타이틀이죠. 이름 앞에 조그마한 아이콘 같은 것이 있는 것을 알 수 있습니다. 이렇게 각 사이트 이름 앞에 표시되어 사용자로 하여금 타 사이트들보다 쉽게 식별 할 수 있도록 해 주는 것이 파비콘입니다.

이 아이콘들은 즐겨찾기 또는 북 마크의 추가 시에도 각 사이트 이름 앞에 붙는 것이 바로 파비콘(favicon) 이라고 합니다. 흔히 웹사이트를 대표하는 이미지를 많이 사용하는데요.

저도 횟수로 올해 이제 2년 동안 블로그를 운영해 왔는데 저의 블로그의 파비콘이 아직 티스토리에서 제공하는 기본 티스토리 로고 파비콘 이어서 이번에 수정하면서 포스팅해 봅니다.

▼ 아래 보는 박스 친 것이 바로 파비콘 입니다. 저의 블로그는 "T"자의 기본 파비콘이네요. 변경해 봅시다. 블로그에 파비콘의 변경은 간단하지만 파비콘에 등록할 수 있는 이미지의 확장자자 "*.ico" 파일이어야지 등록이 가능합니다. 그리고 티스토리 경우 업로드할 수 있는 이미지의 용량이 100KB 이하 여야지만 등록이 가능합니다.

▼ 먼저 파비콘 등록을 위해서는 GIF 형식 또는 PNG 형식, JPEG 형식의 이미지 파일을 위에 말한 microsoft 아이콘 형식의 "ICO 파일"로 변환을 해야 합니다. 그래서 검색을 하다 발견한 사이트인데요. 일반 이미지 파일을 파비콘 아이콘 파일 형식인 "ico 파일"로 아주 간단하게 만들어주는 사이트입니다. -->> https://www.favicon-generator.org/

방법은 간단합니다. 사이트 접속 후 딱 보면 감 오죠. 파일 선택이 있는 "Generate your favicon.ico" 부분이 일반 이미지를 파비콘 아이콘으로 만들어 주는 부분입니다.

파일 선택 아래의 체크 박스는 첫 번째가 웹용과 Android와, Microsoft 및 iOS (iPhone 및 iPad) 앱용 아이콘 생성을 할 것인지 묻는 부분 같아요. 두 번째가 제가 사용할 "16x16" 사이즈의 "favicon" 아이콘만 만들기입니다.

그리고 세 번째는 이미지의 크기 유지 같고 네 번째는 공개 갤러리 같은 것이 있나 본데요 거기에 포함할래? 하는 부분 같아요. 블로그 파비콘 아이콘만 만들 분들은 두 번째만 체크하시고 진행하시면 됩니다.

▼ 먼저 준비된 이미지 파일이 있다는 전제하에 "파일 선택"을 눌러서 아래와 같이 준비된 이미지를 추가해 줍니다. 추가된 후 4번의 "Create Favicon"를 눌러 아이콘 만들기를 진행합니다.

▼ 추가한 이미지 파일을 ico 형식 파비콘 파일로 변환하는 시간은 아주 빨리 끝이 납니다. 그러면 아래와 같이 "Download the generated favicon"을 눌러 다운로드하시면 됩니다.

▼ 저는 첫 번째에 체크하고 진행했기 때문에 웹용과 Android와, Microsoft 및 iOS (iPhone 및 iPad) 앱용 아이콘 모두 생성이 되었네요. 이제 아래 박스 친 파일명이 favicon이라고 되어 있는 파일들을 이용해 블로그의 파비콘 아이콘은 변경해 보도록 합시다.

▼ 파비콘(favicon)으로 등록시킬 파일의 용량은 100KB를 넘으면 안 됩니다. 그럼 파비콘 생성기를 통해 변환한 ico 파일의 용량은 어느 정도 줄었을까요? 아래 이미지로 확인하시면 변환 전 144KB였고 변환 후 1.12KB로 팍 줄어서 등록이 가능한 크기가 된 것을 알 수 있습니다.