1. 파비콘 (favorite icon)
파비콘이란, 즐겨찾기와 아이콘의 합성어로 웹사이트 주소 창에 표시되는 작은 아이콘을 말합니다.
파비콘 크기
16x16, 32x32, 48x48, 64x64 픽셀
파비콘 컬러
8비트, 24비트, 32비트 색상
파일 형식
ICO 파일 포맷은 마이크로소프트 윈도우의 아이콘에 쓰이는 그림 파일 포맷임
2. 쉽게 파비콘 만드는 법
(1) 파비콘으로 사용할 이미지를 선택하세요.
(2) 사이즈를 32x32 픽셀로 변경 저장하세요.
(3) 배경에 컬러가 있다면 제거해 주세요.
- 배경을 투명하게 만드는 법은 요기(링크)를 참고해 주세요.
- URL : blog.naver.com/uhee000/222292679330
[팁] 그림판 3D에서 누끼 제거하는 방법 (투명 배경 만들기)
1. 그림판 3D 실행하기 (1) 윈도우 검색창에서 그림판을 검색하세요.(2) 그림판 3D 프로그램을 선택하세...
blog.naver.com
(4) ico 파일로 변환해 주세요.
- 이미지 파일을 ico 파일로 변환해 주는 사이트를 이용하면 됩니다.
- 저는 아래 사이트를 이용했는데, 쉽고 편리했습니다.
Tip! 회원가입/로그인 하지 않고도 변환이 가능합니다
PNG ICO 변환 (온라인 무료) — Convertio
png 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요.
convertio.co
3. 파비콘 적용하기
(5) 파비콘을 적용해 주세요.
(5-1) 티스토리를 이용중이라면, 블로그 관리 / 파비콘 불러오기 / 업로드 / 완료
(5-2) 일반 홈페이지에 적용하고 싶다면,
FTP 접속프로그램을 통해서 서버에 접속한 후 <head>에 태그를 직접 입력하세요.
<link rel="shortcut icon" href="/경로 및 파일명 .ico"> => <link rel="shortcut icon" href="favicon .ico">
※ 기타 변환 사이트
favicon.ico Generator
Preview Favicon in original size:
www.favicon.cc
(6) 파비콘이 적용되었는지 확인하세요.
'IT & UX_UI' 카테고리의 다른 글
| 🔗 [UX/UI] 국내외 Wireframe Tool 소개 및 난이도 (2/6) (0) | 2021.05.13 |
|---|---|
| 🔗 [UX/UI] 국내외 UX/UI 관련 Tool 및 경험상 난이도 (1/6) (0) | 2021.05.12 |
| 🛒[라방] '라이브 커머스' 5개 업체의 UX/UI 를 비교해 봤어요~ (0) | 2021.04.22 |
| 🌐[디자인 소스] 다양한 이미지 소스를 구할 수 있는 해외 마켓 소개 (0) | 2021.04.20 |
| 🎨 [UX/UI] 그림판 3D에서 누끼 제거하는 방법 (투명 배경 만들기) (0) | 2021.04.09 |