[HTML][한]파비콘(favicon) 만들고 적용하기 오분컷



맨시티 제코와 아구에로가 11-12 PL 38라운드에 QPR에 단시간의 기적을 만들어낸 기백으로 저도 favicon 5분컷해보겠습니다.

Table of Contents

0. 파비콘?


Favicon은 iOS, Andriod, 사파리, 크롬 등 각종 웹 애플리케이션에 적용하는 ‘아이콘 스몰 버전’이라고 생각하면 됩니다. 구글드라이브, 깃헙, 다음 어학사전, 페이스북의 스몰로고가 보이는데 이 로고를 본인 개인 블로그에도 추가 가능합니다.

1. 로고 만들기

↑ 이를 위해 저의 성명 세글자 초성을 이용해 로고를 조그맣게 디자인 해보았습니다(아이패드 procreate 앱 이용).

2. 로고 → 파비콘

로고는 상당히 큰 사이즈의 png파일인데, 구글 크롬에 들어가는 파비콘은 불과 16 X 16 픽셀사이즈이니 리사이징이 필요합니다만 여러 운영체계, 앱에 맞게 하나하나 작업하기는 귀찮습니다. 그래서, https://www.favicon-generator.org/ 에 들어가셔서 png파일을 업로드 하시면 압축파일을 하나 다운 받을 수 있습니다.

↑ create누르시면 변환됩니다.

↑ download클릭하고 파일 압축 해제해주세요.


↑ 각 운영체계 앱별 파비콘이 생성되었습니다! 픽셀사이즈가 상당히 다양합니다.

3. 파비콘 → 문서 디렉토리

↑ 그리고 /asset 폴더안에 /icons라는 새 디렉토리를 만들고 파비콘 png파일 여러개를 그대로 옮겨 넣었습니다.

4. 문서 디렉토리 ↔ head.html

마지막으로 HTML head 설정만 해주시면 됩니다. 즉 /assets/icons의 파비콘을 연결하겠다고 HTML 우두머리에게 선언하고 빨대를 꼽아주는 작업을 말합니다. 참고로 저는 jekyll의 Minimal 테마를 사용합니다.

/_includes/head.html 파일에 아래와 같은 명령어를 넣어주었습니다. 저는 html css를 잘 몰라서 틀릴수도 있는데, href는 하이퍼링크 레퍼런스?를 말하는 것 같네요. href에 제가 바로전 저장했던 파비콘 파일들의 경로를 지정해줍니다. 쓰시는 블로그마다 트리구조가 다를 테니 파일 디렉토리 주소 잘 파악해서 기재하면 될 것 같습니다.

<!-- wc add for favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="../assets/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="../assets/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="../assets/icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="../assets/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="../assets/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="../assets/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="../assets/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="../assets/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="../assets/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="../assets/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="../assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="../assets/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="../assets/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

모든 파일 저장하고

$ jekyll build
$ jekyll serve

jekyll 서브하시고 http://127.0.0.1:4000/ 들어가서 파비콘이 생성됐나 확인해주세요.

문제가 없네요

5. new favicon debut

그러면 인터넷 세계에 파비콘을 올리면 됩니다.

$ git add .
$ git commit -m "new favicon debut"
$ git push

모바일에서도 확인이 가능할까요?


↑ 완료! 그 옆의 전문가의 아이콘과 비교했을 땐 한참 멀었지만 뿌듯하네요. 코세라 로고는 계속 봐도 안질리고 미려합니다.

이상 파비콘 5분컷 끝입니다
(애석하게도 이 글 ‘작성’하는 것은 20분 넘게 걸렸네요 ☔ )

Z. 참조

  • https://www.favicon-generator.org/
  • https://www.youtube.com/watch?v=xOt9dmkydwM



끝

2020

[Robot][EN]Hivemapper

2 minute read

Hivemapper,a decentralized mapping network that enables monitoring and autonomous navigation without the need for expensive sensors, aircraft, or satellites.

[CV][GAN][EN]Cycle GAN

8 minute read

Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks

Back to top ↑