모바일 앱 홈화면 추가 아이콘 변경 가능 문의

1. 정확한 제품 또는 플러그인 이름

워드프레스

 

2. 상세 내용

 

안녕하세요.

우선 사이트 내 파비콘을 워드프레스 대시보드의 '커스터마이저-Site Identity-사이트 아이콘' 경로에서 설정하지 않고 (해당 경로로 설정하면 중간에 링크연동을 거치게 되어서 로딩이 작용함),

ftp 경로의 www 폴더에 'favicon.ico' 이미지를 다시 넣어서 사이트의 파비콘을 변경하였습니다.

한가지 의문은 모바일에서 사이트 자체를 '홈 화면에 추가'해서 앱으로 열기를 하였을때 앱아이콘은 변경이 되지않고 있습니다.

워드프레스에서는 favicon.ico를 변경하면 자동 적용된다고 하는데 적용이 안되고 단순 페이지 명의 제일 첫 글자만 보여집니다.

그래서 스크립트 코드를 넣어서 반영이 될까하고 넣어보았는데 적용이 안됩니다. 다른 방법이 있을까요? 

답변 부탁드립니다. 감사합니다.

 

3. 확인 가능한 상세 페이지 주소

 

-사이트 주소 : https://cleanb.life/

-참고 이미지1(홈 화면에 추가 경로-아이폰) : https://imgur.com/R4pyPFi

-참고 이미지2(홈 화면 추가후 변경안된 앱아이콘) : https://imgur.com/djLhhDJ

-참고 이미지3(파비콘 이미지 넣은 ftp 경로) : https://imgur.com/wfHPyY1

 

4. 수정한 코드 내역 (있다면) - 아래의 여러 코드를 다 회 적용후 테스트 해보았는데 변경이 안되었습니다.

1.1 기본 아이폰이 제공하는 UI 처리 사용시

1

<link rel="apple-touch-icon" href="/이미지경로/icon.png" />

 

1.2 기본 아이폰이 제공하는 UI 처리 사용하지 않을시

1

<link rel="apple-touch-icon-precomposed" href="/이미지경로/icon.png" />

 

2. 안드로이드(Android)

아이콘 사이즈는 안드로이는 같은 경우 72x72(px)의 png이미지를 지정하면 됩니다.

1

<link rel="shortcut icon" href="/이미지경로/icon.png" />

 

 

3. 스크립트를 이용 웹브라우저를 판단후 처리 할 수 있는 방법은 아래와 같습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<script>

var userAgent = navigator.userAgent.toLowerCase(); // 접속 핸드폰 정보

   

// 모바일 홈페이지 바로가기 링크 생성

if(userAgent.match('iphone')) {

    document.write('<link rel="apple-touch-icon" href="/이미지경로/icon.png" />')

} else if(userAgent.match('ipad')) {

    document.write('<link rel="apple-touch-icon" sizes="72*72" href="/이미지경로/icon.png" />')

} else if(userAgent.match('ipod')) {

    document.write('<link rel="apple-touch-icon" href="/이미지경로/icon.png" />')

} else if(userAgent.match('android')) {

    document.write('<link rel="shortcut icon" href="/이미지경로/icon.png" />')

}

</script>

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • AI에 의해 자동 생성된 답변이에요 😀

    안녕하세요! 모바일 앱 홈 화면에 추가한 아이콘을 변경하고 싶으신 것 같네요.

    일단, 워드프레스에서는 사이트 아이콘을 설정하는 경로인 '커스터마이저-Site Identity-사이트 아이콘'을 사용하지 않고, FTP 경로의 www 폴더에 'favicon.ico' 이미지를 넣어서 변경하셨다고 하셨습니다. 그런데 모바일에서 홈 화면에 추가한 후에는 아이콘이 변경되지 않고 페이지 명의 첫 글자만 보여진다고 하셨습니다.

    첫 번째로 시도하신 방법은 기본 아이폰 UI 처리를 사용하는 방법입니다. 하지만 이 방법으로도 변경이 되지 않았다고 하셨습니다.

    두 번째로 시도하신 방법은 안드로이드 아이콘 사이즈를 지정하는 방법입니다. 하지만 이 방법으로도 변경이 되지 않았다고 하셨습니다.

    세 번째로 시도하신 방법은 스크립트를 이용하여 웹브라우저를 판단한 후 처리하는 방법입니다. 하지만 이 방법으로도 변경이 되지 않았다고 하셨습니다.

    현재까지 시도한 방법으로는 변경이 되지 않아 다른 방법을 찾아보셔야 할 것 같습니다. 아이콘 변경이 적용되지 않는 이유는 정확히 파악하기 어렵지만, 아마도 워드프레스의 설정과 관련된 문제일 수도 있습니다.

    가능한 해결 방법으로는 워드프레스 테마의 커스터마이저 기능을 사용하여 사이트 아이콘을 변경하는 것이 있습니다. 테마의 커스터마이저에서 사이트 아이콘 설정을 확인하고, 변경된 아이콘을 적용해보시는 것을 권장해드립니다.

    만약 이 방법으로도 문제가 해결되지 않는다면, 워드프레스 테마나 플러그인의 설정을 확인하거나, 워드프레스 커뮤니티나 개발자 포럼에서 도움을 요청해보시는 것도 좋은 방법입니다.

    문제를 해결하기 위해서는 워드프레스 테마나 플러그인의 설정과 관련된 내용을 자세히 파악해야 하므로, 질문에 제시된 코드 외의 추가적인 정보가 필요할 수 있습니다. 만약 추가적인 코드나 설정 내용이 있다면 알려주시면 더 정확한 답변을 드릴 수 있을 것입니다.

    문제 해결을 위해 노력하시고, 문제가 해결되지 않는다면 다시 문의해주세요. 도움이 될 수 있도록 최선을 다하겠습니다. 감사합니다!

    ↓ 아래 버튼을 눌러서 피드백해주세요.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요