사이트 아이콘 favicon과 GitHub 이미지 호스팅
출처: 사이트 아이콘 favicon과 GitHub 이미지 호스팅 발행일: 2024-5-13 최종 편집: 2024-9-22 원래 섹션: 사이트 설정 태그: 이미지 호스팅 요약: GitHub를 이미지 호스팅으로 사용하는 방법
Favicon이란?
Favicon.ico는 웹사이트의 아이콘 파일이며, 보통 브라우저 탭, 북마크 목록, 브라우저 주소창에 표시됩니다.
예를 들어 브라우저에서 연 세 탭에는 각각 Favicon이 있습니다.
"Favicon"은 "Favorites Icon"의 줄임말입니다. 사이트가 사용자 즐겨찾기와 북마크 목록에서 커스텀 작은 아이콘을 표시할 수 있게 해 사이트 식별성과 브랜드 이미지를 높입니다.
이 아이콘 파일은 보통 favicon.ico라는 이름으로 만들고 사이트 루트 디렉터리에 둡니다.
favicon과 이미지 호스팅
NotionNext에서 favicon.ico 이미지를 수정하려면 사용자가 직접 업로드해 기존 public 디렉터리의 favicon.ico를 덮어써야 합니다. favicon 설정 방법은 브라우저 사이트 아이콘 설정을 참고하세요.
외부 이미지로 설정하는 방법
최신 NotionNext에서는 Notion Config에 favicon 주소를 직접 설정할 수 있습니다. 아래와 같은 설정만 추가하면 됩니다.
이 방식의 장점은 코드를 수정하지 않고도 하나의 코드베이스로 여러 사이트를 배포할 수 있고, 각 사이트가 서로 다른 아이콘을 가질 수 있다는 점입니다.
다만 이 방식은 자체 이미지 호스팅이 있다는 전제가 필요합니다. 없다면 아래처럼 GitHub를 이미지 호스팅으로 활용해 favicon을 올리고 NotionNext 사이트에 설정할 수 있습니다.
이미지 호스팅이란?
이미지 호스팅은 이미지 파일을 저장하고 호스팅하는 네트워크 서비스입니다.
사용자는 보통 이미지를 이미지 호스팅 서버에 업로드하고 링크를 받아 웹페이지, 포럼, 소셜 미디어 등에 공유합니다. 이미지 호스팅 서비스는 웹 공간과 대역폭을 절약하고 이미지 관리와 공유를 편하게 해 줍니다.
Notion 노트에 업로드한 이미지는 Notion 파일 서버에 저장되므로, 이때는 Notion을 이미지 호스팅으로 사용하는 셈입니다. 예:
GitHub를 이미지 호스팅으로 사용하기
아래 링크에 접속해 새 코드 저장소를 만듭니다.
Repository name은 자유롭게 입력하되, 반드시 Public 타입을 선택하세요.
파일 업로드
처음 프로젝트를 만들면 안내 페이지로 이동합니다. 여기서 uploading an existing file을 클릭해 파일을 업로드할 수 있습니다.
여기서는 gif 이미지를 업로드했습니다. 이후 언제든 프로젝트 홈으로 돌아가 오른쪽 위 Add file → Upload files로 파일을 업로드할 수 있습니다.
이미지 주소 얻기
업로드가 끝나면 저장소의 파일 목록에서 파일을 찾아 클릭합니다.
이동한 페이지의 주소창이 이 파일의 URL입니다.
주의할 점은 이 URL을 기본으로 열면 GitHub 프로젝트 페이지가 표시된다는 것입니다. 원본 파일에 직접 접근하려면 다음 처리가 필요합니다.
- 주소창 URL 뒤에
?raw=true를 붙이고 Enter를 눌러 새 주소로 접근합니다.
- 주소창이 이동한 실제 주소를 확인합니다.
브라우저는github.com/xxx/xxx.gif에서https://raw.githubusercontent.com/xxx/xxx.gif로 자동 이동합니다. 뒤의 URL이 이미지 파일의 실제 주소입니다. 이 주소를 복사해 설정하면 됩니다.
마지막으로
위 예시는 gif 파일이지만, favicon으로 사용할 파일 확장자는 .ico로 끝나는 것이 좋습니다. ico 파일을 만드는 방법은 브라우저 사이트 아이콘 설정의 아이콘 제작 설명을 참고하세요.
원문 링크
https://docs.tangly1024.com/article/use-github-as-image-hosting-service