나만의 파비콘을 가지고 있으신가요? 그럼 자신의 티스토리 블로그에 적용해 보도록 합시다. 실제 아래 링크된 글을 보면 알 수 있지만 아이콘 용으로 만들어서 공통적으로 사용할 수 있도록 패키지화 한 후 내 티스토리의 루트에 파일을 업로드 해 놓으면 정말 다양한 곳에서 내 블로그 아이콘이 드러날 수 있습니다.
하지만 실제 내 블로그를 즐겨찾기 해서 바탕화면에 아이콘처럼 꺼내놓는 경우는 거의 없을거라 간단히 만든 파비콘 중에서 32 x 32 사이즈 하나만 사용을 하면 됩니다.
아직 파비콘이 없거나 만드는 방법을 알고 싶으시면 아래 포스팅을 참고하세요.
2020/01/11 - [초보 티스토리 블로거] - 너무쉬운 나만의 파비콘 만들기 with 파워포인트
티스토리 블로그에 파비콘 적용하기
티스토리 블로그관리홈 - 관리 - 블로그 를 선택해 줍니다.
오른쪽에 나오는 파비콘에서 불러오기를 선택 합니다.
32 x 32 사이즈를 지원함으로 해상도가 높은 파비콘을 선택해 주고 저장하면 완료 입니다. 다시 자신의 블로그로 들어가서 확인해 보면 브라우저 상단에 파비콘이 변경되었음을 알 수 있습니다
모든 종류의 아이콘 및 파비콘이 모든 기기에서 나오게 하려면
파비콘만 있으면 적용하는것은 매우 간단합니다. 혹시 몰라 다양한 디바이스에서 나올 수 있도록 하는 방법도 남겨 놓겠습니다. 먼저 패키지로 받아서 푼 아이콘과 파일들을 블로그 루트 디렉토리에 넣어 줍니다. (이걸 하는법을 아직 못찾았어요. 일반 파일들은 예전 편집기에서 첨부하면 되는데, 일부 파일은 CDN으로 업로드 되네요. 아시는분은 가르침을 주세요~)
업로드가 정상적으로 다 되었다면 블로그의 HTML 편집하기로 가서 <head>와 </head>사이에 하기의 코드를 넣어 줍니다.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
그럼 모두 완료!
