WEB: 포트폴리오 만들기2(파비콘 추가)
오늘 원래 개강날인데, 미뤄져서 집에서 뭐라도 해보자고 다짐하고 다시 atom과 github을 켰다. 총총
나는 주로 나중에 읽을 웹페이지들을 '홈화면에 추가' 해놓곤 하는데, 그 때 뜨는 아이콘이 깔쌈하면 참 보기 좋아서 내 포트폴리오도 그렇게 만들어두고 싶었다. 나중에 혹시ㅋㅋ ㅋ ㅋ ㅋ ㅋ&^^! 정말 혹시 로고를 만들게 될 수.. 있겠지만, 지금은 미모티콘으로 설정해두었다. 사실 카키색 안어울리는 난데, 그냥 예뻐서 함. (**안드로이드 폰 유저인 아부지에게 폰을 빌려 안드로이드에서도 테스트해보았삼 잘되었삼)
인터넷 브라우저, 안드로이드에서는 네모난 것 보다 동그란 파비콘(favicon-인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘)이 보기 좋은 것 같아서, 원형으로 따로 설정했다. 저렇게 동글동글하게 뜬다. 귀여워라,,,,,,,,,
생각보다 이 기능을 모르는 사람들이 꽤 있길래 사진도 함께 첨부해본다. safari에서 하단의 가운데 모양을 터치한 후에 기호에 맞게 읽기 목록, 책갈피, 즐겨찾기, 홈화면에 추가할 수 있다. 야 너두 할 수 있어!
저건 사용자의 입장이고, 나는 개발자의 입장이니까(그으래?). html에 어떤 코드를 작성해야, 저 아이콘들을 내 맘대로 만들 수 있는지를 살펴보자.
<!DOCTYPE HTML>
<html>
<head>
<title>2hyes.portfolio</title>
<!-- 문자인코딩 태그 -->
<meta charset="utf-8" />
<!-- css파일 참조 -->
<link rel="stylesheet" href="assets/css/main.css" />
<!-- iPhone 홈화면 로고 -->
<link rel="apple-touch-icon" href="images/HS2.jpg" />
<!-- 안드로이드 홈화면 로고 -->
<link rel="shortcut icon" href="images/HS2.jpg" />
</head>
<body>
</body>
</html>이러한 형태의 코드로 html head부분을 작성해주면 된다. 꼭 필요한 부분만 작성했으니, 간단하게 확인할 수 있을 것 같다. href에 해당되는 부분은 사실 링크 형태로 들고 와도 되긴 하는데, 나는 그냥 html 프로젝트 폴더에 이미지들을 함께 넣고 사용하는 편이다.
-
어디서도 깨지지않게하기위해서, 파비콘을 크기별로 생성하여 만들어주었다. 이 것도 참고하면 좋을 것 같다!
<!-- iPhone 홈화면 및 apple 사이즈별 파비콘 -->
<link rel="apple-touch-icon" href="images/HS2.jpg" />
<link rel="apple-touch-icon" sizes="57x57" href="images/57x57.png"> <!-- iPod touch, iPhone 3g 1세대 -->
<link rel="apple-touch-icon" sizes="60x60" href="images/60x60.png"> <!-- iPhone iOs7+ -->
<link rel="apple-touch-icon" sizes="72x72" href="images/72x72.png"><!-- iPad 홈스크린 -->
<link rel="apple-touch-icon" sizes="76x76" href="images/76x76x.png"><!-- iPad 홈스크린(iOs7) -->
<link rel="apple-touch-icon" sizes="114x114" href="images/114x114.png"><!-- iPhone 레티나(iOs6이하) -->
<link rel="apple-touch-icon" sizes="120x120" href="images/120x120.png"><!-- iPhone 레티나, iOS7이상 -->
<link rel="apple-touch-icon" sizes="144x144" href="images/144x144.png"><!-- IE10 매트로타일 -->
<link rel="apple-touch-icon" sizes="152x152" href="images/152x152.png"><!-- 아이패드터치 -->
<link rel="apple-touch-icon" sizes="180x180" href="images/180x180.png"><!-- iPhone6+ -->
<!-- 안드로이드 홈화면 및 pc 사이즈별 파비콘 (원형)-->
<link rel="shortcut icon" href="images/HS_circle.jpg" />
<link rel="icon" type="image/png" sizes="192x192" href="images/192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/16x16.png">
-