- 사이트에 특별한 문제 없다면 구글 공식 문서에서 권장하는 파비콘 크기가 아니어서다
- 권장 크기는 너비/높이가 48px의 배수인 정사각형(48 x 48px, 96, 192, ~ 480, 528...)
- 아이콘이 해당 사이즈 규격과 다를시 크기 조절후 다시 크롤링하길 기다리면 해결됨
최적의 워드프레스 아이콘 크기
워드프레스에서 업로드 할 때 512 x 512px 이상으로 하라고 추천하기 때문에 그대로 믿고 세팅하면 이런 문제가 생김.
가장 중요한 구글에서 권장하는 48px의 배수가 아니라서 안 긁어감, 구글에서 안가져가면 아이콘 의미없음.
48px 배수로 512px 이상 충족하려면 최소 528px인데, 업로드 하면 워드프레스에서 512px 넘는다고 자동 크롭함.
자동크롭 안되게 하려고 온갖 방법을 시도했는데, 어이없게도 그냥 크롭 안하고 올리는 방법 없음(아예 없는건 아닌데 문제 없이 올바르게 불가)
그래서 강제로 512px 이하로 업로드해야 crop을 스킵할 수 있음.
결과적으로 워드프레스&구글 둘 다 문제 없이 충족하며 가장 많이 쓰이는 icon & favicon 크기인 16, 32(작은사이즈), 48, 64, 96(중간), 180(apple-touch-icon), 192(구글 웹 권장) 등을 포함하는 최적의 파비콘 아이콘 크기는 480 x 480px임
자주 쓰이는게 최대 192px인데 왜 480px이냐면 요즘은 고해상도, 고밀도 사용자용으로 많이 개발돼서 192px아이콘을 가져다 쓰는 기기에서 이미지 크기가 딱 192px이면 저해상도라고 최적화 툴에서 시비검.
때문에 고밀도 환경에서도 깨짐이나 최적화 오류 없이 표현되려면 2배 이상인 384px로 세팅해야 문제없이 최적화 통과됨.
또 앞으로 개발될 환경들을 고려하면, 마냥 크게 할 순 없지만(속도문제, 너무 커도 웹에서 자동크롭됨) 가능한 가장 큰게 장기적으로 안정적.
384px 하면 되지 왜 480px이냐면(이게 딱 깔끔하니까) 기타 오페라 224px나 240px도 있고, 또 그에 따른 고해상도와, 마냥 커질 수 없는 모든것들을 종합적 고려시 480px이 가장 베스트. 길어지니까 결론내줌
- 구글은 가로세로 정사각형 48px 배수 파비콘이 권장사항.
- 모든 경우의수를 고려한 워드프레스 아이콘 파비콘 크기 정답 = 480 x 480px
- 크롭이든 뭐든 알 바 아니고, 무조건 베스트 크기만 중요하다 = 528 x 528px
Update
워드프레스 Site icon 경로 직접 등록을 사용해 완벽한 크기의 아이콘을 루트경로로 직접 등록할 수 있게 됐다.