목차
1. 파비콘이란?
2. 파비콘 이미지 제작
3. 파비콘 제작 홈페이지
4. 파비콘 적용하기
1. 파비콘이란?
인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘
아래 이미지처럼 사이트 창 좌측에 작게 나오는 이미지를 파비콘이라고 합니다.
2. 파비콘 이미지 제작
우선 미리캔버스나 PPT, 포토샵 등을 이용해 정사각형의 이미지를 제작해줍니다.
확인해보니 사이즈는 크게 문제 되지 않는 것 같습니다.
디자인 플랫폼 미리캔버스
디자인 작업이 필요한가요? 5만개 이상의 무료 템플릿으로 간편하고 편하게 원하는 디자인을 만들 수 있어요.
www.miricanvas.com
3. 파비콘 제작 참조 홈페이지
아래 두 곳에서 위에서 제작한 이미지를 ico 파일로 변환해 주는 사이트에서 변환이 필요합니다. 둘 다 이용해본 결과 첫번째가 이미지가 깨지지 않고 생성이 되었습니다.
가. xiconeditor
X-Icon Editor
Define the Favicon To indicate that the icon is available to the browser, use the tag in the element of the page, pointing to the location of the favicon: Optimize Performance In order to optimize network performance, please use the following best pra
www.xiconeditor.com
1. 이미지를 준비한다. -> 2. Import 로 이미지 불러오기 -> 3. 이미지 영역확인 후 Upload -> 4. Export -> 5. Export your icon을 누르면 끝
나. favicon-generator
아래 홈페이지에 들어가 파일선택을 하여 기존에 만들어 놓은 이미지를 업로드합니다.
Create Favicon 을 클릭하면 Download the generated favicon 을 클릭하면 ico 파일을 다운 받을 수 있습니다.
https://www.favicon-generator.org/
Favicon & App Icon Generator
Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.
www.favicon-generator.org
4. 파비콘 적용하기
블로그 설정에서 관리 - 블로그를 클릭하면 아이콘과 파비콘을 입력할 수 있습니다.
불러오기를 눌러서 아이콘에는 JPG/PNG 파일을 업로드하고 파비콘에는 ICO파일을 업로드 후 저장해주면 설정이 끝이납니다.
'소소한 팁 > 생활 정보, 상식' 카테고리의 다른 글
| 대전 테니스장 예약하기, 대전 실내테니스장 예약 (0) | 2023.06.28 |
|---|---|
| 핸드폰 충전기 폭발 (밸*엠 충전기) (0) | 2023.04.25 |
| 수영강습에서 아이엠(IM) 이란? (0) | 2023.03.29 |
| 수영 영법의 종류는? 자유영? 자유형!! ???? (2) | 2023.03.28 |
| 아파트 주차장에 전기차충전구역 방해 시 과태료 주의 (0) | 2022.10.05 |