웹사이트를 운영하다 보면 아주 작은 부분까지 신경 쓰게 됩니다. 그중 하나가 바로 '파비콘'인데요. 파비콘은 웹사이트에 접속했을 때 브라우저의 탭이나 주소창에 조그맣게 표시되는 아이콘을 말합니다.
단순히 예쁘게 꾸미는 것을 넘어 생각보다 중요한 역할을 합니다. 여러 탭을 열어놨을 때 내 사이트를 한눈에 알아볼 수 있게 해주고, 네이버나 구글 같은 포털 사이트에서 검색 결과로 노출될 때도 사이트 주소 앞에 이 아이콘이 함께 표시됩니다. 스마트폰으로 즐겨찾기에 추가하거나 다른 사람에게 공유할 때도 마찬가지고요. 작지만 내 사이트의 정체성을 보여주는 '얼굴'인 셈입니다.
그런데 막상 파비콘을 직접 만들려고 하면 막막할 때가 많습니다. 사이즈가 워낙 작아서 기존에 사용하던 로고를 그대로 넣기에는 애매하고, 필요한 파일 형식(.ico)을 만드는 것도 번거롭죠. 포토샵으로 만드는 경우에는 플러그 인을 따로 복사해서 재 실행 작업도 필요해서 번거롭습니다.
그럴 때 아주 유용한 것이 바로 파비콘을 쉽고 빠르게 만들어주는 전문 웹사이트들입니다. 복잡한 과정 없이 이미지 파일 하나만 올려주면 알아서 최적의 사이즈와 형식으로 변환해 주니 정말 편리합니다. 저 역시 지금 제 사이트에 달려있는 파비콘을 이런 서비스를 이용해 뚝딱 만들었습니다.
이미지뿐만 아니라 간단한 글자나 이모티콘으로도 개성 있는 파비콘을 만들 수 있도록 도와주는 곳도 많으니, 내 사이트의 첫인상을 멋지게 만들고 싶다면 한번 이용해 보시는 것을 적극 추천합니다.
파비콘(Favicon) 제작을 위한 유용한 사이트 모음
웹사이트의 개성을 더하고 브라우저 탭, 북마크 등에서 사이트를 쉽게 식별할 수 있도록 도와주는 파비콘(Favicon)을 손쉽게 제작할 수 있는 여러 유용한 웹사이트들이 있습니다. 이미지 파일만 있으면 몇 번의 클릭만으로 다양한 플랫폼에 맞는 파비콘을 생성해주거나, 텍스트나 이모지를 기반으로 간단하게 파비콘을 만들 수도 있습니다.
이미지 파일을 이용한 파비콘 제작 사이트
가지고 있는 로고나 이미지를 파비콘으로 변환하고 싶을 때 유용한 사이트들입니다. 대부분 PNG, JPG, GIF 등 다양한 이미지 형식을 지원하며, 필요한 모든 사이즈의 파비콘 파일을 한 번에 생성해주는 편리한 기능을 제공합니다.
Favicon.io (https://favicon.io/)
이미지, 텍스트, 이모지 등 세 가지 방식으로 파비콘을 만들 수 있는 다재다능한 사이트입니다. 특히 이미지 파일을 업로드하면 ico 파일뿐만 아니라, 안드로이드, 마이크로소프트, 웹용 등 다양한 크기와 형태의 png 파일까지 함께 생성해줍니다. 생성된 파일 목록과 함께 웹사이트에 적용할 수 있는 HTML 코드까지 제공하여 편리합니다.
Favicon & App Icon Generator (https://www.favicon-generator.org/)
오랫동안 많은 개발자들이 이용해온 신뢰도 높은 사이트입니다. 이미지 파일을 업로드하면 웹사이트용 파비콘(ico)과 함께 iOS 및 안드로이드 앱 아이콘까지 다양한 사이즈로 생성해주는 것이 특징입니다. 생성된 파일들을 압축 파일 형태로 다운로드할 수 있습니다.
RealFaviconGenerator (https://realfavicongenerator.net/)
다양한 플랫폼과 브라우저에 최적화된 파비콘을 제작하는 데 특화된 사이트입니다. 제작 과정에서 각 플랫폼(iOS, Android 등)에서 파비콘이 어떻게 보일지 미리 확인할 수 있는 실시간 미리보기 기능이 매우 유용합니다. 또한, 각 플랫폼에 맞는 HTML 코드를 상세하게 제공하여 적용하기 용이합니다.
텍스트나 이모지를 이용한 간편 파비콘 제작
별도의 이미지 파일 없이도 간단하게 텍스트나 이모티콘을 활용하여 파비콘을 만들고 싶을 때 유용한 사이트입니다.
Favicon.io
Text & Emoji Favicon Generator: 앞서 소개한 Favicon.io는 이미지 변환 기능 외에도 텍스트나 이모지를 기반으로 파비콘을 생성하는 기능도 제공합니다. 원하는 글자나 이모지를 선택하고 배경색, 글꼴 등을 커스터마이징하여 손쉽게 파비콘을 제작할 수 있습니다.
이 외에도 다양한 파비콘 제작 사이트들이 있으나, 위에 소개된 사이트들은 사용자 인터페이스가 직관적이고 필요한 기능들을 충실히 제공하여 프로그래머분들이 사용하시기에 충분할 것입니다. 제작된 파비콘은 보통 .ico 확장자를 가지며, 웹사이트의 루트 디렉토리에 업로드하고 <head> 태그 안에 <link> 태그를 이용하여 추가하면 됩니다.
<link rel="shortcut icon" href="http://www.dut.kr/image/icon/favicon.ico" type="image/x-icon" /> <link rel="icon" href="http://www.dut.kr/image/icon/favicon.ico" type="image/x-icon" />
해당 사이트에서 파비콘을 만들었다면 다운로드 하여 웹사이트에 업로드 하고 위에 소스처럼 URL을 입력하고 브라우저를 실행하면 바로 확인이 가능합니다.