$$config title: [유용한 사이트] 파비콘 keywords: - IT - Web $$ # 파비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 보통 6*"16 사이즈 라고 한다. 디바이스 크기가 다양해진 만큼 어느부분에 파비콘이 다양한 사이즈로 등록해두는 것이 좋을 것 # 파비콘 만드는 방법 1. 우선 포토샵이나 이미지툴로 192*192 픽셀의 이미지를 만든다. 이미지 확장자는 png나 jpg이면 상관없다. 2. www.favicon-generator.org 사이트 접속한다. 3. 만든 이미지를 첨부하고 [Create Favicon] 버튼을 클릭한다. 옵션은 기본적으로 체크되어있는대로 두면 된다. (Generate icons for Web, Android, Microsoft, and iOS를 선택) ![원본이미지](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdNn9ux%2FbtqWxe2CVFA%2FZK20aJwbQcifPPS8LpYKb1%2Fimg.jpg) 4. [Download the generated favicon] 을 클릭하여 파비콘 파일들을 다운받는다. ![원본이미지](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbWlu1u%2FbtqWjqXamV8%2FO2J0hoORrVNxef3wg1QJy0%2Fimg.jpg) 압축 파일을 열어보면 다양한 사이즈의 파비콘 이미지가 제작 되어져있다. 이 파일들을 홈페이지 서버에 업로드 한다. ![원본이미지](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbYF8eC%2FbtqV36ZFvqE%2FrhvdYmh6o3zBqMDHUpRJ9k%2Fimg.jpg) 5. 아래쪽에 있는 코드를 홈페이지상의 \ \사이에 삽입한다. 이미지 경로는 알맞게 수정 필요하다. ![원본이미지](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fvc9yG%2FbtqV8E9FKbu%2FdXtzaJGss0cqoJOCT1HpO0%2Fimg.jpg) 제시되어 있는 코드에는 " 이 빠져있어 추가로 넣어주면 된다. ``` ``` 기존에 16*16의 작은 파비콘만 적용했을때와 다양한 사이즈를 지원하는 파비콘 코드를 적용한 후를 보면 확실히 선명도가 다르다. - 출처: https://hongpage.kr/28 [홍페이지 HONGPAGE:티스토리]