Tistory

투명한 파비콘 만들기 : 다이나믹 드라이브 툴


웹툴을 제공해주는 개인 사이트가 있다. 공식적으로 운영되는 사이트보다는 블로그에 가까운 사이트임에도 불구하고 다양한 웹툴을 제공하고 있다. 요즘은 직접 만드는 것보다 이렇게 웹툴을 통해서 만드는 것이 훨씬 완벽에 가깝다.

Web Tools

  • Image Optimizer
  • FavIcon Generator
  • FavIcon Editor
  • Animated Gif
  • Email Riddler
  • .htaccess Password
  • .htaccess Banning
  • Gradient Image
  • Button Maker
  • Image to Base64 String
  • Ribbon Rules
  • List Scrubber Tool
  • DD Whois Service

다이나믹 드라이브 사이트에서 제공하고 있는 링크는 위와 같다. 여러가지 기능들을 제공하고 있기 때문에 한번 메모해둔다면 두고두고 쓸만한 웹툴이라고 생각이 든다.

 

투명한 파비콘 만들기(FavIcon Generator)

투명한 파비콘을 만들기 위해서 다른 사이트보다 위의 사이트를 권장한다. 다른 사이트의 경우에는 내가 준비한 투명한 PNG 파일이 이미지가 픽셀로 깨져버리거나 하기 때문에 위의 사이트에서 제작을 한다면 상당한 수준의 파비콘을 만들 수 있다. 파비콘은 32픽셀로 제작이 되고 이미지가 투명하다면 투명한 이미지로 제작이 된다. 파비콘의 경우에는 기본적으로 웹사이트 즐겨찾기 등에 저장이 될 때 16픽셀 사이즈로 제공이 되기 때문에 선명한 파비콘을 만들기를 원한다면 16픽셀 이상의 이미지를 준비해야 한다.

그보다 높은 이미지의 경우에도 사이즈에 맞게 제작이 되기 때문에 선명함에 있어서 큰 차이는 없다. 심지어 네이버블로그나 유튜브, 다음, 네이버 등의 파비콘도 그렇게 화질이 좋지 않다는 가정을 한다면 박스형태의 1:1비율 이미지를 준비해서 업로드를 하면 파비콘으로 만들 수 있다.

투명한 이미지를 준비하면 투명한 파비콘을 만들 수 있고, JPG 이미지의 경우에는 불투명한 이미지로 표시된다. 웹브라우저 종류에 따라서 불투명한 이미지를 사용하게 되면 하얀색 배경 라인이 남을 수 있기 때문에 조금이라도 디자인에 신경을 쓰는 사람이라면 투명한 이미지로 만들어본다.

http://tools.dynamicdrive.com/favicon/

위의 사이트에서 이미지를 삽입하고 Create ICON 버튼을 누르면 쉽게 파비콘을 생성할 수 있다. 그리고 미리보기도 가능하기 때문에 어떻게 적용되는지도 알 수 있다. 그 다음에 다운로드를 받아서 링크로 파비콘을 등록하거나 직접 루트 서버에 파비콘 이미지를 넣고 적용하면 끝이난다.

파비콘을 이미지로 넣는다면 위에서 제공되는 링크처럼 <head> 부분에 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 와 같이 코드를 한 줄 적어놓으면 된다. 주의할 점은 IE와 같은 브라우저에서는 때때로 보이지 않을 수 있는데, 이것은 브라우저의 버그 이슈이기 때문에 무시해도 좋다.