워드프레스

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>