리액트 프로젝트 폴더 안에 있는 favicon.ico를 보면 리액트 로고이다. 정이 영~ 가지 않아서 이걸 지우고
임의로 아이콘을 만들었다.
포토샵에서 완성 후 사본 저장을 했는데 ico 확장자로 저장하는 것은 없어서
png로 저장 후
ico generator 이라는 사이트를 찾아서 확장자를 변환했다. 인터넷에 ico generator이라고 검색하면 여러 사이트들이 나오는데 그 중 하나를 골랐다.
파일을 선택하고 변환하니 ico 파일이 다운받아진다. 클릭해서 보니 너무 작다. 일단 추가해봤다.
?? 너무 작다.
그래서 320x320 사이즈의 Png파일로 변경해주었다. 그래도 여전히 작다.
문제의 원인은 바로 이것이었다. 320x320도 아이콘으로 쓰기로는 너무 작은 것 이었다....
그래서 나는 포토샵 캔버스 크기를 가로, 세로를 2000으로 하고 거기에 딱 맞춰서 아이콘을 늘렸다.
그리고 이 파일을 png로 저장해서 바로 index.html에 올려줬다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/logo.png" /> 이 부분!!!
<meta name="viewport" content="width=device-width,
해결 완료! 아이콘의 크기가 다른 사이트의 아이콘 만큼이나 커졌다.
내가 얻은 결론은
1. 리액트 프로젝트의 앱 아이콘은 ico 가 아닌 png여도 된다.
2. 아이콘을 직접 만들 때 캔버스 크기는 가로 , 세로 1300 이상으로 하는 것이 좋을 듯 하다. (나는 2000으로 함)
3. index.html 에서 파일을 적용해주자.
