본문 바로가기
  • 길봉테크┃GB-Technology
생활정보

파비콘 및 로고 제작하기 / 홈페이지 디테일 살리기 / 파비콘최적해상도

by 길봉이 2021. 6. 17.

우선 파비콘을 만드는 방법 정말 쉽습니다.


홈페이지나, 블로그 등에 본인을 상징하는 로고를 포토샵 일러스트레이트 심지어 그림판을 이용하여 초안을 잡고 제작하게 되는데요 요즘은 미리캔버스라는 사이트에서 쉽게 저작권 침해 없이 제작할 수 있기에 엄청난 고퀄리티가 아니라면 미리캔버스를 많이 이용하고 있는 추세입니다.

 

미리캔버스에서 로고나 홈페이지 유튜브 간판 등을 제작하는 방법은 미리캔버스 사이트에 잘 정리되어 있기 때문에 읽어보시며 하나하나 따라가서 만들어보시면 파워포인트처럼 쉽게 작업할 수 있다는 것을 알 수 있습니다.

(미리캔버스 사용법은 너무나 기초적인 것이라 핵심만 아래에서 설명드리겠습니다.)

 

그리하여 아래와 같이 자신만에 로고가 완성이 되고 이것을 그대로 사용할 것인지 조금 더 간소화시켜 파비콘을 생성할지는 사용자의 취향에 따라 다르겠지만 파비콘의 경우 디스플레이에 표시되는 영역이 상대적으로 매우 작기 때문에 간소화하여 상징성을 부각시켜 제작하시는 것을 추천드립니다.


 

 

저는 이렇게 제 홈페이지를 상징하는 로고제작을 완료하고 파비콘으로는 로고에서 글씨를 제거하여 파비콘을 생성하였습니다.


여기서 가장 중요한 것은 파비콘 생성시 사용해야 할 최적의 해상도 설정입니다.


16X16이 가장 최적이라고 하시는 분들은 죄송하지만 제가 볼 때 다른 사이즈로 파비콘을 생성해서 홈페이지에 적용해보지 않았을 것이다라는 생각을 갖게 합니다.

 

아래와 같이 각자의 홈페이지에 파비콘을 적용하면 아래와 같이 사이트 탭에도 나타나고 즐겨찾기, 북마크, 관심 사이트, 자주 방문한 사이트 등의 항목에도 상징적 로고가 표현되기 때문에 홈페이지의 퀄리티를 조금이나마 높일 수 있다는 것이 장점입니다.

그래서 결론은 무엇이냐?

 

 결론은 이미지가 복잡하고 형태와 컬러가 많다면 64X64

비교적 단순한 이미지는 128X128까지 가능하나 


그냥 국룰 64X64로 제작하자!


64X64와 128X128 두 가지를 비교해도 64X64가 뒤떨어지지 않습니다. 128X128로 제작하다가 용량 때문에 다시 컨버팅→다운로드→파비콘 재 등록해야 하는 번거로움을 거치지 않게 하기 위해서 말씀드리는 것입니다.

 

파비콘 생성의 순서를 미리캔버스를 활용하여 제작하는 방법의 핵심을 설명과 함께 간단하게 제작해보겠습니다.

 

아래 미리캔버스에서 로고사이즈 직접입력에서 64X64로 사이즈를 설정 후 취향에 맞게 제작을 완료하신 후

 

미리캔버스 오른쪽 상단 다운로드에서 웹용→JPG→고해상도다운로드로 이미지를 다운로드합니다. 

 

그러면 64X64 해상도의 JPG파일이 저장 위치에 생성됩니다.

 

이 파일을 파비콘파일로 전환해주는 사이트에서 컨버팅을 해주면 완성이 되는데요 제가 여러 사이트를 사용해본 결과 아래 사이트가 사용하기 가장 편리했습니다.

 

https://favicon.io/favicon-converter/

 

Favicon.io - The Ultimate Favicon Generator (Free)

With Favicon.io you can quickly generate a favicon for your website for free!

favicon.io

 

 

사이트에 방문하신 후 아무런 설치를 하지 않으셔도 됩니다. 화면에 보이는 바와 같이 위에 제작된

파비콘 JPG파일을 끌어다 드롭시키거나 홈페이지에 표현된 그대로 클릭 후 업로드하셔도 됩니다.

드래그 앤 드롭이 편하죠^^

 

 

 

그렇게 파일을 드롭시키거나 업로드하면 다운로드 옆에 아래와 같이 파일 이미지가 나타납니다. 파일 이미지가 홈페이지에 나타났다면 마지막으로 다운로드 버튼을 눌러 파비콘 파일로 컨버팅 된 데이터를 다운로드하면 압축된 형태로 파일 다운로드가 실행됩니다.

 

 

 

 

마지막으로 다운로드할 위치를 지정하고 다운로드한 파일 압축을 풀면 아래와 같이 파비콘 ICO파일이 생성된 것을 보실 수 있는데요. 해당 파비콘 파일을 이용하여 각자의 홈페이지나 블로그 등에 활용하시면 더욱 보기 좋은 홈페이지가 될 것 같네요^^

 

 

 

이상 천타였습니다.

반응형

댓글