[HTML 강좌] 파비콘 만들고 적용하기

 

 

파비콘(Favicon)

홈페이지에 방문하면 페이지 제목 옆에 작은 이미지가 있는 경우가 있습니다.

이를 파비콘(Favicon)이라고 합니다. (Favicon은 'favorites icon'의 약자입니다.)

 

홈페이지에 파비콘(Favicon)을 적용하려면 두가지 작업을 해야 합니다.
•파비콘 이미지 만들기
•HTML 문서에 코드 넣기

파비콘(Favicon) 만들기

파비콘은 16x16 크기의 이미지 파일로 확장자는 ico입니다. 포토샵이나 Gimp 같은 이미지 편집 소프트웨어로 만들 수도 있고, favicon.cc 같은 온라인 툴을 이용할 수도 있습니다.

 

 

파비콘은 그리 정교한 이미지가 아니므로, 온라인 툴을 사용하는 게 편합니다. 또한 공유되는 파비콘도 많아 원하는 모양을 찾아서 다운로드 받을 수도 있습니다.

HTML 문서에 코드 넣기

파비콘을 적용시키려면 서버에 아이콘 파일을 업로드하고, HTML 문서의 <head>와 </head> 사이에 다음과 같은 코드를 넣습니다.
<link rel="shortcut icon" href="/path/favicon.ico">

경로는 파일 위치에 맞게 수정해야 합니다.

블로그에 파비콘 달기

대부분의 블로그 서비스는 파비콘 기능을 포함하고 있습니다. 관리 메뉴를 잘 찾아보면 찾을 수 있습니다.

예를 들어 티스토리 블로그라면 [기본 정보]의 아이콘에서 설정할 수 있습니다.

               

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

오늘은 포토샵에서 png파일을 쉽고 간단하게 만드는 방법을 소개합니다.


 포토샵 실행시키고 파일 > New 열고> 사이즈는 저는 연습용으로 200*80으로설정하고

중요한 것은 밑에 보시면 Background  Contents 여기에 Transparent (투명)이로 선택해합니다.

이것이 안되면 png파일 안될 수 있어요

 

 

 

그리고 나서 글자을 입력합니다 IT World Korea  즉 원하시는 글자, png 파일로 만드실 글자를 입력하시면 됩니다.

 

 

 

이렇게 쓰고 저장을 하시면 되지요

꼭 주의해야 할 것은 아래 1번과 2번입니다.

 

 

 

이렇게 png 파일로 저장이 되었다면

블러그에 사진 이미지를 올릴 때  불러와서 사용하면 됩니다.

아래에 보시면   나타나는 군요

 

 

워터마크는 브러그 모든 사진 이미지에 동시에 적용할 수도 있어 아주 유용합니다.

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

워터마크는  저작권 보호를 위해 동영상,
그림 등에 삽입한 저작권자의 로고나 상표같은 마크입니다
저도 이미지를 올릴 때 워터마크를 넣고 있습니다.
저는 이니셜과 사이트 주소를 넣어서 만들었는데 복사 방지를 위한 용도뿐만 아니라
자신의 사이트를 광고하는 효과도 얻을 수 있습니다.
유료 프로그램인 포토샵 없이 무료로 사용할 수 있는 포토스케이프와
포토샵과 유사한 기능을 제공하는 포토 에디터 사이트를 이용해서 자신만의 워터마크를 만들어 보세요.

 


워터마크 문자 만들어보기
 

 

 포토 에디터는 로그인 없이 웹브라우저에서 바로 사용이 가능해 이미지 편집 툴이죠!
고가의 포토샵 없이도 왠만한 작업은 가능합니다.
먼저 포토 에디터를 이용해서 워터마크 이미지를 만들어 보겠습니다.
사이트 주소는 다음과 같습니다.

http://apps.pixlr.com/editor/

 


 

 

 

워터마크에 들어갈 텍스트를 입력하려면 새 이미지가 있어야 겠죠. [파일] > [새 이미지] 를 클릭해서 대화상자를 띄우고

넓이와 높이를 입력한 후 [투명] 을 체크합니다.

 

저는 사이즈와 크기를 180*150 로 했습니다.

 

 이렇게 투명 이미지를 만들었으면 도구상자에서 [A] 아이콘을 클릭합니다.
그리고 이미지에 텍스트 박스를 만들어 글자를 입력하고 서식을 적용합니다.
간단하죠. 이제 저장만 하시면 됩니다.

 

 

 

그래야 배경이 투명한 이미지가 저장됩니다.
[파일]탭 > [저장]을 누르시면 이미지 저장 대화상자가 나타나는데
[형식]을 꼭 PNG(투명,완전한 품질) 로 선택해야 합니다.
그래야 배경이 투명한 이미지가 저장됩니다.

 

 

우처럼 투명으로 하여 저장하고  그리고 사진 위에 적용하면 되겠습니다.

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,