개꿀몬(GKKmon)물론 정말 언더해서 고려할 필요가 없는 극단적인 환경도 존재하지만, 이런 경우는 지나치게 비효율적이고 사용되지도 않으니 논외로 하겠다.
앞서 말한 경우를 제외하면 직접 이것저것 다 사용해본 결과 아래의 방법이 가장 많은 기기에서 가장 효율적으로 가장 안정적으로 파비콘이 작동했다.
파비콘 만들기 튜토리얼
- 파비콘 생성 사이트 https://realfavicongenerator.net/로 이동한다.
- 사이트 우측에 보이는 ‘Select your Favicon image’를 클릭해 파비콘을 생성할 원본 이미지를 업로드한다. 설명에 최적의 결과를 얻으려면 260×260 이상 이미지를 사용하라고 하는데, 직접 사용해본 결과 512×512 크기의 PNG 원본 파일을 사용하면 모든것이 완벽하다.
- 그럼 잠시 후 업로드한 이미지를 활용해 최적화된 파비콘 세팅이 생성된다.
- 설정을 모두 완료했으면 하단의 ‘Generate your Favicons and HTML code’ 버튼을 눌러 코드를 생성한다.
- 마찬가지로 잠시 기다리면 세팅에 맞는 파비콘이 생성된다. ‘1. ownload your package’ 우축의 ‘Favicon package’ 버튼을 클릭해 생성된 파비콘 패키지를 다운받는다.
- 다운받은 파일을 압축 해제하고, 그 폴더 안에 있는 파일들을 워드프레스 루트 폴더에 집어넣는다. 경로는 라이트세일 워드프레스 기준 ‘/opt/bitnami/apps/wordpress/htdocs’ 이다.
- 그리고 ‘3. Insert the following code in the <head> section of your pages:’ 부분에 있는 검정색 코드를 복사해 워드프레스의 경우 ‘테마 디자인 → Theme Editor → header.php’ 즉 ‘header’에
<head></head>사이에 이 코드를 집어넣고 적용한다. - 모든 과정이 완료되었다. 제대로 파비콘이 적용되었는지 확인하려면 파비콘 확인 페이지 https://realfavicongenerator.net/favicon_checker에 사이트 주소를 집어넣고 체크해보면 된다. (http, https 선택 주의)
이 메뉴에서 우측의 ‘Add a solid…’ 로 선택하는 메뉴를 골라 직접 ‘#ffffff’ 값을 변경한다던지 해서 배경색 등을 변경할 수 있고, 각 환경에 맞게 입맛대로 설정이 가능하다. 영어가 어렵다면 크롬 우클릭 → 한국어로 번역 기능을 사용해서 원하는 설정을 할 수 있도록 하자. 만약 잘 모르겠으면 기본 세팅 그대로 진행하는것을 추천한다.
Im.Code