파비콘 적용 – 워드프레스, 크롬등에서 파비콘이 안보이는 이유와 해결 방법
파비콘 적용 – 워드프레스, 크롬등에서 파비콘이 안보이는 이유와 해결 방법
Favicon 너 대체 뭐니?
Favicon을 사용하면 웹 브라우저에 많은 탭이 열려있을 때, 사용자가 사이트를 쉽게 식별할 수 있습니다. 파비콘은 일반적으로 브라우저의 URL 바로 앞에 표시됩니다.
북마크, Google 자동 완성 결과 및 검색 기록에서 파비콘을 볼 수도 있습니다. 파비콘이 다른 브라우저에 표시될 수 있는 곳은 다음과 같습니다 .
파비콘은 사이트 브랜딩의 일부로 사용되는 아이콘으로 정의 할 수 있습니다. 파비콘은 브랜드 로고, 캐릭터, 로고의 일부 또는 브랜드가 속한 비즈니스 또는 산업의 유형을 나타내는 일반적인 이미지 일 수 있습니다.
이 포스팅에서는 파비콘이 표시되지 않는 원인과 이러한 문제를 해결하는 방법을 살펴보겠습니다.
Favicon을 올바르게 설치하는 방법
올바르게 렌더링하려면 파비콘을 올바르게 설치해야 합니다. 먼저 파비콘을 만듭니다. 이를 위해 사용할 수있는 파비콘 생성기가 많이 있습니다. 다음으로 사이트에 추가하십시오. 사이트의 기본 페이지에 설치하는 방법은 다음과 같습니다.
favicon.ico 파일을 사이트의 원하는 디렉토리에 업로드하십시오.
이 코드를 섹션에 삽입합니다. : <link rel=”shortcut icon” href = “images/favicon.ico”>
‘이미지’는 파비콘이 저장된 디렉토리로 대체되어야 합니다. ‘favicon.ico’을 아이콘 이름으로 바꾸어야 합니다.
rel 값은 ‘icon’, ‘apple-touch-icon’또는 ‘apple-touch-icon-precomposed’일 수도 있습니다.
href 값은 상대 경로 (파비콘이 저장된 파일 경로를 사용하는 경우) 또는 절대 URL (도메인을 사용하고 https://abc.com/favicon에서와 같이 URL에 파비콘 파일을 추가하는 위치) 일 수 있습니다. .ico)
Favicon이 나타나지 않는 일반적인 이유
감사 도구를 사용하여, 파비콘이 제대로 표시되는지 확인하십시오.
파비콘이 표시되지 않는 일반적인 이유와 문제 해결 방법은 다음과 같습니다.
구문 오류
파비콘을 구현하는데 사용하는 코드의 간단한 구문 오류로 인해, 파비콘이 표시되지 않을 수 있습니다. 다음은 그 예입니다.
<link rel=”icon” type= “image/x-icon” href =”https://www.abc/com/drive/uploads/2019/10/favicon.ico/>
위의 코드에는 1 개의 간단한 구문 오류가 있습니다.
href 링크에 닫는 따옴표가 없습니다.
브라우저가 파비콘이 없는 사이트로 캐시했습니다.
사이트에 파비콘을 추가하면, 브라우저가 파비콘 없이 사이트를 ‘저장’했기 때문에 표시되지 않을 수 있습니다. 브라우저에서 캐시를 지우거나 다른 브라우저를 사용해야 합니다.
또는 www.abc.com/favicon.ico에서와 같이 /favicon.ico를 도메인 이름에 추가하십시오.
잘못된 파일 경로
파비콘의 파일 경로가 올바른지 확인해야 합니다. 이미지 폴더에 아이콘이 있는 경우 아이콘 이름에 따라 파일 경로에 /images/favicon.ico가 있는지 확인합니다.
CSS와 아이콘이 ‘동일한 수준’이라는 점에서 형제 인 경우 href 에서와 같이 파비콘의 파일 이름 앞에 슬래시가 없는지 확인하십시오.
href =“favicon.ico”
브라우저는 로컬 인 경우 파비콘을 표시하지 않습니다.
Chrome 및 Safari와 같은 브라우저는 로컬 인 경우 파비콘을 표시하지 않습니다 (서버에 업로드되지 않은 경우). 예를 들어 Chrome은 다운로드 폴더에있는 경우에만 파비콘을 표시 할 수 있습니다.
파비콘을 만드는 링크가 올바른 위치에 없습니다.
올바른 위치에 파비콘을 추가하려면, 링크를 잘 배치하는 것이 중요합니다. 웹 페이지의 헤더 섹션에 배치해야 합니다. 본문에 배치하면 일부 브라우저에서 작동 할 수 있지만, Chrome과 같은 브라우저에서는 로드되지 않습니다.
파비콘의 파일 이름 기본 파일 이름입니다.
때로는 파비콘이 표시되지 않는 이유는 파일 이름을 변경하지 않았기 때문입니다. 이에 대한 간단한 수정은 기본값인 ‘favicon.ico’에서 favicon 파일의 이름을 바꾸는 것입니다.
이제 크롬 브라우저 및 워드프레스에서 파비콘이 표시되지 않는 이유에 대해 살펴 보겠습니다.
파비콘이 Chrome(크롬 브라우저)에서 안보이는 경우 및 파비콘 적용 방법
파비콘이 Chrome에 안보이는 이유는 다음과 같습니다.
파비콘 사이즈가 틀릴 경우
Google에는 사이트에 파비콘을 추가 할 때, 따라야할 특정 가이드라인이 있다고 언급했습니다 . 그중 하나는 아이콘 크기가 48의 배수여야 하고, 16×16 사이즈가 될 수 없다는 것입니다. 아이콘 크기가 16×16이면 표시되지 않을수 있습니다.
콘텐츠 관리 시스템 (CMS)에는 권장하는 특정 크기도 있습니다. 워드프레스에서는 512 x 512 사이즈를 권장합니다. 이러한 CMS는 다양한 시나리오에 맞게 파비콘의 크기를 조정할 수 있습니다. 예를 들어 북마크에는 더 큰 크기가 필요하지만, 모바일에는 더 작은 크기가 필요할 수 있습니다.
이 문서에서는 가장 적합한 다양한 파비콘 크기 와 더 이상 사용되지 않는 크기를 살펴 봅니다.
다양한 파비콘 크기 탐색
루트 디렉토리에 favicon 파일이 있지만 ‘가져 오기’링크를 추가하지 않음
favicon 파일이 루트 디렉토리에 있다고 해서 웹 사이트가 로드될 때, 자동으로 업로드 된다는 의미는 아닙니다. 헤더에 다음 링크가 있는지 확인하십시오.
<link rel = “icon” href = ”favicon.ico” type = “image/x-icon” />
<link rel = “shortcut icon” href = “favicon.ico” type = “image/x-icon” />
파비콘을 사이트로 가져올 것입니다.
파비콘이 워드프레스에서 안보이는 경우 및 파비콘 적용 방법
파비콘이 WordPress에 표시되지 않는 이유는, 대체적으로 다음과 같습니다.
Customizer에서 사이트 아이콘은 AMP 파비콘을 의미합니다.
Customizer를 사용하여 맞춤 파비콘을 업로드하는 경우, AMP를 사용하는 페이지용이므로 작동하지 않을 수 있습니다.
이 문제를 해결하려면 먼저 Customizer를 사용하여 업로드 한 파비콘을 제거해야 합니다.
그런다음 ‘ Favicon by RealFavicon Generator’ 라는 플러그인을 설치해야합니다 . 이 플러그인을 사용하면 파비콘으로 사용하려는 이미지를 업로드 할 수 있습니다. png 또는 jpg 형식이어야 합니다.
플러그인을 사용하면 .ico 파일로도 변환할 수 있습니다.
<head>와 </head> 사이에 본문 요소를 추가하는 플러그인이 있을 수 있습니다.
예) Insert Headers and Footers 플러그인
섹션에 본문 요소를 만드는 플러그인이 없는지 확인해야 합니다. head 섹션을 살펴보고, body 섹션에 속하는 코드가 보이면 WordPress 사이트에 favicon을 추가할 때 설치 한 플러그인을 확인합니다. 비활성화하거나 제거하는 것도 방법일 수 있습니다.
.ico가 아닌 경우 이미지 유형을 지정하지 않았습니다.
아이콘이 .png 형식 인 경우 다음과 같이 유형을 포함하도록 파비콘을 업로드하는 데 사용하는 링크를 편집해야합니다.
<link rel = “icon” href = “yourpath” type =”image/png”>
또한 .ico 파일을 사이트의 루트에 추가해야합니다.
WordPress 사이트에 파비콘을 추가하는 방법을 알아 봅니다 .
파비콘 적용 방법 및 결론
파비콘 적용이 검색엔진최적화에 속하지는 않습니다. 하지만 Favicon은 브랜드 일관성을 유지하는 데 도움이 됩니다.
예를 들어 여러 탭이 열려있을 때 사용자가 한눈에 여러 사이트를 식별해야 하는 경우 사이트를 쉽게 식별할 수 있습니다. 재 방문자 및 고객에게 좋습니다.
사용자가 사이트를 북마크 하면 파비콘을 통해 사이트를 쉽게 식별할 수 있습니다.
파비콘 적용이 항상 순조롭게 진행되는 것은 아니며, 파비콘이 나타나지 않는 일반적인 이유에 대해서 알아봤습니다. 워드프레스와 같은 특정 콘텐츠 관리 시스템 (CMS)을 사용할 때 발생할 수 있는 문제도 조사했습니다. 대부분의 문제는 생각보다 간단하며, 쉽게 수정할 수 있습니다.
차근차근 따라해보시기 바랍니다.
같이 보시면 좋은 글
주택청약 1순위 조건 및 신청방법 정리
자동차보험료비교견적사이트 왜 만기전에 비교해봐야 될까?
신혼부부 전세자금대출 한도 및 1금융권 전세대출 상품 비교
다이렉트 자동차보험과 오프라인 자동차보험의 할인율 차이는?
2차전지 관련주 및 전기차 배터리 서플라이체인 수혜주 총정리