XE에서는 고해상도 파비콘과 모바일 바로가기 아이콘을 제대로 지원하지 않아서
라이믹스로 넘어가면 꼭 해야할일 리스트에 적어두었는데요.
우연히 검색하다가 추천할만한 방법을 찾았습니다.
https://realfavicongenerator.net/
이 사이트에 접속해서 웹사이트 주소를 입력해보면 각종 브라우저나 운영체계에서 파비콘이 어떻게 보이는지 알려주고
해상도가 높은 아이콘하나만 입력하면 마찬가지로 각종 브라우저나 운영체계에 맞춰서 파비콘 화일을 만들어주고 배경색 등을 지정할 수 있게 해주고 코드까지 생성해줍니다!
<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">
이런 식으로요!
화일은 원하시는 폴더에 넣고 위 코드에서 href="/폴더이름/~~.png" 형식으로 고쳐주신 후 레이아웃 화일이나 레이아웃 설정에 삽입하시면 됩니다!
그런데 화일은 루트에 넣고, 코드는 헤더에 넣으라고 해서 그렇게 했더니, XE 기본 설정과 충돌해서 제대로 적용이 안됩니다.
그래서 조금 검색해보니,
/common/tpl/common_layout.html
/common/tpl/mobile_layout.html
에서
<link cond="$favicon_url" rel="shortcut icon" href="{$favicon_url}" />
<link cond="$mobicon_url" rel="apple-touch-icon" href="{$mobicon_url}" />
이 부분을 대치해주면 아주 잘되네요!
별거 아니지만 깔끔하게 해결된 것 같아서 올려봅니다 :)
파비콘과 애플 터치 아이콘을 반드시 루트에 올려야 한다는 법은 없습니다.
다른 경로에 올리는 것이 허용되지 않는다면 뭐하러 저 태그에 href="경로"를 넣도록 되어 있겠어요?
적당히 큰 것을 골라 시스템 설정에 올리시고, 만약 XE가 크기 때문에 까다롭게 군다면
일단 올린 후 해당 경로(./files/attach/xeicon/***)의 파일을 바꿔치기해 주면 그만입니다.
색상 테마, manifest 등 나머지 태그들은 사이트나 레이아웃의 헤더 스크립트에 넣으시면 됩니다.
<link> 태그와 <meta> 태그는 어디에 넣어도 <head> 부분으로 끌어올려지므로
넣는 위치를 신경쓰실 필요가 없습니다. XE, 라이믹스 모두 오래 전부터 제공해 온 기능입니다.
즉, 위의 내용만으로는 굳이 코어에 포함된 파일을 수정할 이유를 찾지 못하겠습니다.