브라우저의 제목 표시줄에 나타나는 아이콘을 파비콘(Favicon : Favorites icon)이라고 합니다. 파비콘이 있음으로서 브라우저 탭 간의 구분이 쉬워질 뿐만 아니라 사이트의 아이덴티티를 부각시킬 수 있습니다. 파비콘이 적용되지 않을 경우 SEO(Search Engine Optimization)에도 치명적일 수 있습니다.
파비콘은 보통 HTML 코드 삽입으로 추가됩니다. 아래 코드와 같이 <head> 태그 내에 삽입됩니다.
<head>
...
<link rel="shortcut icon" href="파비콘 경로">
...
</head> 파비콘 파일은 대개 홈페이지 경로의 최상위 디렉토리(/)에 위치하는 것이 좋으며, .ico 확장자 및 16×16, 32×32와 같은 정사각형 사이즈가 권장됩니다.
파비콘 파일은 장기간의 이미지 캐시로 저장될 수 있으므로 가급적이면 눈에 잘 보이도록 만들어야 합니다.
워드프레스에서는 위 방법처럼 코드 삽입이 어려울 수 있습니다. 테마를 적용하거나 업데이트를 하면서 코드가 지속적으로 변동될 수 있기 때문입니다.
워드프레스 관리자 패널의 외모 설정 내에 파비콘 설정이 있습니다. 아래 방법을 따라주세요:
먼저 ‘외모 – 사용자 정의하기’를 클릭해주세요.
사용자 정의하기 페이지가 열리면 좌측 메뉴의 ‘사이트 아이덴티티’ 를 클릭합니다.
여기서 ‘사이트 아이콘 – 이미지를 선택하세요’를 클릭하여 파일을 업로드할 수 있습니다. 여기에 있는 업로드를 사용하면 이미지를 512×512 이상의 크기를 사용해도 파비콘이 자동으로 만들어집니다. 또한 이 설정은 파비콘 뿐만 아니라 북마크, 앱 아이콘 등으로 나타납니다.
아래 사진처럼 적용된 모습에 대한 미리보기를 확인한 후 적용이 완료되면 상단에 ‘발행하기’ 를 클릭하여 저장을 완료합니다.
이렇게 하면 파비콘 변경이 정상적으로 완료됩니다.
일부 테마에는 테마 설정 내에 파비콘 설정이 있을 수 있습니다. 현재 설치되어 있는 테마의 옵션을 잘 살펴보세요.
위 두가지 방법으로도 적용되지 않는다면, 위의 HTML 코드 삽입과 유사한 방법으로 워드프레스 코드를 수정하는 방법이 있습니다.
테마가 설치되어 있는 디렉토리의 상위 경로에 보시면 header.php 라는 파일이 있을 것입니다. 이 파일을 수정해야 합니다.
아래 사진과 같이 <head> 태그 내에 아래 코드를 붙여넣어주세요.
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
다음으로 favicon.ico 파일을 웹 페이지 최상단 디렉토리에 업로드합니다.
저장 후 페이지를 새로고침하면 파비콘이 적용된 것을 확인할 수 있습니다. (적용되지 않는다면 브라우저의 쿠키 및 캐시를 삭제하고 다시 시도해보세요.)
리눅스 명령어 - kill, killall 리눅스 kill 명령어는 특정 프로세스를 종료해주는 명령어입니다. 백그라운드에서 실행되고 있는…
JavaScript는 역사가 긴 스크립트 프로그래밍 언어입니다. 세월이 흐르면서 많은 자바스크립트 표준이 만들어졌고, 현재는 많은 문법적…
NodeJS 테스트 프레임워크인 Mocha는 비동기 테스트를 지원합니다. 간혹 특정 테스트 스크립트를 작성하고 실행하면 아래와 같이…
언제부턴가 윈도우 11을 처음 설치할 때 마이크로소프트(Microsoft) 계정 로그인을 강제로 요구하게 되었습니다. 물론 마이크로소프트 계정이…
애플 에어팟 프로 2 (AirPods Pro 2) 케이스에는 스피커가 내장되어 있습니다. 그런데 간혹 아무 것도…
View Comments
아이콘이 적용이 안되요...ㅠㅠ