메뉴 닫기

모든 기기와 환경에서 보이는 웹표준 파비콘 만들기

물론 정말 언더해서 고려할 필요가 없는 극단적인 환경도 존재하지만, 이런 경우는 지나치게 비효율적이고 사용되지도 않으니 논외로 하겠다.
앞서 말한 경우를 제외하면 직접 이것저것 다 사용해본 결과 아래의 방법이 가장 많은 기기에서 가장 효율적으로 가장 안정적으로 파비콘이 작동했다.

    파비콘 만들기 튜토리얼

  1. 파비콘 생성 사이트 https://realfavicongenerator.net/로 이동한다.
  2. 사이트 우측에 보이는 ‘Select your Favicon image’를 클릭해 파비콘을 생성할 원본 이미지를 업로드한다. 설명에 최적의 결과를 얻으려면 260×260 이상 이미지를 사용하라고 하는데, 직접 사용해본 결과 512×512 크기의 PNG 원본 파일을 사용하면 모든것이 완벽하다.
  3. 모든 기기와 환경에서 보이는 웹표준 파비콘 만들기-1

  4. 그럼 잠시 후 업로드한 이미지를 활용해 최적화된 파비콘 세팅이 생성된다.
  5. 모든 기기와 환경에서 보이는 웹표준 파비콘 만들기-2
    이 메뉴에서 우측의 ‘Add a solid…’ 로 선택하는 메뉴를 골라 직접 ‘#ffffff’ 값을 변경한다던지 해서 배경색 등을 변경할 수 있고, 각 환경에 맞게 입맛대로 설정이 가능하다. 영어가 어렵다면 크롬 우클릭 → 한국어로 번역 기능을 사용해서 원하는 설정을 할 수 있도록 하자. 만약 잘 모르겠으면 기본 세팅 그대로 진행하는것을 추천한다.

  6. 설정을 모두 완료했으면 하단의 ‘Generate your Favicons and HTML code’ 버튼을 눌러 코드를 생성한다.
  7. 마찬가지로 잠시 기다리면 세팅에 맞는 파비콘이 생성된다. ‘1. ownload your package’ 우축의 ‘Favicon package’ 버튼을 클릭해 생성된 파비콘 패키지를 다운받는다.
  8. 다운받은 파일을 압축 해제하고, 그 폴더 안에 있는 파일들을 워드프레스 루트 폴더에 집어넣는다. 경로는 라이트세일 워드프레스 기준 ‘/opt/bitnami/apps/wordpress/htdocs’ 이다.
  9. 그리고 ‘3. Insert the following code in the <head> section of your pages:’ 부분에 있는 검정색 코드를 복사해 워드프레스의 경우 ‘테마 디자인 → Theme Editor → header.php’ 즉 ‘header’에 <head></head> 사이에 이 코드를 집어넣고 적용한다.
  10. 모든 과정이 완료되었다. 제대로 파비콘이 적용되었는지 확인하려면 파비콘 확인 페이지 https://realfavicongenerator.net/favicon_checker에 사이트 주소를 집어넣고 체크해보면 된다. (http, https 선택 주의)
Posted in 지식(Knowledge), All

관련 콘텐츠(Related)

댓글 (정보 필수X)

이메일 구독 - Email Subs

최선을 다해 직접 만든 콘텐츠만 공유합니다.
We share the best content we have created.

이메일 구독 - Email Subs

최선을 다해 직접 만든 콘텐츠만 공유합니다.
We share the best content we have created.