타운광장토픽게시판

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}" />

 

이 부분을 대치해주면 아주 잘되네요!

 

별거 아니지만 깔끔하게 해결된 것 같아서 올려봅니다 :)

  • profile

    파비콘과 애플 터치 아이콘을 반드시 루트에 올려야 한다는 법은 없습니다.

    다른 경로에 올리는 것이 허용되지 않는다면 뭐하러 저 태그에 href="경로"를 넣도록 되어 있겠어요?

    적당히 큰 것을 골라 시스템 설정에 올리시고, 만약 XE가 크기 때문에 까다롭게 군다면

    일단 올린 후 해당 경로(./files/attach/xeicon/***)의 파일을 바꿔치기해 주면 그만입니다.

     

    색상 테마, manifest 등 나머지 태그들은 사이트나 레이아웃의 헤더 스크립트에 넣으시면 됩니다.

    <link> 태그와 <meta> 태그는 어디에 넣어도 <head> 부분으로 끌어올려지므로

    넣는 위치를 신경쓰실 필요가 없습니다. XE, 라이믹스 모두 오래 전부터 제공해 온 기능입니다.

    즉, 위의 내용만으로는 굳이 코어에 포함된 파일을 수정할 이유를 찾지 못하겠습니다.

  • profile profile
    경로 때문이 아니라.. 저 코드 그대로 헤드에 넣으면 안드로이드에서 바탕화면에 바로가기를 만들었을때 아이콘이 반영되지 않더라구요? 윈도우에서는 잘반영됩니다. 브라우저 상단 작은 파비콘도 잘반영되구요.
  • profile profile
    그리고 적당한 사이즈로 하나 넣는 것보다 본문 링크된 사이트를 이용하면 적당한 사이즈 하나를 다양한 크기로 자동으로 만들어주고 코드를 만들어준다는 점이 저같은 초보에게는 아주 좋았습니다. 브라우저나 os에 따라 파비콘 설정이나 크기가 달라질 수 있다는 것 자체를 몰랐으니까요.
  • profile profile

    안드로이드 크롬에서 요구하는 192x192 사이즈로 파비콘을 만들어 넣으면 대부분의 브라우저에서 용도에 따라 자동으로 축소하여 표시해 줍니다. 다양한 크기로 여러 개를 만들어야 한다는 전제부터 의심스럽다는 뜻입니다.

    더 큰 문제는 요즘 대부분의 기기에서 1px이 1px이 아니라는 점입니다. 모바일에서의 해상도 경쟁은 두말할 것도 없고, 윈도우 노트북도 요즘은 1.25~1.5배가 기본입니다. 깨끗한 선이 중요한 아이콘이나 로고 등을 과거에 사용하던 16px 단위에 딱 맞춰서 만들면 실제 화면에 표시할 때 어정쩡한 배율로 확대되어서 오히려 흐릿하게 보일 수 있으니 주의하시기 바랍니다.

     

    코어에서 제공하는 파비콘 코드를 아예 사용하지 않으시려면 기본 설정에서 파비콘을 제거해 버리고 해당 파일도 삭제하시면 됩니다. 보다시피 파비콘 출력 소스에 cond= 조건이 붙어 있기 때문에, 코어에서 설정된 파비콘이 없으면 파비콘 관련 태그가 아예 출력되지 않습니다. 그 후에 레이아웃 수정이나 헤더 스크립트 등을 통해 대체 코드를 추가하시면 코어 수정 없이 원하시는 결과를 얻을 수 있을 것으로 보입니다.

  • profile profile

    -
    제가 언급한 적당한 사이즈란 큰 사이즈입니다. (작은 사이즈로 업로드 하면 최소 260x260 이상으로 해야 윈도우 8/익스플로러 11 등에서 요구하는 고해상도에 대응할 수 있다고 나옵니다.)

    -
    위와 같이 하는 것, 즉 애플용 숏컷 180x180, 브라우저 상단용 32x32,16x16, 안드로이드용 숏컷 512x512, 192x192 각각 설정하는 것보다 192x192 하나 올려서 브라우저가 알아서 축소해서 사용하는 것이 낫다는 말씀이시군요. 배경색 설정은 차치하구요.

    감사합니다!

  • profile profile
    코어에서 제공하는 파비콘 코드를 아예 사용하지 않으시려면 기본 설정에서 파비콘을 제거해 버리고 해당 파일도 삭제하시면 됩니다. 보다시피 파비콘 출력 소스에 cond= 조건이 붙어 있기 때문에, 코어에서 설정된 파비콘이 없으면 파비콘 관련 태그가 아예 출력되지 않습니다. 그 후에 레이아웃 수정이나 헤더 스크립트 등을 통해 대체 코드를 추가하시면 코어 수정 없이 원하시는 결과를 얻을 수 있을 것으로 보입니다.

    --> 감사합니다!!
  • profile profile
    PNG로 저장했을 때 용량이 아주 커지거나, 심하게 축소했을 때 이상하게 보이는 디자인이 아니라면 아예 512x512로 해버리는 것도 나쁘지 않겠습니다. 기기 및 브라우저마다 제각각이던 파비콘 규격도 시간이 지남에 따라 점점 비슷하게 바뀌어 가고 있고, 어떤 사이트에서 다 필요하다고 주장한다고 해서 정말로 다 필요한 것은 아닐 수도 있거든요. 예를 들어 260x260은 저도 처음 보는 규격입니다. 윈도우에서 270x270을 권장했던 적은 있습니다만...
  • profile profile
    만약 2021년 기준으로 반드시 제공해야 하는, 또는 하나의 사이즈로 최대한 넓은 범위를 커버할 수 있는 파비콘 규격을 발견하신다면 귀띔해 주시기 바랍니다. 라이믹스에서도 권장 파비콘 규격에 대한 안내문을 넣거나, 필요시 자동으로 리사이즈해 주려고요.^^
  • profile profile
    네! 감사합니다! 저야 잘모르지만 말씀하신대로 하나의 고해상도 화일을 브라우저단에서 리사이즈하는게 더 유연할 것 같다는 생각이 듭니다! 앞으로 또 어떻게 변할지 모르니까요.
  • profile

    파비콘 자동으로 만들어주는 사이트들 덕분에 요즘은 참 쉬웠졌죠~~~....

    큰거 하나 던져주면 알아서 쓰면 제일 좋겠는데, 이게 모든 경우의 수에 다 통하지가 않아서, 저는 그냥 남이 하라는대로 하고는 있습니다...

    브라우져 버전별로도 조금씩 달라지고 개선되더군요. 예를들면, MacOS 사파리의 tab에 나오는 아주 작은 아이콘을 mask icon 이라고 하는데, 예전에는 단색 컬러로 마스킹 했어야 하는데, 요즘 보니까 그낭 파비콘을 스스로 줄여서 풀 컬러로 쓰더라구요. 오히려 mask icon을 지정한 것이 (단색이다보니) 뒤떨어져 보이죠.

     

    애석하게도 큰것 하나만으로 안되는 것이, 예를들면, amazon.com을 사파리 즐겨찾기로 해놓으면, 빈 브라우저 뜰때 바탕에 즐겨찾기 아이콘이 깔리는데(크롬도 마찬가지임), 아마존은 이때 표시할 아이콘이 없어 그냥 "A"자(default)로만 뜹니다 (크롬에서는 아마존 파비콘이 뜹니다. 아마존 운영자는 크롬에서만 테스트 해본것 같아요). 이렇게 큰 회사도 제대로 못해놓는게 파비콘 설정이다보니까,

     

    위 웹사이트 처럼 자동으로 설정 만들어 주는 사이트가 도움이 되는데, 물론 분명 불필요한 설정이 있을것 같은데, 뭐가 불필요할지가 해본적이 없어서 모르겠네요.~ㅎㅎ

  • profile

    저도 어제 로고 브랜드가 완성 되어서 기존 사용하던 이모티콘에서 새롭게 파비콘 형태로 바꿨더니 해상도 문제가 좀 있길래

    알려 주신 코드로 해보니 출력이 안되더라구요. 요리조리 궁리하다가 로고 테두리를 검은색으로 바꿔주니 생각보다

    깔끔한? 효과가 나오네요. 특히 다크모드에서도 괜찮은 것 같습니다. 본문 내용과 다른 쌩뚱한 내용이지만 

    이리저리 해도 잘 안되시는 분들은 테두리 색상 변경 시도 한 번 해보세요.