워드프레스 안드로이드 크롬 홈화면 추가시 아이콘 나오게 만들기

  1. 아이콘으로 설정할 96×96 크기의 png 파일 준비함.
  2. https://realfavicongenerator.net/ 접속해서 ‘Select your Favicon image’ 버튼 눌러서 준비한 이미지 넣음.
  3. 크기때문에 뭐라 지껄이는데 무시하고 ‘Continue with this picture’ 버튼 눌러서 진행함.
  4. 그럼 뭐 잔뜩 나오는데 무시하고 맨 아래 ‘Generate your Favicons and HTML code’ 버튼 누름(중간에 ‘Favicon for Android Chrome’ 부분에서 어떻게 보일지 디자인 바꿀 수 있는데 하고싶은 사람만 하면 됨)
  5. ‘Favicon package’ 버튼 눌러서 압축파일 다운받음.
  6. 다운 버튼 아래에 ‘nsert the following code’ 어쩌구 부분에 있는 코드중에
    <link rel="manifest" href="/site.webmanifest">
    부분만 복사해서 내 사이트 <head> 아래에 넣음(직접 넣던가 플러그인 쓰던가 하면됨) 만약 루트권한 없으면 href="" 안의 주소를 내가 올릴 수 있는 주소로 바꿔도 됨
    <link rel="manifest" href="https://님 사이트 주소/wordpress/content/site.webmanifest">
    이런식으로
  7. 다운받은 압축파일 풀면 나오는 site.webmanifest 파일을 내 워드프레스 권한 되는곳에 올림. (루트에 올렸으면 그냥 하면 되고 다른곳이면 6번에서 말한대로 해당 경로로 변경)
  8. 다운받은 압축파일 풀면 나오는 android-chrome-96x96.png 파일도 내 워드프레스에 올림 (루트에 올렸으면 그냥 하면 되고 미디어나 다른곳에 올렸으면 7번에 site.webmanifest 을 업로드 하기 전에 메모장 같은걸로 열어서
    "src": "/android-chrome-96x96.png",
    부분을 앞서 업로드한 경로로 변경하고 저장하고 올려야함.
    "src": "https://님 사이트 주소/wp-content/uploads/android-chrome-96x96.png",
    이런식으로
  9. 끝. 폰 켜서 홈화면 추가 해보면 아이콘 뜸. 사이트에서 단축 이름 설정했으면 이름도 그렇게 뜸

아래는 설명과 핵심 원리임. 튜토리얼만 필요한 사람은 안 봐도 됨.

다들 뻘소리만 하고 있어서 핵심만 말함.

안드로이드 홈화면 아이콘 추가하는거 굉장히 번거롭고 속도나 여러면에서 단점밖에 없긴 함.

근데 어쨌든 하고싶은데 다들 헛소리만 하니까 결국 방법은 알아내서 적용해서 성공까지 했음.

그러나 개꿀몬 아카이브에선 0.001초라도 빨리 로드되기 위해서 그냥 안쓰기로 함.

근데 필요한 사람을 위해서 정리함.

우선 https://realfavicongenerator.net/ 접속해서 파비콘 세트 만듬. 70px 이상이어야 작동함

근데 안드로이드 크롬 홈화면 아이콘은 96×96 이상이어야 작동됨. 줄여가면서 다 테스트 해봄. 그니까 그냥 애초에 96×96 짜리로 ㄱ

만들어지고 나면 별 쓸모없는 헛짓거리 다하시오 시키는데 우리가 원하는건 오직 하나 안드로이드 홈화면 아이콘임.

딱 안드로이드 홈화면 아이콘을 하려면 필수 조건은 딱 3개

  1. 96×96 크기의 jpg/png가 필요함. 그냥 png로 ㄱ
  2. 사이트 헤더에 <link rel="manifest" href="/site.webmanifest"> 속성이 있어야함.
  3. 2번의 속성대로 site.webmanifest 파일이 내 워드프레스에 업로드 되어 있어야함.

이 세 가지가 핵심임. 이거 세개만 하면 바로 홈화면 등록할때 아이콘 나옴 개뻘짓 안해도됨.

위의 사이트에서 만들고 Download your package: ‘Favicon package’ 부분 눌러서 다운받아서 압축풀면 그 안에 site.webmanifest 라는 파일이 딸려오는데 그걸 쓰면 됨.

이걸 메모장 같은걸로 열면 "src": "/android-chrome-96x96.png", 부분에 주소를 내가 원하는 경로로 바꿀수도 있음. 근데 96×96 이어야함(이상인지는 모르겠으나 이하는 확실히 안됨. 가로세로 비율 달라도 안 될듯?) 안그러면 인식못함.

아래는 혹시 저 사이트 가서 말고 직접 만들고 싶은 사람 있을까봐 site.webmanifest 만드는법 알려줌.

텍스트 아무거나 만들어서 안에 내용 넣음

{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

그대로 복사해서 붙여넣고 해당 파일명을 site.webmanifest 로 바꿔주면 됨. 확장자 txt 이런거 없이 그냥 딱 저 이름 그대로 여야함.