2 min read

워드프레스 파비콘 설정(플러그인 X)

먼저

이 글에서는 요놈(파비콘이라 함)을 기본 워드프레스 모양에서 내가 원하는 대로 바꾸는 방법에 대 설명합니다.

image

플러그인을 쓰면 워드프레스가 무거워지고,
proxy 서버에 아이콘을 사용하려고 설정하면 관리하기가 귀찮아집니다.

워드프레스에는 간단하게 테마 폴더가 있는 곳에 아이콘 파일을 넣으면 간단하게 적용 가능합니다.


1. favicon.ico 만들기

뭐 여러 가지 방법이야 있겠지만 여기서 파비콘을 만들거나 만든 이미지를 변환하여 사용하면 됩니다.

파비콘 사이즈는 최소 16x16에서 최대 192x192까지 사용 가능하죠
(시스템마다 최대 해상도 값이 달라 32x32로 설정하는 게 무난합니다.)

💡
wordpress는 파비콘 확장자를 .ico 뿐만 아니라 .png 형식도 지원합니다.

2. 서버에 favicon.ico 업로드

ftp 또는 sftp를 통해 파일을 전송하면 됩니다.
cli 환경에 익숙하지 않다면 windows 환경에서는 winscp를 사용하여 간단하게 파일을 원격 서버로 이동시킬 수 있습니다.

위치는 테마 폴더에 위치하면됩니다.

/wp-content/themes/<내 테마>/favicon.ico

3. header.php 수정

마지막으로 사용 중인 테마의 header.php를 수정하면 끝

11 <?php?><!DOCTYPE html>
12 <!--[if IE 7]>
13 <html class="ie ie7" <?php language_attributes(); ?>>
14 <![endif]-->
15 <!--[if IE 8]>
16 <html class="ie ie8" <?php language_attributes(); ?>>
17 <![endif]-->
18 <!--[if !(IE 7) & !(IE 8)]><!-->
19 <html <?php language_attributes(); ?>>
20 <!--<![endif]-->
21 <head>
22 <meta charset="<?php bloginfo( 'charset' ); ?>" />
23 <meta name="viewport" content="width=device-width" />
24 <title><?php wp_title( '|', true, 'right' ); ?></title>
25 <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

수정할 위치는 title 바로 아래 줄(25번 줄)에 link 문을 넣어 파일을 지정하면 됩니다.

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />