파비콘 만들기 방법에 대해서 알아보시나요? 파비콘은 웹사이트를 대표하는 아이콘으로 볼수가 있습니다.
인터넷 탭의 왼쪽에 뜨는 웹사이트를 나타내는 아이콘으로 favicon은 favorites + icon의 합성어로 웹사이트의 이미지나 느낌을 보여줄 수가 있습니다.
파비콘을 통해서 방문자들이 해당 사이트를 기억하기 쉽게 해줍니다. 파비콘은 16 x 16가 기본 사이즈로 ico파일을 생성해서 만들어주시면 되는데요. 사이트를 통해서 만드는 방법을 알려드리도록 하겠습니다.
파비콘 만들기 사이트
이미지를 업로드를 해서 파비콘을 만드는 사이트를 이용할 수가 있고요. 직접 디자인을 해서 파비콘을 생성하는 사이트를 이용가능합니다.
ICO Convert
먼저 ICOConvert라는 사이트를 통해서 파비콘을 만들어보겠습니다. 이미지를 업로드를 해서 간단하게 만들어줄 수가 있는데요. 사이트에 접속을 해주신 이후에 Upload an image에서 파일 선택을 클릭하고 이미지를 불러옵니다. PNG나 JPG, BMP 이미지 확장자가 가능합니다. 다음으로는 그 아래에 있는 Upload를 클릭합니다.
▼ 이미지가 업로드가 되면 성공되었다고 나오고요. Step 2에서는 파비콘으로 사용할 부분을 드래그를 해서 지정해볼 수가 있습니다. 전체 이미지를 파비콘으로 사용할 것이면 그냥 넘어가도 됩니다.
▼ Step3에서는 파비콘의 모양을 선택해볼 수가 있습니다. 기본적인 네모난 파비콘이 아닌 그림자나 하트모양, 동그라미 모양 등을 선택해서 생성해볼 수가 있습니다. 원하는 것을 선택을 해줍니다.
▼ 선택할 아이콘 포맷을 지정해주시면 되는데요. 4번째의 Custom sizes를 체크하고 파비콘은 16 x 16이나 32 x 32이라서 해당 부분에 체크를 해주시면 되고요. Convert ICO를 클릭해줍니다.
▼ 클릭을 해주셨으면 Download your icon(s)를 클릭해서 생성된 파비콘 파일을 받아볼 수가 있습니다. 여러개로 했으면 압축파일로 받아지고요. 하나만 생성됬으면 파일로 받아집니다.
▼ 아래에 보면 생성된 16 x 16의 파비콘이 생성이 되었습니다. 크기가 작습니다.
Canva로 파비콘 만들기
직접 이미지를 업로드를 해서 하는 방식이 아닌 직접 파비콘을 제작하는 방법을 알아보겠습니다.
포토샵이 없이도 무료로 온라인을 통해서 제작을 하는 방법을 인데요. 바로 Canva 사이트를 이용해주시면 됩니다.
간단한 회원가입 후에 무료로 디자인 등을 해볼 수가 있습니다. 사이트에 접속후에 로그인을 해주시고요. 메인화면의 우측에 보이는 사용자 지정 치수를 클릭해줍니다.
▼ 사용자 지정 치수는 작게 만들기 위해서는 50 x 50 px로 선택을 해주시고요. 새 디자인 만들기를 눌러줍니다.
▼ 디자인 생성 화면이 나옵니다.
▼ 먼저 파비콘에 사용할 배경을 선택해줍니다. 왼쪽의 배경을 클릭하면 원하는 종류의 배경을 골라볼 수가 있고요. 단색으로도 선택이 가능합니다.
▼ 색상을 선택했으면 텍스트를 만들어주면 되는데요. 원하는 폰트 종류도 골라볼 수가 있습니다. 폰트 종류와 크기, 크기 생상을 잘 선택을 해서 만들어주시고요.
▼ 마우스로 텍스트를 클릭 후 드래그 해서 가운데에 맞춰주시면 됩니다. 구분선이 자동으로 나와서 쉽게 맞춰줄 수가 있습니다.
▼ 완료를 했으면 우측 상단의 아래 화살표 버튼을 클릭해서 PNG 형식으로 다운로드를 해주시면 됩니다.
▼ PNG파일 생성후에는 파비콘 확장자로 변경을 해줘야 되는데요. PNG를 ICO로 쉽게 변경해주는 사이트를 이용해보시면 됩니다.
첫번째에 소개드린 사이트를 이용하거나 아래의 ICO 변환 사이트에 접속해서 파일을 첨부해주시고요. 16 x 16, 32 x 32 크기로 저장을 해볼 수가 있습니다.
favicon.cc 직접 파비콘 만들기
세번째로는 도트를 통해서 직접 파비콘을 제작하는 사이트 입니다. 왼쪽 메뉴에서 Import Image를 통해서도 이미지를 업로드를 해서 파비콘으로 만들어줄 수도 있고요. 가운데에 있는 화면에 마우스로 도트를 찍어서 만들어 볼 수가 있습니다.
▼ 도트를 색상에 맞게 잘찍어서 제작을 하시면 되는데요. 디자인에 자신있으신 분들이라면 이렇게 만들어줘도 괜찮을것 같네요.
▼ 아래에 있는 Preview에 보면 미리보기로 도트에 찍은 모양 그대로 파비콘이 보여지는 것을 확인할 수가 있습니다. 완성을 했으면 Download Favicon을 클릭해서 받아서 사용을 해주시면 됩니다.
