• 이윰빌더 시즌 4
  • 테마/스킨상점
이윰

팁 & 테크

favicon 아이콘 이미지 삽입하기

본문

 

[단계 1] favicon 이미지 원본 로고를 배경없이 최소 192x192 픽셀 크기로 만들어 png 형식으로 저장한다.

 

[단계 2] https://www.favicon-generator.org/ 에서 아래 그림의 Create favicon 버튼을 이용하여 favicon 아이콘을 생성한다.

 

[단계 3] 다음 그림의 (1)번 버튼을 클릭하여 생성된 아이콘 Zip 파일을 다운로드하고 favicon이라는 이름의 디렉토리에 모두 압축을 푼다. favicon.ico 이외에 수많은 파일들이 자동생성되는데, 이것들은 각종 모바일기기들을 위한 것이기에 모두 업로드하는 편이 나중을 위하여 좋습니다.

 

[단계 4] 위 그림의 (2)번의 html 태그를 홈페이지 상단 <head>와 </head> 사이에 넣으면 됩니다. 제가 Document Root 디렉토리가 지저분한 것을 싫어해서... 저는 href="/favicon/favicon-16x16.png"의 형태로 업로드합니다. 다음 두 줄을 제일 첫째줄에 추가합니다.

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" type="image/x-icon">

잊지 말 것은 favicon.ico는 favicon 디렉토리 아래가 아닌 Document Root에 업로드한다는 사실입니다. 이는  favicon의 호환성을 극대화하기 위한 것입니다.

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

 

[단계 5] favicon 디렉토리 안의 browserconfig.xml의 File Path를 변경하여 저장합니다.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile><square70x70logo src="/favicon/ms-icon-70x70.png"/><square150x150logo src="/favicon/ms-icon-150x150.png"/><square310x310logo src="/favicon/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

 

[단계 6]  FTP를 이용하여 favicon 디렉토리와 favicon.ico 파일을 웹서버로 업로드합니다.

 

[단계 7] 이제 드디어 이윰빌더에 포함된 기본 테마인 eb4_basic 파일을 수정할 차례입니다. 55번째 줄를 찾아 </head> 앞에 삽입하면 됩니다.

/theme/eb4_basic/head.sub.html.php

52 <?php
53 if (!defined('G5_IS_ADMIN')) echo $config['cf_add_script'];
54 ?>
55
56 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
57 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
58 <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
59 <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
60 <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
61 <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
62 <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
63 <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
64 <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
65 <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
66 <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
67 <link rel="icon" type="image/png" sizes="192x192"  href="/favicon/android-icon-192x192.png">
68 <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
69 <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
70 <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
71 <link rel="manifest" href="/favicon/manifest.json" />
72 <meta name="msapplication-TileColor" content="#ffffff" />
73 <meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png" />
74 <meta name="theme-color" content="#ffffff" />
75
76 </head>
77 <body<?php echo isset($g5['body_script']) ? $g5['body_script'] : ''; ?>>

단, eb4_basic 테마를 수정하게 되면 추후 패치 업데이트할 때, 잊지 말고 다시 수정해 주어야 합니다. 물론, 본인이 직접 만든 테마에 적용한다면 그런 걱정은 없을 것입니다. ^ ^

이제 웹브라우저를 다시고침(F5)하면 짜잔~   예쁜 favicon 아이콘이 보일 것입니다.

행운을 빕니다. 이모티콘

2
로그인 후 추천 또는 비추천하실 수 있습니다.
추천한 회원 보기
회원사진
포인트 7,242
경험치 988
[레벨 3] - 진행률 65%
가입일 :
2018-10-16 07:26:31
서명 :
미입력
자기소개 :
Web Application Programmer with PHP and ASP - CodeIgniter, Laravel, Joomla, WordPress - ASP/C# .NET, .NET Core

최신글이 없습니다.

최신글이 없습니다.

댓글목록 3

닭발은세개님의 댓글

회원사진
팁 감사합니다. 저도 한 일주일 전에 적용했는데요.
특이하게 저의 경우는 최신글 타이틀 폰트 사이즈가 작아지는 문제가 있어서
저 태그 중 몇 줄을 빼고 사용 중입니다. ㅎㅎ

축하합니다. 첫댓글 포인트 49포인트를 획득하였습니다.

JamesShin님의 댓글

회원사진
삽입 위치가 중요합니다. 다른 CSS 파일들을 모두 로딩한 다음에 불러 주시면 말씀하신 문제가 발생하지 않습니다. 위에 보인 예와 같이, </head> 바로 앞에 넣는 것이 제일 안전합니다.

studyhaza님의 댓글

전체 21 건 - 1 페이지
제목
CharlesKWON 516 1 2021.06.30
풀림 2,090 0 2021.05.27
리니 1,547 0 2021.02.02
러너클레이 4,112 0 2020.05.01
greenpia1213 5,451 0 2019.09.10
greenpia1213 6,183 2 2019.09.05
꿈의세계 5,120 0 2019.06.11
용개뤼 5,273 1 2019.05.24
seodaewon 4,951 0 2019.03.27
inglabs 8,450 2 2019.03.04
cygz 6,208 0 2018.11.19
회원사진 JamesShin 6,630 3 2018.11.16
회원사진 JamesShin 7,114 0 2018.11.11
닥터캐빈 5,255 0 2018.11.08
회원사진 JamesShin 7,321 0 2018.11.02