IT 팁

파비콘 만들기, 무료 웹사이트에서 제작하는 방법

파비콘 (favicon)이란 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 인터넷 웹브라우저의 주소창 옆에 표시되는 아이콘 입니다. 파비콘은 접속하는 웹사이트나 웹페이지를 대표하는 아이콘이라 할 수 있으며 크롬, 익스플로러, 파이어폭스, 오페라 등의 대부분의 브라우저에서 모두 지원하고 있습니다. 파비콘에 사용되는 크기는 주로 16×16, 32×32, 48×48, 64×64 픽셀이며 8비트, 24비트, 32비트 색상이 적용됩니다. 파비콘은 누구나 간단하게 생성해서 웹사이트나 블로그에 적용할 수 있는데요. 이번 시간에는 쉽고 간편하게 할 수 있는 파비콘 만들기 방법에 대해 알아보겠습니다.



윈도우10 1903 업데이트, 여유 공간 32Gb는 필수

pdf 번역, 퀄리티 좋은 구글 문서 번역기를 사용하세요

구글 이미지 번역 사용법, 사진의 문자를 번역하세요

구글 결제 내역 조회, 스마트폰에서 확인하는 법

컴퓨터 메모리 확인 방법, 업그레이드 시 주의할 점


파비콘 만들기 사이트

파비콘 만들기는 파비콘 제작 기능을 제공하고 있는 웹사이트를 사용해서 만드는 것이 가장 편리합니다. 무료로 이용할 수 있는 사이트의 종류는 매우 다양한데, 그 중 가장 사용법이 편리하고 결과물의 퀄리티가 좋은 곳은 Convertico라는 곳 입니다. 이 곳은 제가 파비콘 (ICO 파일)을 만들 때 자주 애용하는 곳 입니다.

파비콘 만들기 사이트 바로가기




파비콘 만들기

본문 페이지 상단에 첨부한 Convertico 바로가기 링크를 클릭하여 해당 홈페이지에 접속합니다. 인터넷 브라우저를 이용한 작업이므로 반드시 인터넷에 연결된 상태여야 합니다.

 

  • 인터넷 웹사이트에서 파비콘으로 이용하고자 하시는 이미지 파일을 미리 구해놓습니다.
  • 이미지 파일은 가로와 세로 크기가 1:1 비율로 동일한 것이 좋습니다.
  • Favico.com에 접속하시면 아래와 같은 화면을 보실 수 있습니다.
  • Browse 버튼을 클릭하여 pc에 저장된 이미지 파일을 불러오기 합니다.
  •  Select a Size에서 32×32를 선택합니다.
  • 이미지 업로드가 완료되면 화면 하단의 Create 버튼을 클릭하여 파비콘 만들기 작업을 시작합니다.

 

  • 파비콘 제작이 완료될 때 까지 매우 짧은 시간만 소요됩니다.
  • 웹페이지의 우측을 보시면 결과물을 미리 확인할 수 있습니다.
  • 돋보기 모양을 클릭하여 웹사이트나 블로그에 어떤 모양과 형태로 적용이 되는지 사전에 확인해볼 수 있습니다.

 

  • 적용된 형태가 마음에 든다면, 화살표 모양의 다운로드 버튼을 클릭하여 ICO 파일을 다운로드 받아 사용하시면 됩니다.




파비콘 웹사이트에 적용하는 법

파비콘을 자신의 웹사이트에 적용하는 방법은 아주 간단합니다. 특히 본문에 설명드린 사이트를 이용하실 경우에는 특히나 더 간편합니다.

  • 본문에 설명드린 웹사이트에서 favicon을 만듭니다.
  • 생성한 favicon.ico 파일을 웹 사이트의 루트 폴더에 저장합니다.
  • html의 <head>에 다음 코드를 작성합니다.
  • <link rel = “shortcut icon”href = “/ favicon.ico”type = “image / x-icon”/>
  • 자신의 웹사이트에 방문하여 파비콘이 정상적으로 적용되었는지 확인하시면 됩니다.




티스토리 파비콘 적용하기

티스토리 블로그를 사용하는 유저라면, 파비콘을 매우 간단하게 적용할 수 있습니다.

 

  • 티스토리 관리 페이지에 접속하신 후, 화면 좌측 하단의 블로그 메뉴를 선택합니다.

 

  • 블로그 관리 메뉴에서 ‘파비콘, 파일형식 ICO’의 우측에 보이는 불러오기 버튼을 클릭합니다.
  • 사전에 만들어 놓은 ICO 파일을 불러오기 하여 적용 버튼을 클릭하시면 티스토리 블로그에 파비콘 적용이 완료됩니다.



IT talk

Recent Posts

웹사이트 제작 비용, 업체 vs 프리랜서 누가 더 쌀까?

혹시 나만의 웹사이트를 만들어볼까 생각 중이신가요? 요즘은 개인 브랜딩이든, 사업 홍보든 온라인 공간에서의 존재감이 정말…

6일 ago

유료 이미지 사이트 이 5곳만 알면 끝!

온라인에서 멋진 사진이나 일러스트를 찾아 쓰고 싶을 때, 많은 분들이 한 번쯤 무료 이미지 사이트를…

1주 ago

ansys 다운로드, 오류 없이 설치하는 팁!

Ansys 다운로드를 고민하시는 분들은 보통 엔지니어링 시뮬레이션에 관심이 많거나, 학교 과제 혹은 연구 프로젝트를 위해…

2주 ago

파이썬 강의 사이트, 무료 강의만으로 충분할까?

요즘 여러 분야에서 파이썬을 배우려는 분들이 정말 많아졌습니다. 과거에는 프로그래밍 전공자만 주로 사용한다고 생각했지만, 최근에는…

2주 ago

웅진북클럽 다운로드, 3분만에 끝내기!

많은 분이 자녀의 독서 습관을 기르고, 다양한 분야의 책을 손쉽게 접하기 위해 웅진북클럽 다운로드 방법을…

2주 ago

용량 큰 파일 보내기, 1GB 넘어도 가능!

안녕하세요. 요즘엔 사진이나 영상 같은 큰 파일을 주고받는 일이 정말 잦아졌죠. 하지만 메일 서비스나 메신저마다…

2주 ago