파비콘이란 웹 사이트나 웹 페이지의 브라우저 탭에 표시되는 작은 아이콘입니다.
웹 사이트를 대표하는 아이콘이므로 통상적으로 로고를 많이 사용합니다.
리액트 프로젝트를 처음 생성하면 \public\favicon.ico 파일과 함께 사진에 보이는 파비콘이 기본으로 설정됩니다.
이 파비콘을 내가 원하는 이미지로 바꿔보겠습니다!
이미지 확장자 변환
무료 Favicon 생성기, 이미지 변환-Wizlogo
무료로 몇 초 안에 귀하의 웹 사이트에 대한 즐겨 찾기 아이콘을 생성하십시오. 이미지 파일 (GIF, JPG 및 PNG)을 업로드하고 즐겨 찾기 아이콘 (ICO) 또는 앱 아이콘으로 변환하십시오.
wizlogo.com
리액트에서 파비콘(이미지)의 확장자로 jpg, png 파일도 사용 가능하지만 ico 파일이 기본적인 확장자입니다. 로그인 없이 무료로 이용 가능한 위 사이트에서 파비콘으로 설정할 png 이미지를 ico 파일로 변환해 보겠습니다.
이미지를 추가하고 일으키다 버튼을 클릭하면 이미지가 32 x 32 ico 파일로 변환되어 다운로드 됩니다.
요상하게 저장된 파일명을 favicon으로 바꿔줍니다.
프로젝트에서 파비콘 변경
프로젝트로 돌아와서 기존 파비콘을 과감히 삭제하고 새로 만든 파비콘 파일을 드래그해서 같은 위치에 넣어줍시다!
그리고 확인을 해보면?
파비콘이 내가 설정한 아이콘으로 변경된 걸 확인할 수 있습니다.
파비콘을 동그랗게 / jpg,png 파일로 변경
Crop a circle in image online - free tool
Supporting file formats Most of the common image formats like (.jpg, .jpeg, .png, .bmp etc..) are supported, you can upload any type of images, irrespective of size and dimensions to do a circle cropping.
crop-circle.imageonline.co
파비콘을 성공적으로 변경하였지만 네모난 모양이 마음에 들지 않다면 동그랗게도 변경 가능한데요 그냥 아이콘 이미지를 동그랗게 변경해 주면 됩니다. 로그인 없이 무료로 이용 가능한 위 사이트에서 이미지를 동그랗게 만들어보겠습니다.
UPLOAD IMAGE 버튼을 클릭 한 다음
사용자 지정 파일은 이미지 확장자만 불러오기 때문에 모든 파일을 선택하여 새로 만든 favicon.ico 파일을 업로드 해주고
CROP CIRCLE 버튼 클릭 하여 이미지가 동그랗게 변경한 뒤 DOWNLOAD IMAGE 버튼을 클릭하여 다운로드 해줍니다.
아까와 똑같이 favicon-modified라고 저장된 파일명을 favicon으로 변경 하고 프로젝트 \public 폴더 안에 넣어줍니다. 그런데 이미지를 변경하는 과정에서 확장자가 ico에서 png로 변환 되었습니다. png(또는 jpg) 파일을 다시 ico 파일로 변환할 필요 없이 코드만 조금 수정해주면 사용 가능합니다.
\public\index.html의 link 태그에 favicon.ico로 되어있는걸 내가 설정할 파비콘 확장자로 수정해 주시면 됩니다.
동그란 모양의 파비콘 파일이 png로 변환되었으니 favicon.png로 바꿔주면 되겠죠 jpg, svg 파일일 때도 마찬가지로 확장자를 수정해주시면 됩니다. 다만 파비콘은 ico,png,svg 파일을 사용하는 것이 일반적이고 jpg 사용은 권장하지 않는다고 하네요
수정 후 저장하고 확인해 보면 파비콘이 동그랗게 변경되었네요!
티스토리 파비콘 설정
내 티스토리 화면 맨 밑에 있는 관리자 탭을 클릭하여 블로그관리 페이지로 이동합니다.
블로그관리 홈에서 좌측 티스토리 이름 위 이미지를 클릭하면 블로그 설정 페이지로 이동되는데 여기서 파비콘 항목에 파일을 추가해 주시면 됩니다. ico 파일을 첨부하라고 되어있지만 jpg,png 파일도 첨부가 되네요. 파일 추가 후 변경사항 저장 버튼 클릭하셔야 적용됩니다.
만약 동그란 모양의 ico 파일 파비콘을 적용 시키고 싶으시면 이미지를 먼저 동그랗게 변경한 후 확장자를 변환하시면 되겠습니다!
