본문 바로가기

web design/web design

[html/css]웹페이지에서 파비콘 가져오기 / 파비콘 연결하기 / 파비콘 만들기 및 아이콘 파일로 변경하기

반응형
파비콘 Favicon

: 즐겨찾기할 때 추가되는 아이콘 모양

 

예시) 티스토리 파비콘

 

 

 

일반적으로 디자이너가 포토샵으로 직접 만들때는 16px X 16px 으로 작성하여 파일명.png 로 저장하여 아이콘(.ico) 파일로 변경합니다.

 

png 파일을 ico 파일로 변환하기

 

아이콘 파일로 변경해 주는 사이트

http://favicon-generator.org

Favicon & App Icon Generator

Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.

www.favicon-generator.org

http://www.degraeve.com/favicon

Favicon Generator

<!-- Popular Business Card Generator Color Palette Generator Favicon Generator Flickr RSS Feed Generator IMG2TXT new contact about --> --> Favicon Generator Here is an example of a favicon:

www.degraeve.com

 

 

웹페이지에서 파비콘 이미지 가져오기

 

클론 코딩이나 웹사이트를 디자인할 때 대부분의 이미지들은 해당 사이트에서 가져올 수 있습니다.

현재는 거의 모든 사이트가 소스를 오픈해놓기 때문에 저작권 문제를 뒤로하고, 연습용 소스를 가져오거나 어떻게 코딩이 되어 있는지 쉽게 알 수 있습니다.

 

밑의 이미지는 티스토리에서 사용된 ico 이미지들입니다.

F12 를 누른 후 - Sources 탭에서 html, css, img, ico, js 등등 확인할 수 있습니다.

 

 

 

파비콘을 가져오려면 url을 복사하여 가져온 후 경로를 설정하는 방법, 또는 save로 이미지 파일을 png로 저장한 후 ico파일로 변환 한 후 폴더 추가 및 링크 연결을 하는 방법이 있습니다.

 

link로 파비콘 연결하기

 

png파일을 ico파일로 변환한 후 이미지 폴더 등에 넣은 후 html <head> 부분에 link로 경로를 연결해주면 적용됩니다.

 

<link rel="shortcut icon" href="경로명/아이콘명.ico">

 

반응형