목차
이미지파일을 파비콘과 아이콘 파일로 바꿔주는 사이트
웹 브라우저를 통해 웹사이트에 접속하면 뜨는 아이콘, 익숙하시죠? 이 아이콘을 ‘파비콘’이라고 합니다.
파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 즐겨찾기 아이콘을 뜻합니다.
웹 브라우저 주소창이나 탭, 북마크 등에 표시되는 작은 아이콘으로, 웹사이트를 대표하는 이미지입니다.
파비콘을 설정하지 않으면 브라우저에서 기본으로 제공하는 아이콘으로 보입니다.
파비콘을 등록해 놓는다면 웹사이트에 이동했을 때나 웹사이트를 즐겨찾기 해 놓았을 때 더 돋보일 수 있습니다.
이번에는 JPG나 PNG파일을 ico파일로 변환하는 방법에 대해 알아보겠습니다.
기본적으로 ico파일을 만들기 위해서는 jpg, png와 같은 이미지 파일을 가지고서 ico파일로 변환을 해주는 작업이 됩니다.
변환 방법은 별도의 프로그램이 아닌, 변환 사이트를 이용해서 할 텐데, 변환 방법도 간단하고 속도도 빨라서 편리하게 사용을 하실 수가 있습니다.
단 파비콘이나 아이콘을 만들기 전 적당한 이미지를 미리 준비해 두셔야 합니다.
파비콘과 아이콘 만들기
파비콘을 만들 이미지를 준비 하셨다면 아래 사이트로 이동을 하여 줍니다.
Favicon & App Icon Generator (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
이미지파일 하나로 아이콘(png)과 파비콘(ico)까지 함께 만들 수 있습니다.
- 파일 변환 전 체크상항
1. 아이콘(png)을 다양한 크기로 만들려면 이곳을 선택합니다.(Zip파일로 저장됨)
2. 파비콘(ico) 1개만 만들려면 이곳을 선택합니다.(16 ×16 ico 파일로 저장됨)
3. 'Include your favicon.ico in the public gallery.(공개 갤러리에 파비콘. ico을 포함하십시오)' 체크를 풀어줍니다.
- 체크상항 확인 후
4. 설정을 확인 후 '파일선택'을 클릭하여 변경할 이미지를 불러옵니다.
5.'Create Favicon(파비콘 만들기)'를 클릭합니다.
● Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps를 선택한 경우
6. 'Download the generated favicon(생성된 파비콘을 다운로드)'를 클릭하여 다운로드합니다.
- 다운로드된 Zip파일은 다운로드 폴더에 저장됩니다.
● Generate only 16x16 favicon.ico를 선택한 경우
6. 'Download the generated favicon(생성된 파비콘을 다운로드)'를 클릭하여 다운로드합니다.
- 다운로드된 ico파일은 다운로드 폴더에 저장됩니다.
아이콘 파일과 파비콘 파일의 예제
32×32픽셀 PNG이미지 (아이콘 파일)
16×16픽셀 ICO이미지 (파비콘 파일)
파비콘 및 아이콘 티스토리에 등록하기
블로그 상단에서 '내 블로그' 클릭 후 내 블로그에서 아래처럼 관리홈으로 진입합니다.
① 우측 상단의 (T) 모양 메뉴 클릭
② '관리'를 클릭하여 '블로그 관리홈'으로 이동합니다.
'블로그관리홈'에서 하단의 '블로그 > 관리'로 들어갑니다.
아이콘과 파비콘을 불러온 후 하단의 '변경사항 저장'을 클릭 후 블로그를 새로고침 하면 웹사이트 상단에 파비콘이 나온걸 확인할 수 있습니다.
그 외 아이콘을 만들어 주는 사이트
한글이 지원되는 사이트이며, 아이콘외 이미지 압축 등 다양한 도구들이 있습니다.
다만 16×16 ico파일이 아닌 16×16 png파일로 만들어 줍니다.
무료 파비콘 생성기 - 아이콘 선택 또는 이미지 사용 (websiteplanet.com)
무료 파비콘 생성기 - 아이콘 선택 또는 이미지 사용
웹 사이트 파비콘을 생성해보세요 - 매우 빠르고 쉽게 해결할 수 있습니다! 아이콘 갤러리에서 선택하거나 나만의 이미지 파일을 업로드해보세요 (지원형식: GIF, JPG, PNG)
www.websiteplanet.com
무료 아이콘과 파비콘 이미지를 다운로드할 수 있는 사이트
무료 아이콘 다운로드 Material Symbols and Icons - Google Fonts
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
무료 개체 파비콘을 다운로드할 수 있습니다. (freefavicon.com)
Free object favicons to download.
www.freefavicon.com
"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"
'▸티스토리 이야기 > •티스토리 꾸미기' 카테고리의 다른 글
| 티스토리 I 마우스 오버시 썸네일이 움직이는 애니메이션 효과 만들기 (0) | 2023.03.21 |
|---|---|
| 티스토리 북클럽 스킨 | 태그(Tag) 숨기는 방법 (0) | 2023.03.14 |
| 티스토리 북클럽 스킨 I 본문 ' 뉴북' 및 커버 '뉴스레터' 제목 잘림 수정하기 (1) | 2023.03.08 |
| 티스토리 북클럽 스킨 I 본문 상단 타이틀 수정 및 사이드바와 피드 여백 조정 방법 (12) | 2023.03.07 |
| 티스토리 I 로딩 이미지 만들기 · 로딩 이미지 다운로드 사이트 (17) | 2023.03.07 |
