목차
파비콘은 티스토리 뿐만 아니라 워드프레스에서도 적용을 하고 대부분의 사이트는 자신의 정체성을 나타내는 이 사이트 아이콘, 이미지를 사용을 하고 있는데요. 저도 몇달전에 티스토리 파비콘을 적용하여 사용을 하고 있었는데, 이것이 저한테만 보이고 있었는지 익스플로어나 크롬 등에서 검색해서봐도 제대로 노출되지 않고 있는 것을 발견했습니다. 오늘은 네이버 위젯 이미지도 불러올 수 없다고 그래서 수정을 했는데, 왜 이러는지 모르겠습니다.
그래서 일단 수정할 방법을 찾아봤는데요.
티스토리 파비콘 적용은 설정 - 블로그에 들어가서 할 수 있고 최근에는 파일형식이 ico가 아니고 png여도 된다고해서 했는데, 일단 수정을 해보기로 합니다.
아이콘과 파비콘의 차이
아이콘은 티스토리 댓글,방명록등에 글을 남길때 나오는 작은 아이콘을 말하고 파비콘은 위에서도 언급했듯이 내 사이트를 주소창이나 검색노출 시 보여지는 사이트 주소 앞에 나오는 그 작은 이미지를 말합니다.
티스토리 아이콘 사이즈 및 적용시키기
먼저 블로그에 보니 아이콘, 파비콘을 넣는 곳이 두군데가 있습니다. 아이콘은 사이즈가 32 x32 , 64x64 두가지로 댓글 등에 나타나니까 해주는 것이 깔끔하고 좋을 것 같아 적용을 시켜줍니다. 그림판이나 포토샵, 포토스케이프같은 편집 프로그램으로 사이즈 조절해서 업로드하면 됩니다.
그런 다음 설정 - 플러그인에서 아래의 '블로그 아이콘 표시'를 실행해줍니다.
사이즈 선택하고 실행해주시면 되는데, 문제는 블로그 프로필 사진을 이미 등록해놨다면 아이콘을 설정해놔도 프로필사진이 표시가 된다는 것인데요. 이게 아이콘으로 보여지는데에는 시간이 필요한 것 같습니다. 시간이 어느정도 지나니까 아래처럼 정상적으로 적용되었으니 참고하시구요.
티스토리 파비콘 강제 설정하기
위에서 아이콘을 만들어 놓았으니 이것으로 파비콘으로도 사용해보려고 하는데, png로도 표시된다고 하시는 분들이 있는데 일단 가장 기본적으로 많이 적용하는 방법을 따라서 적용시켜보겠습니다.
우선 이미지 사이즈를 만들어 놓으셨다면 아래의 사이트로 갑니다.
Favicon & App Icon Generator
Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.
www.favicon-generator.org
다음과 같이 이미지 업로드란에 선택해서 넣어주고 크리에이트 파비콘을 선택해줍니다.
그러면 다운로드 받은 압축파일을 풀면 다양한 기기에 맞춘 사이즈별 파비콘이 나오는데요. 이 전체를 다 서버에 올려서 HTML로 적용시키는 방법이 있던데 요즘은 또 그렇게 안해도 된다고 해서 일단 대표 ICO파일만 업로드해서 적용시켜보겠습니다.
그런 다음 ICO 확장자 파일을 설정 - 스킨편집 - HTML편집에 파일 업로드에 저장한 다음 주소를 복사합니다.
그런 다음 다시 HTML로 와서 아래와 같은 태그를 찾습니다. <HEAD> </HEAD> 안에 있을 겁니다. 그런 다음 아까 복사해 뒀던 이미지 주소를 아래처럼 넣어 주고 적용시키면 이렇게해서 강제 파비콘 적용이 가능해진다고 합니다.
그런 다음 추가로 다시 설정 - 블로그 - 파비콘에 아까 생성해둔 ICO파일을 가져와서 적용시키고 아래처럼 플러그인에서 '홈페이지 아이콘 표시'도 찾아서 설정을 해둡니다.
반영은 조금 걸릴 수 있는 것으로 알고 있는데, 새로고침해서 바로 보이기도 하고 사이트에 노출되는 것이 시간이 좀 걸리는 것 같습니다. 다시 사이트 수집 요청을 해서 빠르게 반영을 시켜보는 것도 방법일 거 같습니다. 그럼, 도움이 되셨길 바라며!
