본문 바로가기

IT/CSS HTML

파비콘 적용하기

반응형

옛말에 보기 좋은 떡이 먹기도 좋다는 말이 있습니다.

그냥 기본 아이콘으로 덩그러니 있는 페이지 보다는 그 페이지만의 개성을 잘 살린 아이콘이 있다면 사용자들로

하여금 더 자주 페이지를 방문하게 있을 거라고 생각합니다.

모바일(안드로이드,IOS)에서 페이지를 즐겨찾기 할시 파비콘을 따로 설정하지 않으면 기본 아이콘이 생성된다.

따라서 해당 페이지의 로고로 아이콘을 만들기위해 파비콘을 적용 하여야 한다.


파비콘 적용하는 방법에 대해서 알려드리겠습니다.


파비콘 : 모바일에서 즐겨찾기 추가시 해당 이미지가 출력됩니다.

 

안드로이드와 아이폰은 파비콘의 사이즈가 다르므로 2종류 모두 적용하려면 이미지도 2개가 필요하다


일반 안드로이드폰 최적화 사이즈 256x256 입니다.

iphone/ipad size 최적화 사이즈 144x144 입니다.


해당 html 파일 <head>와</head> 사이에 다음 소스를 추가 해주면 간단하게 파비콘이 적용 된다.


일반 안드로이드폰  <link rel="shortcut icon" href="images/256x256.ico">

iphone/ipad <link rel="apple-touch-icon" href="images/144x144.png" />


안드로이드와 아이폰의 사이즈 규격은 꼭 맞춰줘야 가장 예쁘게 파비콘이 적용 됩니다.

728x90
반응형

'IT > CSS HTML' 카테고리의 다른 글

HTTP 에러 코드표  (0) 2015.10.01