위키 업데이트 연혁: 두 판 사이의 차이
태그: 모바일 편집 모바일 웹 편집 고급 모바일 편집 |
|||
(같은 사용자의 중간 판 13개는 보이지 않습니다) | |||
46번째 줄: | 46번째 줄: | ||
씨발... | 씨발... | ||
== 2025.02.21. == | |||
댓글 기능 추가. 어차피 사람도 안 오는데 댓글 삭제가 잘 안 되는게 무슨 상관이겠나. | |||
댓글 삭제는, 정확히는 마지막 하나의 댓글이 삭제가 안 되는 것으로 판명. 댓글 1을 올리고 지우면 1이 남아있고, 여기에 댓글 2를 달면 다시 1이 지워지고... | |||
문제를 알았으니 언젠가는 해결도 가능할 것. | |||
덧. | |||
댓글 여러개를 지우니 문제가 해결된다. 이게 대체 뭐지... | |||
대문 레이아웃 대폭 변경. 댓글이 잘 보이게끔. | |||
https://wikipolitics.kr/w/%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Mobile.css 문서를 수정. | |||
접기 기능이 사용된 표가 모바일에서 깨지지 않도록 수정됨. | |||
구글 파비콘 기능 추가했는데 잘 된 건지 모르겠다. 아직까지는 적용 안됨. | |||
localsetting 파일에 | |||
$wgHooks['BeforePageDisplay'][] = function ( $out, $skin ) { | |||
$out->addHeadItem( 'favicon', '<link rel="icon" href="https://wikipolitics.kr/resources/assets/Wiki-Politics_pavicon.ico" type="image/x-icon">' ); | |||
return true; | |||
}; | |||
코드를 넣음으로서 해결을 시도했음. | |||
챗지피티가 많은 도움을 주었다. | |||
아래는 구글 파비콘 추가와 관련된 챗지피티와의 문답. | |||
구글에 검색했을 때 구글 검색 결과에서 내 홈페이지의 파비콘을 띄우고 싶다면 어떻게 해야 하니? | |||
ChatGPT의 말: | |||
구글 검색 결과에서 내 웹사이트의 파비콘을 표시하려면, 구글의 가이드라인에 맞춰 설정해야 해. | |||
1. 올바른 파비콘 파일 준비 | |||
정사각형 이미지(예: 48x48px, 64x64px 등) | |||
SVG, PNG, 또는 ICO 형식(최소 48x48px, 권장: 192x192px 이상) | |||
브랜드 아이덴티티를 반영한 고유한 디자인 | |||
파일 크기 최적화 (너무 크면 로딩 속도에 영향) | |||
2. HTML <head> 태그에 파비콘 추가 | |||
구글 검색 결과에 표시되도록 rel="icon" 속성을 포함해야 해. | |||
html | |||
복사 | |||
편집 | |||
<link rel="icon" href="https://example.com/favicon.png" type="image/png"> | |||
✅ 중요: 파비콘의 URL은 절대경로(도메인 포함)로 설정하는 것이 좋음. | |||
예: | |||
html | |||
복사 | |||
편집 | |||
<link rel="icon" href="https://www.yoursite.com/favicon.ico" type="image/x-icon"> | |||
3. 파비콘을 robots.txt에서 차단하지 말 것 | |||
구글이 파비콘을 읽을 수 있도록 robots.txt에서 favicon.ico가 차단되지 않도록 확인해. | |||
🚨 다음과 같은 설정이 있으면 안 됨: | |||
makefile | |||
복사 | |||
편집 | |||
User-agent: Googlebot | |||
Disallow: /favicon.ico | |||
4. 페이지가 모바일 친화적인지 확인 | |||
구글 검색에서 파비콘이 표시되는 것은 모바일 검색 결과에서만 적용돼. | |||
모바일 친화성 테스트 를 실행해서 사이트가 모바일 최적화되었는지 확인해. | |||
5. 구글 검색 콘솔에서 색인 요청 | |||
파비콘을 추가한 후, **구글 검색 콘솔(Google Search Console)**에서 색인 생성 요청을 하면 더 빨리 반영될 수 있어. | |||
Google Search Console 접속 | |||
도메인 또는 URL 입력 창에 홈페이지 URL 입력 | |||
URL 검사 후, 색인 생성 요청 클릭 | |||
6. 구글이 파비콘을 가져왔는지 확인 | |||
구글 검색 결과에서 적용되었는지 확인하려면, site:example.com을 검색해 봐. | |||
예) | |||
makefile | |||
복사 | |||
편집 | |||
site:yoursite.com | |||
이렇게 검색했을 때 내 사이트가 나오는지 확인하면 돼. | |||
7. 변경 사항이 적용될 때까지 기다리기 | |||
구글이 파비콘을 업데이트하는 데 며칠~몇 주 걸릴 수 있어. 기다려야 반영될 수도 있어. | |||
✅ 요약: | |||
✔ 파비콘을 48x48px 이상으로 준비 | |||
✔ <link rel="icon"> 태그를 <head>에 추가 | |||
✔ robots.txt에서 파비콘 차단 여부 확인 | |||
✔ 구글 검색 콘솔에서 색인 생성 요청 | |||
✔ 몇 주 동안 기다리면서 적용 여부 확인 | |||
이렇게 하면 구글 검색 결과에 네 웹사이트의 파비콘이 표시될 거야! 🚀 | |||
나의 말: | |||
미디어위키 사이트를 구축해서 사용하고 있는데, head 태그가 구체적으로 어떤 파일에 위치해 있니? | |||
ChatGPT의 말: | |||
미디어위키에서 <head> 태그를 수정하려면 스킨(skin) 파일을 수정해야 해. | |||
1. 스킨 파일의 위치 확인 | |||
미디어위키는 스킨(skin) 시스템을 사용해서 HTML 구조를 렌더링해. | |||
사용 중인 스킨은 /skins/ 디렉터리에 있음. | |||
기본 스킨은 Vector 또는 MonoBook이야. | |||
사용 중인 스킨 확인하려면 LocalSettings.php에서 $wgDefaultSkin 값을 찾으면 돼. | |||
php | |||
복사 | |||
편집 | |||
$wgDefaultSkin = "vector"; // 기본 스킨이 Vector | |||
2. <head> 태그 수정할 파일 위치 | |||
(1) Vector 스킨을 사용 중이라면: | |||
파일 위치: | |||
bash | |||
복사 | |||
편집 | |||
/skins/Vector/includes/VectorTemplate.php | |||
이 파일에서 <head> 태그를 찾아 필요한 코드를 추가하면 돼. | |||
(2) MonoBook 스킨을 사용 중이라면: | |||
파일 위치: | |||
bash | |||
복사 | |||
편집 | |||
/skins/MonoBook/MonoBookTemplate.php | |||
3. <head> 태그에 파비콘 추가하기 | |||
예를 들어, VectorTemplate.php에서 <head> 태그 부분을 찾아 <link rel="icon">을 추가할 수 있어: | |||
php | |||
복사 | |||
편집 | |||
public function execute() { | |||
// 기존 코드 유지 | |||
?> | |||
<!DOCTYPE html> | |||
<html lang="<?php echo $this->get( 'lang' ); ?>"> | |||
<head> | |||
<meta charset="<?php echo $this->get( 'charset' ); ?>"> | |||
<title><?php $this->html( 'title' ); ?></title> | |||
<!-- 파비콘 추가 --> | |||
<link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon"> | |||
<?php $this->html( 'headscripts' ); ?> | |||
</head> | |||
<body> | |||
<?php | |||
} | |||
이렇게 하면 미디어위키 사이트의 모든 페이지에서 <head> 태그에 파비콘이 추가돼. | |||
4. 캐시 비우기 (중요!) | |||
파일을 수정한 후 캐시를 비워야 변경 사항이 반영됨. | |||
관리자로 로그인한 후, 다음 URL을 방문해서 캐시를 강제로 갱신할 수 있어: | |||
arduino | |||
복사 | |||
편집 | |||
https://example.com/wiki/Main_Page?action=purge | |||
또는 SSH에서 실행: | |||
bash | |||
복사 | |||
편집 | |||
php maintenance/rebuildLocalisationCache.php --force | |||
5. 미디어위키 전역 설정을 통한 방법 (대안) | |||
만약 파일을 직접 수정하는 게 부담된다면, LocalSettings.php 파일에서 다음 설정을 추가하는 방법도 있어: | |||
php | |||
복사 | |||
편집 | |||
$wgHooks['BeforePageDisplay'][] = function ( $out, $skin ) { | |||
$out->addHeadItem( 'favicon', '<link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">' ); | |||
return true; | |||
}; | |||
이렇게 하면 모든 스킨에서 <head> 태그에 파비콘이 추가됨. | |||
✅ 최종 정리 | |||
LocalSettings.php에서 현재 사용 중인 스킨 확인 | |||
해당 스킨의 템플릿 파일 수정 (VectorTemplate.php, MonoBookTemplate.php 등) | |||
<head> 태그 안에 <link rel="icon"> 추가 | |||
캐시를 비우고 변경 사항 확인 | |||
(대안) LocalSettings.php에서 BeforePageDisplay 훅을 사용하여 추가 | |||
이제 미디어위키 사이트에서도 파비콘이 적용될 거야! 🚀 | |||
나의 말: | |||
href="https://example.com/favicon.ico 를 내가 어떻게 수정해야 하는지 조금 더 자세히 설명해줄래? | |||
ChatGPT의 말: | |||
네가 원하는 파비콘을 적용하려면 href="https://example.com/favicon.ico" 부분을 네 웹사이트의 실제 파비콘 URL로 변경해야 해. 아래 방법을 따라 하면 돼. | |||
🔹 1. 파비콘 파일 준비하기 | |||
먼저, 파비콘 파일을 준비해야 해. | |||
✅ 파일 형식: .ico, .png, .svg (일반적으로 .ico를 사용) | |||
✅ 권장 크기: 최소 48x48px, 일반적으로 16x16px 또는 32x32px도 가능 | |||
🔹 2. 파비콘을 서버에 업로드하기 | |||
파일을 웹서버의 적절한 위치에 업로드해야 해. | |||
예를 들어: | |||
https://yourwebsite.com/favicon.ico (사이트 루트에 저장) | |||
https://yourwebsite.com/images/favicon.png (특정 폴더에 저장) | |||
업로드 방법: | |||
FTP (FileZilla 같은 프로그램) 또는 SSH를 사용해 서버에 접속 | |||
favicon.ico 파일을 웹사이트 루트(/public_html/ 또는 /var/www/html/)에 업로드 | |||
✅ 확인: | |||
브라우저에서 https://yourwebsite.com/favicon.ico로 접속했을 때 아이콘이 표시되면 정상적으로 업로드된 거야. | |||
🔹 3. HTML 코드 수정하기 | |||
웹사이트에서 파비콘을 적용하려면 <head> 태그 안에 link 태그를 추가하면 돼. | |||
(1) 기본적인 ICO 형식 사용 | |||
만약 favicon.ico 파일을 사이트 루트에 업로드했다면: | |||
html | |||
복사 | |||
편집 | |||
<link rel="icon" href="https://yourwebsite.com/favicon.ico" type="image/x-icon"> | |||
또는 | |||
html | |||
복사 | |||
편집 | |||
<link rel="shortcut icon" href="https://yourwebsite.com/favicon.ico" type="image/x-icon"> | |||
(2) PNG 또는 SVG 형식 사용 | |||
파일이 .png 또는 .svg라면 형식에 맞게 설정해야 해: | |||
html | |||
복사 | |||
편집 | |||
<link rel="icon" href="https://yourwebsite.com/favicon.png" type="image/png"> | |||
html | |||
복사 | |||
편집 | |||
<link rel="icon" href="https://yourwebsite.com/favicon.svg" type="image/svg+xml"> | |||
(3) 여러 브라우저 호환을 위해 다양한 포맷 추가 | |||
만약 다양한 브라우저 및 기기를 지원하고 싶다면 여러 포맷을 추가하면 좋아: | |||
html | |||
복사 | |||
편집 | |||
<link rel="icon" href="https://yourwebsite.com/favicon.ico" sizes="any"> | |||
<link rel="icon" href="https://yourwebsite.com/favicon.svg" type="image/svg+xml"> | |||
<link rel="apple-touch-icon" href="https://yourwebsite.com/apple-touch-icon.png"> | |||
이렇게 하면 iOS, 안드로이드, 최신 브라우저에서도 최적의 아이콘이 표시돼. | |||
🔹 4. 변경 사항 적용 및 확인하기 | |||
웹페이지 새로고침 | |||
변경사항이 적용되지 않으면 Ctrl + Shift + R(하드 리프레시)을 해봐. | |||
캐시 삭제 | |||
브라우저에서 https://yourwebsite.com/favicon.ico를 직접 열어보고, 새로고침(F5) 몇 번 해봐. | |||
구글 검색 결과 반영 기다리기 | |||
구글 검색에서는 적용까지 며칠~몇 주 걸릴 수 있어. | |||
검색 콘솔에서 색인 생성 요청을 하면 더 빠르게 반영될 수도 있어. | |||
✅ 최종 정리 | |||
✔ favicon.ico 또는 .png / .svg 파일을 서버에 업로드 | |||
✔ <head> 태그 안에 <link rel="icon"> 태그 추가 | |||
✔ 브라우저에서 아이콘이 정상적으로 표시되는지 확인 | |||
✔ 캐시를 삭제하고 적용 여부 체크 | |||
이제 네 미디어위키 사이트에서 파비콘이 정상적으로 적용될 거야! 🚀😊 | |||
== 앞으로의 과제 == | == 앞으로의 과제 == | ||
* 구글 검색 파비콘 추가 | * 구글 검색 파비콘 추가 | ||
* 백업 및 재설치 개념 확인받기 | * 백업 및 재설치 개념 확인받기 | ||
* | * https://wikipolitics.kr 에서 바로 접속 가능하도록 수정 | ||
* | * 모바일 화면에서의 유튜브 | ||
------ | ------ | ||
[[분류:기타]] | [[분류:기타]] |
2025년 3월 12일 (수) 15:13 기준 최신판
현재까지의 위키 시스템 수정 사항을 정리. 미래의 나에게, 그리고 또 다른 누군가에게 도움이 되기를.
2024.04.13.
현재까지 변경된 사항
- 숏url 추가.
- 위키에 업로드 가능한 파일 종류에 ico 추가. 현재 업로드 가능한 파일의 종류는 png, gif, jpg, jpeg, webp, ico.
- 대문 문서를 Wiki Politics로 변경.
- 대문 이미지와 파비콘 추가.
- 외부 이용자 회원가입 허용.
2024.04.14.
- 이용자 권한 설정 완료.
- 각주 설정 완료.
- 각주 팝업 설정 완료.
2024.04.15.
- https 설정 완료. 덤으로 www. 도메인도 설정됨.
- http로 접속하더라도 https로 연결되도록 설정 완료.
- 구글 검색 허용. 실제 검색에 잡히기까지는 약 2~4주 소요 예상.
- 모바일 대응 완료.
- 스킨 기본값을 벡터-2022로 변경.
- 틀데이터(TemplateData) 기능 추가.
2024.08.16.
ssl 인증 갱신. letsencrypt로 인증 방식 변경.
2024.08.26.
운영자를 제외한 다른 사람들의 편집권을 막아둠. 건의함 문서가 아닌 이메일을 통한 수정 제보 및 건의로 변경.
2024.10.01.
외부 링크가 새창으로 열리도록 수정.
2024.11.08.
유튜브 영상을 페이지에 직접 띄울 수 있도록 수정.[1]
2024.11.09.
김희서 문서를 구글 색인에 등록. 네이버 seo 등록.
2024.11.18.
댓글 기능 추가 계획 중. https://www.mediawiki.org/wiki/Extension:Comments/ko
2024.11.19.
댓글 기능 추가 완료. 알림 기능도 추가 완료. 그러나 알림 기능은 댓글이 달리면 알림을 띄워주는 기능이 없었다. 실패. 오히려 댓글을 지울 수 없는 알 수 없는 오류가 발생. 알림 기능을 삭제.
알림 기능을 삭제해도 여전히 댓글 삭제가 안 되는 버그가 존재. 해결 방안을 찾는 데에 실패. 댓글 기능 삭제.
씨발...
2025.02.21.
댓글 기능 추가. 어차피 사람도 안 오는데 댓글 삭제가 잘 안 되는게 무슨 상관이겠나.
댓글 삭제는, 정확히는 마지막 하나의 댓글이 삭제가 안 되는 것으로 판명. 댓글 1을 올리고 지우면 1이 남아있고, 여기에 댓글 2를 달면 다시 1이 지워지고...
문제를 알았으니 언젠가는 해결도 가능할 것.
덧. 댓글 여러개를 지우니 문제가 해결된다. 이게 대체 뭐지...
대문 레이아웃 대폭 변경. 댓글이 잘 보이게끔.
https://wikipolitics.kr/w/%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Mobile.css 문서를 수정.
접기 기능이 사용된 표가 모바일에서 깨지지 않도록 수정됨.
구글 파비콘 기능 추가했는데 잘 된 건지 모르겠다. 아직까지는 적용 안됨.
localsetting 파일에
$wgHooks['BeforePageDisplay'][] = function ( $out, $skin ) {
$out->addHeadItem( 'favicon', '<link rel="icon" href="https://wikipolitics.kr/resources/assets/Wiki-Politics_pavicon.ico" type="image/x-icon">' ); return true;
};
코드를 넣음으로서 해결을 시도했음.
챗지피티가 많은 도움을 주었다.
아래는 구글 파비콘 추가와 관련된 챗지피티와의 문답.
구글에 검색했을 때 구글 검색 결과에서 내 홈페이지의 파비콘을 띄우고 싶다면 어떻게 해야 하니? ChatGPT의 말: 구글 검색 결과에서 내 웹사이트의 파비콘을 표시하려면, 구글의 가이드라인에 맞춰 설정해야 해.
1. 올바른 파비콘 파일 준비 정사각형 이미지(예: 48x48px, 64x64px 등) SVG, PNG, 또는 ICO 형식(최소 48x48px, 권장: 192x192px 이상) 브랜드 아이덴티티를 반영한 고유한 디자인 파일 크기 최적화 (너무 크면 로딩 속도에 영향) 2. HTML <head> 태그에 파비콘 추가 구글 검색 결과에 표시되도록 rel="icon" 속성을 포함해야 해.
html 복사 편집 <link rel="icon" href="https://example.com/favicon.png" type="image/png"> ✅ 중요: 파비콘의 URL은 절대경로(도메인 포함)로 설정하는 것이 좋음. 예:
html 복사 편집 <link rel="icon" href="https://www.yoursite.com/favicon.ico" type="image/x-icon"> 3. 파비콘을 robots.txt에서 차단하지 말 것 구글이 파비콘을 읽을 수 있도록 robots.txt에서 favicon.ico가 차단되지 않도록 확인해. 🚨 다음과 같은 설정이 있으면 안 됨:
makefile 복사 편집 User-agent: Googlebot Disallow: /favicon.ico 4. 페이지가 모바일 친화적인지 확인 구글 검색에서 파비콘이 표시되는 것은 모바일 검색 결과에서만 적용돼.
모바일 친화성 테스트 를 실행해서 사이트가 모바일 최적화되었는지 확인해. 5. 구글 검색 콘솔에서 색인 요청 파비콘을 추가한 후, **구글 검색 콘솔(Google Search Console)**에서 색인 생성 요청을 하면 더 빨리 반영될 수 있어.
Google Search Console 접속 도메인 또는 URL 입력 창에 홈페이지 URL 입력 URL 검사 후, 색인 생성 요청 클릭 6. 구글이 파비콘을 가져왔는지 확인 구글 검색 결과에서 적용되었는지 확인하려면, site:example.com을 검색해 봐. 예)
makefile 복사 편집 site:yoursite.com 이렇게 검색했을 때 내 사이트가 나오는지 확인하면 돼.
7. 변경 사항이 적용될 때까지 기다리기 구글이 파비콘을 업데이트하는 데 며칠~몇 주 걸릴 수 있어. 기다려야 반영될 수도 있어.
✅ 요약: ✔ 파비콘을 48x48px 이상으로 준비 ✔ <link rel="icon"> 태그를 <head>에 추가 ✔ robots.txt에서 파비콘 차단 여부 확인 ✔ 구글 검색 콘솔에서 색인 생성 요청 ✔ 몇 주 동안 기다리면서 적용 여부 확인
이렇게 하면 구글 검색 결과에 네 웹사이트의 파비콘이 표시될 거야! 🚀
나의 말: 미디어위키 사이트를 구축해서 사용하고 있는데, head 태그가 구체적으로 어떤 파일에 위치해 있니? ChatGPT의 말: 미디어위키에서 <head> 태그를 수정하려면 스킨(skin) 파일을 수정해야 해.
1. 스킨 파일의 위치 확인 미디어위키는 스킨(skin) 시스템을 사용해서 HTML 구조를 렌더링해.
사용 중인 스킨은 /skins/ 디렉터리에 있음. 기본 스킨은 Vector 또는 MonoBook이야. 사용 중인 스킨 확인하려면 LocalSettings.php에서 $wgDefaultSkin 값을 찾으면 돼.
php 복사 편집 $wgDefaultSkin = "vector"; // 기본 스킨이 Vector 2. <head> 태그 수정할 파일 위치 (1) Vector 스킨을 사용 중이라면: 파일 위치:
bash 복사 편집 /skins/Vector/includes/VectorTemplate.php 이 파일에서 <head> 태그를 찾아 필요한 코드를 추가하면 돼.
(2) MonoBook 스킨을 사용 중이라면: 파일 위치:
bash 복사 편집 /skins/MonoBook/MonoBookTemplate.php 3. <head> 태그에 파비콘 추가하기 예를 들어, VectorTemplate.php에서 <head> 태그 부분을 찾아 <link rel="icon">을 추가할 수 있어:
php 복사 편집 public function execute() {
// 기존 코드 유지 ?> <!DOCTYPE html> <html lang="<?php echo $this->get( 'lang' ); ?>"> <head> <meta charset="<?php echo $this->get( 'charset' ); ?>"> <title><?php $this->html( 'title' ); ?></title>
<link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">
<?php $this->html( 'headscripts' ); ?> </head> <body> <?php
} 이렇게 하면 미디어위키 사이트의 모든 페이지에서 <head> 태그에 파비콘이 추가돼.
4. 캐시 비우기 (중요!) 파일을 수정한 후 캐시를 비워야 변경 사항이 반영됨. 관리자로 로그인한 후, 다음 URL을 방문해서 캐시를 강제로 갱신할 수 있어:
arduino 복사 편집 https://example.com/wiki/Main_Page?action=purge 또는 SSH에서 실행:
bash 복사 편집 php maintenance/rebuildLocalisationCache.php --force 5. 미디어위키 전역 설정을 통한 방법 (대안) 만약 파일을 직접 수정하는 게 부담된다면, LocalSettings.php 파일에서 다음 설정을 추가하는 방법도 있어:
php 복사 편집 $wgHooks['BeforePageDisplay'][] = function ( $out, $skin ) {
$out->addHeadItem( 'favicon', '<link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">' ); return true;
}; 이렇게 하면 모든 스킨에서 <head> 태그에 파비콘이 추가됨.
✅ 최종 정리 LocalSettings.php에서 현재 사용 중인 스킨 확인 해당 스킨의 템플릿 파일 수정 (VectorTemplate.php, MonoBookTemplate.php 등) <head> 태그 안에 <link rel="icon"> 추가 캐시를 비우고 변경 사항 확인 (대안) LocalSettings.php에서 BeforePageDisplay 훅을 사용하여 추가 이제 미디어위키 사이트에서도 파비콘이 적용될 거야! 🚀
나의 말: href="https://example.com/favicon.ico 를 내가 어떻게 수정해야 하는지 조금 더 자세히 설명해줄래? ChatGPT의 말: 네가 원하는 파비콘을 적용하려면 href="https://example.com/favicon.ico" 부분을 네 웹사이트의 실제 파비콘 URL로 변경해야 해. 아래 방법을 따라 하면 돼.
🔹 1. 파비콘 파일 준비하기 먼저, 파비콘 파일을 준비해야 해. ✅ 파일 형식: .ico, .png, .svg (일반적으로 .ico를 사용) ✅ 권장 크기: 최소 48x48px, 일반적으로 16x16px 또는 32x32px도 가능
🔹 2. 파비콘을 서버에 업로드하기 파일을 웹서버의 적절한 위치에 업로드해야 해. 예를 들어:
https://yourwebsite.com/favicon.ico (사이트 루트에 저장) https://yourwebsite.com/images/favicon.png (특정 폴더에 저장) 업로드 방법:
FTP (FileZilla 같은 프로그램) 또는 SSH를 사용해 서버에 접속 favicon.ico 파일을 웹사이트 루트(/public_html/ 또는 /var/www/html/)에 업로드 ✅ 확인: 브라우저에서 https://yourwebsite.com/favicon.ico로 접속했을 때 아이콘이 표시되면 정상적으로 업로드된 거야.
🔹 3. HTML 코드 수정하기 웹사이트에서 파비콘을 적용하려면 <head> 태그 안에 link 태그를 추가하면 돼.
(1) 기본적인 ICO 형식 사용 만약 favicon.ico 파일을 사이트 루트에 업로드했다면:
html 복사 편집 <link rel="icon" href="https://yourwebsite.com/favicon.ico" type="image/x-icon"> 또는
html 복사 편집 <link rel="shortcut icon" href="https://yourwebsite.com/favicon.ico" type="image/x-icon"> (2) PNG 또는 SVG 형식 사용 파일이 .png 또는 .svg라면 형식에 맞게 설정해야 해:
html 복사 편집 <link rel="icon" href="https://yourwebsite.com/favicon.png" type="image/png"> html 복사 편집 <link rel="icon" href="https://yourwebsite.com/favicon.svg" type="image/svg+xml"> (3) 여러 브라우저 호환을 위해 다양한 포맷 추가 만약 다양한 브라우저 및 기기를 지원하고 싶다면 여러 포맷을 추가하면 좋아:
html 복사 편집 <link rel="icon" href="https://yourwebsite.com/favicon.ico" sizes="any"> <link rel="icon" href="https://yourwebsite.com/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="https://yourwebsite.com/apple-touch-icon.png"> 이렇게 하면 iOS, 안드로이드, 최신 브라우저에서도 최적의 아이콘이 표시돼.
🔹 4. 변경 사항 적용 및 확인하기 웹페이지 새로고침 변경사항이 적용되지 않으면 Ctrl + Shift + R(하드 리프레시)을 해봐. 캐시 삭제 브라우저에서 https://yourwebsite.com/favicon.ico를 직접 열어보고, 새로고침(F5) 몇 번 해봐. 구글 검색 결과 반영 기다리기 구글 검색에서는 적용까지 며칠~몇 주 걸릴 수 있어. 검색 콘솔에서 색인 생성 요청을 하면 더 빠르게 반영될 수도 있어. ✅ 최종 정리 ✔ favicon.ico 또는 .png / .svg 파일을 서버에 업로드 ✔ <head> 태그 안에 <link rel="icon"> 태그 추가 ✔ 브라우저에서 아이콘이 정상적으로 표시되는지 확인 ✔ 캐시를 삭제하고 적용 여부 체크
이제 네 미디어위키 사이트에서 파비콘이 정상적으로 적용될 거야! 🚀😊
앞으로의 과제
- 구글 검색 파비콘 추가
- 백업 및 재설치 개념 확인받기
- https://wikipolitics.kr 에서 바로 접속 가능하도록 수정
- 모바일 화면에서의 유튜브