파비콘 적용 – 워드프레스, 크롬등에서 파비콘이 안보이는 이유와 해결 방법

&NewLine;<p style&equals;"font-size&colon;23px"><strong>파비콘 적용 &&num;8211&semi; 워드프레스&comma; 크롬등에서 파비콘이 안보이는 이유와 해결 방법<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading" id&equals;"h-favicon">Favicon 너 대체 뭐니&quest;<&sol;h2>&NewLine;&NewLine;&NewLine;<div class&equals;"wp-block-image">&NewLine;<figure class&equals;"aligncenter size-large"><img src&equals;"https&colon;&sol;&sol;en4u&period;co&period;kr&sol;wp-content&sol;uploads&sol;2021&sol;02&sol;파비콘-1024x549&period;png" alt&equals;"워드프레스 파비콘 적용 방법 및 크롬에서 파비콘 적용 방법" class&equals;"wp-image-9754" title&equals;"파비콘 적용 방법"&sol;><&sol;figure>&NewLine;<&sol;div>&NewLine;&NewLine;&NewLine;<p>Favicon을 사용하면 웹 브라우저에 많은 탭이 열려있을 때&comma; 사용자가 사이트를 쉽게 식별할 수 있습니다&period; 파비콘은 일반적으로 브라우저의 URL 바로 앞에 표시됩니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>북마크&comma; Google 자동 완성 ê²°ê³¼ 및 검색 기록에서 파비콘을 ë³¼ 수도 있습니다&period; 파비콘이 다른 브라우저에 표시될 수 있는 곳은 다음과 같습니다 &period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p><a href&equals;"https&colon;&sol;&sol;searchadvisor&period;naver&period;com&sol;guide&sol;markup-favicon" target&equals;"&lowbar;blank">파비콘<&sol;a>은 사이트 브랜딩의 일부로 사용되는 아이콘으로 정의 할 수 있습니다&period; 파비콘은 브랜드 로고&comma; 캐릭터&comma; 로고의 일부 또는 브랜드가 속한 비즈니스 또는 산업의 유형을 나타내는 일반적인 이미지 일 수 있습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>이 포스팅에서는 파비콘이 표시되지 않는 원인과 이러한 문제를 해결하는 방법을 살펴보겠습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading" id&equals;"h-favicon-1">Favicon을 올바르게 설치하는 방법<&sol;h2>&NewLine;&NewLine;&NewLine;&NewLine;<p>올바르게 렌더링하려면 파비콘을 올바르게 설치해야 합니다&period; 먼저 파비콘을 만듭니다&period; 이를 위해 사용할 수있는 파비콘 생성기가 많이 있습니다&period; 다음으로 사이트에 추가하십시오&period; 사이트의 기본 페이지에 설치하는 방법은 다음과 같습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>favicon&period;ico 파일을 사이트의 원하는 디렉토리에 업로드하십시오&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>이 코드를 섹션에 삽입합니다&period; &colon; &lt&semi;link rel&equals;”shortcut icon” href &equals; &OpenCurlyDoubleQuote;images&sol;favicon&period;ico”&gt&semi;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>&&num;8216&semi;이미지&&num;8217&semi;는 파비콘이 저장된 디렉토리로 대체되어야 합니다&period; &&num;8216&semi;favicon&period;ico&&num;8217&semi;을 아이콘 이름으로 바꾸어야 합니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>rel 값은 &&num;8216&semi;icon&&num;8217&semi;&comma; &&num;8216&semi;apple-touch-icon&&num;8217&semi;또는 &&num;8216&semi;apple-touch-icon-precomposed&&num;8217&semi;일 수도 있습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>href 값은 상대 경로 &lpar;파비콘이 저장된 파일 경로를 사용하는 경우&rpar; 또는 절대 URL &lpar;도메인을 사용하고 https&colon;&sol;&sol;abc&period;com&sol;favicon에서와 같이 URL에 파비콘 파일을 추가하는 위치&rpar; 일 수 있습니다&period; &period;ico&rpar;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading" id&equals;"h-favicon-2">Favicon이 나타나지 않는 일반적인 이유<&sol;h2>&NewLine;&NewLine;&NewLine;&NewLine;<p>감사 도구를 사용하여&comma; 파비콘이 제대로 표시되는지 확인하십시오&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>파비콘이 표시되지 않는 일반적인 이유와 문제 해결 방법은 다음과 같습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h3 class&equals;"wp-block-heading" id&equals;"h-">구문 오류<&sol;h3>&NewLine;&NewLine;&NewLine;&NewLine;<p>파비콘을 구현하는데 사용하는 코드의 간단한 구문 오류로 인해&comma; 파비콘이 표시되지 않을 수 있습니다&period; 다음은 ê·¸ 예입니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"has-text-align-center has-cyan-bluish-gray-background-color has-background">&lt&semi;link rel&equals;”icon” type&equals; &OpenCurlyDoubleQuote;image&sol;x-icon” href &equals;”https&colon;&sol;&sol;www&period;abc&sol;com&sol;drive&sol;uploads&sol;2019&sol;10&sol;favicon&period;ico&sol;&gt&semi;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>위의 코드에는 1 개의 간단한 구문 오류가 있습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>href 링크에 닫는 따옴표가 없습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h3 class&equals;"wp-block-heading" id&equals;"h--1">브라우저가 파비콘이 없는 사이트로 캐시했습니다&period;<&sol;h3>&NewLine;&NewLine;&NewLine;&NewLine;<p>사이트에 파비콘을 추가하면&comma; 브라우저가 파비콘 없이 사이트를 &&num;8216&semi;저장&&num;8217&semi;했기 때문에 표시되지 않을 수 있습니다&period; 브라우저에서 캐시를 지우거나 다른 브라우저를 사용해야 합니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>또는 www&period;abc&period;com&sol;favicon&period;ico에서와 같이 &sol;favicon&period;ico를 도메인 이름에 추가하십시오&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h3 class&equals;"wp-block-heading" id&equals;"h--2">잘못된 파일 경로<&sol;h3>&NewLine;&NewLine;&NewLine;&NewLine;<p>파비콘의 파일 경로가 올바른지 확인해야 합니다&period; 이미지 폴더에 아이콘이 있는 경우 아이콘 이름에 따라 파일 경로에 &sol;images&sol;favicon&period;ico가 있는지 확인합니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>CSS와 아이콘이 &&num;8216&semi;동일한 수준&&num;8217&semi;이라는 점에서 형제 인 경우 href 에서와 같이 파비콘의 파일 이름 앞에 슬래시가 없는지 확인하십시오&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>href &equals;&OpenCurlyDoubleQuote;favicon&period;ico”<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h3 class&equals;"wp-block-heading" id&equals;"h--3">브라우저는 로컬 인 경우 파비콘을 표시하지 않습니다&period;<&sol;h3>&NewLine;&NewLine;&NewLine;&NewLine;<p>Chrome 및 Safari와 같은 브라우저는 로컬 인 경우 파비콘을 표시하지 않습니다 &lpar;서버에 업로드되지 않은 경우&rpar;&period; 예를 들어 Chrome은 다운로드 폴더에있는 경우에만 파비콘을 표시 할 수 있습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h3 class&equals;"wp-block-heading" id&equals;"h--4">파비콘을 만드는 링크가 올바른 위치에 없습니다&period;<&sol;h3>&NewLine;&NewLine;&NewLine;&NewLine;<p>올바른 위치에 파비콘을 추가하려면&comma; 링크를 잘 배치하는 것이 중요합니다&period; 웹 페이지의 헤더 섹션에 배치해야 합니다&period; 본문에 배치하면 일부 브라우저에서 작동 할 수 있지만&comma; Chromeê³¼ 같은 브라우저에서는 로드되지 않습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h3 class&equals;"wp-block-heading" id&equals;"h--5">파비콘의 파일 이름 &ZeroWidthSpace;&ZeroWidthSpace;기본 파일 이름입니다&period;<&sol;h3>&NewLine;&NewLine;&NewLine;&NewLine;<p>때로는 파비콘이 표시되지 않는 이유는 파일 이름을 변경하지 않았기 때문입니다&period; 이에 대한 간단한 수정은 기본값인 &&num;8216&semi;favicon&period;ico&&num;8217&semi;에서 favicon 파일의 이름을 바꾸는 것입니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;72px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<p>이제 <a href&equals;"https&colon;&sol;&sol;www&period;google&period;com&sol;chrome&sol;" target&equals;"&lowbar;blank">크롬 브라우저<&sol;a> 및 워드프레스에서 파비콘이 표시되지 않는 이유에 대해 살펴 보겠습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading" id&equals;"h-chrome">파비콘이 Chrome&lpar;크롬 브라우저&rpar;에서 안보이는 경우 및 파비콘 적용 방법<&sol;h2>&NewLine;&NewLine;&NewLine;<div class&equals;"wp-block-image">&NewLine;<figure class&equals;"aligncenter size-large"><img src&equals;"https&colon;&sol;&sol;en4u&period;co&period;kr&sol;wp-content&sol;uploads&sol;2021&sol;02&sol;크롬-파비콘-1024x539&period;jpg" alt&equals;"크롬에서 파비콘 적용 방법" class&equals;"wp-image-9752" title&equals;"크롬 파비콘 적용"&sol;><&sol;figure>&NewLine;<&sol;div>&NewLine;&NewLine;&NewLine;<p>파비콘이 Chrome에 안보이는 이유는 다음과 같습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h3 class&equals;"wp-block-heading" id&equals;"h--6">파비콘 사이즈가 틀릴 경우<&sol;h3>&NewLine;&NewLine;&NewLine;&NewLine;<p>Google에는 사이트에 파비콘을 추가 할 때&comma; 따라야할 특정 가이드라인이 있다고 언급했습니다 &period; 그중 하나는 아이콘 크기가 48의 배수여야 하고&comma; 16&&num;215&semi;16 사이즈가 될 수 없다는 것입니다&period; 아이콘 크기가 16&&num;215&semi;16이면 표시되지 않을수 있습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>콘텐츠 관리 시스템 &lpar;CMS&rpar;에는 권장하는 특정 크기도 있습니다&period; <a href&equals;"https&colon;&sol;&sol;ko&period;wordpress&period;org&sol;" target&equals;"&lowbar;blank">워드프레스<&sol;a>에서는 512 x 512 사이즈를 권장합니다&period; 이러한 CMS는 다양한 시나리오에 맞게 파비콘의 크기를 조정할 수 있습니다&period; 예를 들어 북마크에는 더 큰 크기가 필요하지만&comma; 모바일에는 더 작은 크기가 필요할 수 있습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>이 문서에서는 가장 적합한 다양한 파비콘 크기 와 더 이상 사용되지 않는 크기를 살펴 봅니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>다양한 파비콘 크기 탐색<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h3 class&equals;"wp-block-heading" id&equals;"h-favicon-3">루트 디렉토리에 favicon 파일이 있지만 &&num;8216&semi;가져 오기&&num;8217&semi;링크를 추가하지 않음<&sol;h3>&NewLine;&NewLine;&NewLine;&NewLine;<p>favicon 파일이 루트 디렉토리에 있다고 해서 웹 사이트가 로드될 때&comma; 자동으로 업로드 된다는 의미는 아닙니다&period; 헤더에 다음 링크가 있는지 확인하십시오&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"has-cyan-bluish-gray-background-color has-background">&lt&semi;link rel &equals; &OpenCurlyDoubleQuote;icon” href &equals; ”favicon&period;ico” type &equals; &OpenCurlyDoubleQuote;image&sol;x-icon” &sol;&gt&semi;<br>&lt&semi;link rel &equals; &OpenCurlyDoubleQuote;shortcut icon” href &equals; &OpenCurlyDoubleQuote;favicon&period;ico” type &equals; &OpenCurlyDoubleQuote;image&sol;x-icon” &sol;&gt&semi;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>파비콘을 사이트로 가져올 것입니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading" id&equals;"h--7">파비콘이 워드프레스에서 안보이는 경우 및 파비콘 적용 방법<&sol;h2>&NewLine;&NewLine;&NewLine;<div class&equals;"wp-block-image">&NewLine;<figure class&equals;"aligncenter size-large"><img src&equals;"https&colon;&sol;&sol;en4u&period;co&period;kr&sol;wp-content&sol;uploads&sol;2021&sol;02&sol;워드프레스-파비콘-1024x536&period;png" alt&equals;"워드프레스에서 파비콘 적용 방법" class&equals;"wp-image-9751" title&equals;"워드프레스 파비콘 적용"&sol;><figcaption class&equals;"wp-element-caption">워드프레스에서 파비콘이 보이지 않을때<&sol;figcaption><&sol;figure>&NewLine;<&sol;div>&NewLine;&NewLine;&NewLine;<p>파비콘이 WordPress에 표시되지 않는 이유는&comma; 대체적으로 다음과 같습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h3 class&equals;"wp-block-heading" id&equals;"h-customizer-amp">Customizer에서 사이트 아이콘은 AMP 파비콘을 의미합니다&period;<&sol;h3>&NewLine;&NewLine;&NewLine;&NewLine;<p>Customizer를 사용하여 맞춤 파비콘을 업로드하는 경우&comma; AMP를 사용하는 페이지용이므로 작동하지 않을 수 있습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>이 문제를 해결하려면 먼저 Customizer를 사용하여 업로드 한 파비콘을 제거해야 합니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>그런다음 &&num;8216&semi; Favicon by RealFavicon Generator&&num;8217&semi; 라는 플러그인을 설치해야합니다 &period; 이 플러그인을 사용하면 파비콘으로 사용하려는 이미지를 업로드 할 수 있습니다&period; png 또는 jpg 형식이어야 합니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>플러그인을 사용하면 &period;ico 파일로도 변환할 수 있습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>&lt&semi;head&gt&semi;와 &lt&semi;&sol;head&gt&semi; 사이에 본문 요소를 추가하는 플러그인이 있을 수 있습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>예&rpar; Insert Headers and Footers 플러그인<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>섹션에 본문 요소를 만드는 플러그인이 없는지 확인해야 합니다&period; head 섹션을 살펴보고&comma; body 섹션에 속하는 코드가 보이면 WordPress 사이트에 favicon을 추가할 때 설치 한 플러그인을 확인합니다&period; 비활성화하거나 제거하는 것도 방법일 수 있습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>&period;ico가 아닌 경우 이미지 유형을 지정하지 않았습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p><br>아이콘이 &period;png 형식 인 경우 다음과 같이 유형을 포함하도록 파비콘을 업로드하는 데 사용하는 링크를 편집해야합니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>&lt&semi;link rel &equals; &OpenCurlyDoubleQuote;icon” href &equals; &OpenCurlyDoubleQuote;yourpath” type &equals;”image&sol;png”&gt&semi;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>또한 &period;ico 파일을 사이트의 루트에 추가해야합니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>WordPress 사이트에 파비콘을 추가하는 방법을 알아 봅니다 &period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading">파비콘 적용 방법 및 ê²°ë¡ <&sol;h2>&NewLine;&NewLine;&NewLine;&NewLine;<p>파비콘 적용이 <a href&equals;"https&colon;&sol;&sol;en4u&period;co&period;kr&sol;&percnt;ea&percnt;b2&percnt;80&percnt;ec&percnt;83&percnt;89&percnt;ec&percnt;97&percnt;94&percnt;ec&percnt;a7&percnt;84&percnt;ec&percnt;b5&percnt;9c&percnt;ec&percnt;a0&percnt;81&percnt;ed&percnt;99&percnt;94-seo&sol;">검색엔진최적화<&sol;a>에 속하지는 않습니다&period; 하지만 Favicon은 브랜드 일관성을 유지하는 데 도움이 됩니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>예를 들어 여러 탭이 열려있을 때 사용자가 한눈에 여러 사이트를 식별해야 하는 경우 사이트를 쉽게 식별할 수 있습니다&period; 재 방문자 및 고객에게 좋습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>사용자가 사이트를 북마크 하면 파비콘을 통해 사이트를 쉽게 식별할 수 있습니다&period;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p>파비콘 적용이 항상 순조롭게 진행되는 것은 아니며&comma; 파비콘이 나타나지 않는 일반적인 이유에 대해서 알아봤습니다&period; 워드프레스와 같은 특정 콘텐츠 관리 시스템 &lpar;CMS&rpar;을 사용할 때 발생할 수 있는 문제도 조사했습니다&period; 대부분의 문제는 생각보다 간단하며&comma; 쉽게 수정할 수 있습니다&period;<br>차근차근 따라해보시기 바랍니다&period;<&sol;p>&NewLine;