티스토리 블로그 파비콘/아이콘 업데이트 스토리 - 다크모드 업그레이드 최종 마무리

🏌🏻‍♂️ 2020. 7. 24. 19:39

728x90

티스토리 블로그 다크모드 변환 과정에서 버그 슈팅을 이것 저것 하고 있는데, 이제 거의 완성한 느낌입니다. 더 손 볼 곳이 별로 없다는 느낌을 받네요. 마지막으로 그동안 손대지 않았던 파비콘, 아이콘 부분을 살펴 봤습니다. 여러 선배 블로거들의 안내에 따라 제 블로그를 상징하는 무료 아이콘 (www.iconfinder.com/free_icons)을 골라 다운 받았고, 특히 16x16 픽셀로 압축했을 때 여전히 가독성이 살아 있을 만한 파비콘 후보를 선정했습니다.

파비콘은 홈페이지를 대표하는 작은 아이콘인데 favorite icon의 약자로 favicon입니다. 다음과 네이버의 D와 N 글자를 떠올리면 무슨 기능을 하는지 쉽게 짐작이 가능합니다. 김선생 FixnSolve 사이트에 맞춰 당연히 K 글자를 선택했습니다.

블로그 설정화면에서 아이콘과 파비콘을 업로드하는 곳이 있으니 찾아서 업로드 하면 되겠습니다. 파비콘은 png 파일을 16x16 사이즈 ico 파일로 변환 (www.favicon-generator.org) 해서 업로드해야 합니다. 그리고 왓에버 스킨 html 편집에서 <head> .. </head> 사이에 아래 코드를 붙여넣기 하면 아래와 같이 홈페이지 주소 앞에 작은 파비콘이 나타납니다.

<!Favicon>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

왓에버 스킨은 새로 코드를 넣어야 하는데, 다른 스킨에는 파비콘 코드 부분이 이미 포함된 경우도 있으니 확인해 보시기 바랍니다. 파비콘이 동작하는 것을 보려면 그동안 웹서핑 중 다운로드했던 히스토리/캐쉬 파일을 지워줘야 합니다. 안그러면 기존의 티스토리 T 글자 파비콘이 자리를 차지하고 있을 겁니다.

아이콘과 파비콘을 업로드하면 댓글/방명록 닉네임 앞에 작은 그림이 표시된다(notice.tistory.com/1756)고 해서 2008년도에 공개된 플러그인들을 사용해 봤습니다. 그런데 이 플러그인이 너무 오래 전에 공개된 것이라 그런지 왓에버 스킨에서 제대로 작동하지를 않네요. 크기가 프로필 이미지 사이즈로 나오고, 그러다보니 해상도도 너무 떨어지게 나옵니다. 더 심각한 건 프로필 이미지랑 역할도 중복입니다.

다른 분들 증언에 의하면 다른 스킨에서는 제대로 작동하는 것도 같습니다. 아마 2018년 프로필 이미지가 도입되기 전에 개성을 표현하는 장치였던 것 같은데, 프로필 이미지 도입 후 개성표현 목적으로는 좀 쓸모가 없어진 것도 같습니다. 다만 최신 프로필 이미지가 식상하다, 방문자들의 프로필 이미지 파일크기가 너무 크다 생각하시는 분들은 아이콘이나 파비콘으로 방문자 개성을 대체할 수도 있을 것 같습니다. 그래서 파비콘과 아이콘 표시를 그래도 쓸모있게 표현하려면 버그를 잡아야 하니.. 아래 코드 라인을 css 편집에 추가해 줬더니 조금 볼 만해 졌습니다.

/* DrK Favicon Fix */
.comments .comment-list ul li .author-meta .nickname img {
	width: 16px;
	height: 16px;
	margin: 15px 4px 0 0;
}

크기는 숫자를 변경해서 조절하면 되고, 취향이나 필요에 따라 댓글/방명록 프로필 이미지 치환자 나 를 제거하고, 파비콘, 아이콘 플러그인 중에 하나를 사용해도 될 것 같습니다. 저는 기존 것들이 충분히 만족스러워 파비콘/아이콘 플러그인은 다시 비활성화했습니다.

이상으로 대략 한달 반간 이어진 티스토리 왓에버 스킨 "어두운" 옵션을 활용한 다크모드 업그레이드 프로젝트를 마무리 하겠습니다. 이 정도 하고 나니.. "아, 티스토리는 이렇게 하는 것이구나" 하는 생각이 듭니다. 티스토리에서 기본 플랫폼과 기본 스킨만 제공했지.. 각자 알아서 자기 스타일에 맞게 블로그를 지지고 볶고 꾸미도록 html과 css 편집 옵션을 제공하고 있는 것 같습니다. 그래서 일부러 티스토리 개발자들이 모든 게 완벽한 스킨을 제공하지 않는 이유(?)일 수도 있을 것 같습니다. 그래야 공부를 하니까요. 덕분에 공부 잘하고 아주 고급기술을 구사할 수는 없지만 나름 살짝 특색있는 블로그로 변신시킬 수 있었습니다.

아래는 왓에버 스킨 사용하시거나 쉬운 다크모드 전환에 관심있는 분들을 위한 링크들을 정리했으니 참고하시기 바랍니다.

1. 다크모드 전환 및 긴급 버그 수정 (1편): drkimfixnsolve.tistory.com/142

김선생 FixnSolve 티스토리 블로그 다크모드 출시~ 또하나의 에너지 절약 아이템

요즘 다크모드가 유행인 것 같습니다. 맥도 다크모드를 지원하고, 애플 iOS 최신버젼도 다크모드를 지원하고 있습니다. 요즘 모바일 다음도 다크모드로 전환 중인 것 같습니다. 어떻게 보면 다크

drkimfixnsolve.tistory.com

2. 왓에버 스킨 버그 대량으로 잡기 (2편): drkimfixnsolve.tistory.com/146

티스토리 왓에버 스킨 숨겨진 버그 잡기 - 다크모드 2탄

티스토리 블로그를 시작한 지 1년 3개월이 넘어가고 있습니다. 홈페이지 관리는 20여년 전 재미삼아 html를 건들어 본 것이 전부였는데.. 그때 배운 약간의 html 지식으로 그동안 어떻게 최소한의 ��

drkimfixnsolve.tistory.com

3. 다크모드 업그레이드 상단 카테고리 고정 (3편): drkimfixnsolve.tistory.com/150

티스토리 왓에버 스킨 다크모드 우왕좌왕 업그레이드 3탄 - 모바일 우측공백 문제

티스토리 블로그 방문자도 어느 덧 30만을 돌파하고 있습니다. 최근 다크모드로 업그레이드하며 블로그 여기저기를 전체적으로 손보고 있는데, 잘 알지 못하는 css를 가지고 플레이하려니 여간 �

drkimfixnsolve.tistory.com

4. 공지사항/방명록 버그 수정 (4편) drkimfixnsolve.tistory.com/158

티스토리 Whatever 스킨 공지사항/방명록 버그 잡기 - 다크모드 최적화 4탄

티스토리 왓에버 Whatever 스킨 다크모드 최적화가 거의 끝나는 것 같습니다. 구글 애드센스 (일치하는 컨텐츠)도 다크모드에 적합하게 배경색깔을 변경했고.. 모바일 화면도 이것 저것 신경을 써

drkimfixnsolve.tistory.com

5. 파비콘/아이콘 업데이트 (최종): 본 글이 되겠습니다. drkimfixnsolve.tistory.com/163

티스토리 블로그 파비콘/아이콘 업데이트 스토리 - 다크모드 업그레이드 최종 마무리

티스토리 블로그 다크모드 변환 과정에서 버그 슈팅을 이것 저것 하고 있는데, 이제 거의 완성한 느낌입니다. 더 손 볼 곳이 별로 없다는 느낌을 받네요. 마지막으로 그동안 손대지 않았던 파비�

drkimfixnsolve.tistory.com

그동안 뜻하지 않는 다크모드 업그레이드 과정에서 나름 쓸모 있는 성과도 얻을 수 있었습니다.

번외 1. 커버 슬라이더 자동넘기기: drkimfixnsolve.tistory.com/161

티스토리 스킨 슬라이더 자동넘김 스크립트 - 왓에버, 포스터, 포트폴리오, 매거진

최신 티스토리 스킨 (왓에버 Whatever, 포스터 Poster, 포트폴리오 Portfolio, 매거진 Magazine)에는 여러 커버 기능이 있습니다. 그 중에서 대표적인 커버로 슬라이더가 있는데 여러 포스트를 클릭하면서

drkimfixnsolve.tistory.com

번외 2. 방명록 프로필 이미지 치환자 공개: drkimfixnsolve.tistory.com/160

[최초] 티스토리 방명록의 숨겨진 프로필 이미지 치환자 공개

앞선 글에서도 살짝 공개했는데, 이 글에서 자세히 다뤄 보겠습니다. 그동안 티스토리 왓에버 (Whatever) 스킨 다크모드 최적화를 시도하고 있는 데 이제 거의 마무리가 되고 있는 듯 합니다. 아래

drkimfixnsolve.tistory.com

번외 3. 클릭 요소 너무 가까움 오류 해결: drkimfixnsolve.tistory.com/153

티스토리 구글서치콘솔 '클릭할 수 있는 요소가 서로 너무 가까움' 오류 해결법

그동안 구글서치콘솔에서 "클릭할 수 있는 요소가 서로 너무 가까움"이라는 오류 경고(레트 라이트)를 받은 것은 한참.. 한 1년 이상 된 것 같습니다. 오류가 모바일 tag 페이지에 있다는 얘기였는

drkimfixnsolve.tistory.com

그럼 즐거운 티스토리 생활에 조그만 도움이 되기를 바래 봅니다.

(추가 2020/7/25) 아이콘과 파비콘의 해상도가 너무 좋지 않아 조금 큰 사이즈로 작업했더니 (32x32 해상도 변환: convertico.com) 업로드 잘 됩니다. 아이콘도 큰 걸로 했습니다.

그리드형(광고전용)

저작자표시 비영리 변경금지 (새창열림)