프로젝트에 원하는 svg(혹은 이미지 파일)을 ico로 변환하여 예쁜 favicon을 적용시켜보자 !

---

1. 원하는 svg파일 저장하기

무료 다운로드 추천 사이트
flaticon
react-icons

원하는 svg가 파일은 없고 코드로만 존재한다면 메모장(혹은 vscode)에 붙여넣고 확장자를 .svg로 저장하면 됩니다.

• svg파일 예시
  

fill속성에 원하는 색상코드를 입력할 수 있음

---

2. 변환 사이트에서 파일 변환하기

아무데서나 가능하지만 아래 사이트 추천
무료 변환 사이트

svg파일을 선택/드래그 앤 드롭하여 사이트에 올리고 ico파일로 변환한다.

변환된 파일을 다운로드받으면 끝 !

• 변환된 파일 예시
  

---

3. ❗아무것도 안보이는 오류

간혹 파일을 변환하여 다운로드 받았는데 ico파일을 열면 아무것도 보이지 않는 오류가 있다.

그럴때 변환전 svg파일의 width와 height속성을 512정도로 조절하면 정상적으로 잘 보인다.

---

4. favicon 적용하기 (리액트)

변환된 logo.ico파일을 public 경로에 저장한다.

index.html의 head태그 안에

<link rel="icon" href="%PUBLIC_URL%/icon.ico" />

위 코드 입력하면 적용 완료

적용된 모습

---

파일을 변환하는데 자꾸 아무것도 보이지 않는 오류가 발생했는데 해결법을 찾게되어 글로 정리하였다.

fill속성은 변경하기 전에 svg와 path중 어디에 입력해야 적용이 잘 되는지 미리 확인해보는것을 추천

만약 변환 후 아무것도 보이지 않는다면 svg파일의 크기를 늘려 다시 시도해보길 바란다.