블로그나 카페접속시 주소표시줄에 나만의 유니크한 아이콘 파비콘 표시하기 {유목민 알폰스}

 

블로그나 카페에 접속했을 때 상단에 보이는 주소표시줄에 기본으로 제공하는 아이콘 말고 나만의 유니크한 아이콘을 표시해 봅시다.

이미지 편집이 가능합니다.

• 포토샵 또는 이미지 편집툴로 기존이미지를 수정하거나 직접 이미지 작업을 해서 png 또는 jpg로 저장합니다. 

편집툴이 없고 편집할 줄 몰라요.

• 무료 이미지 사이트에서 맘에 드는 아이콘을 다운로드하셔서 사용하시면 됩니다.
• 이미지는 어떤 종류의 이미지를 받아야 하나요?
• 배경을 투명으로 하고 싶다면 : png확장자의 이미지를 받으시면 됩니다.
• 배경은 투명이 아니라도 상관없다면 : jpg로 받으셔도 됩니다.

 

작업순서

1. PNG이미지 준비 
2. PNG를 ICO파일로 변환
3. 블러그 관리자 모드에서 ICO파일 설정
4. 변경확인

 

1. PNG이미지 준비

이미지를 어디서 구할 수 있을까요? 여러 사이트가 있지만 픽사베이를 추천드립니다.

• 고화질 무료 이미지 다운로드 {유목민 알폰스} (tistory.com)

고화질 무료 이미지 다운로드 {유목민 알폰스}

 

 

배경이 있는 파일의 배경 빼기

포토샵으로 이미지를 열어서 마법툴로 배경을 선택하고 delete키를 눌러서 제거합니다.

png파일로 저장합니다. png확장자는 배경을 투명으로 인식하는 이미지 파일 확장자 입니다.

배경투명 처리

 

 

 

2. PNG를 ICO파일로 변환

1. PNG파일을 불러옵니다.
2. 원하는 사이즈를 설정합니다.
3. 변환버튼을 클릭해서 ICO파일을 생성합니다.

 

PNG를 ICO로 변환 - PNG에서 아이콘 생성하기 - HiPDF

PNG를 ICO로 변환 - PNG에서 아이콘 생성하기 - HiPDF

ICO로 변환

 

 

3. 블러그 관리자 모드에서 ICO파일 설정

자신의 웹사이트나 블러그 또느 케페의 관리자 모드에서 아이콘을 등록합니다. 

블러그 관리자모드

 

 

4. 변경확인

 

기본으로 제공하던 아이콘이 직접 편집한 아이콘으로 변경되었습니다.

웹사이트 접속

 

 

 

파비콘 적용이 안되거나 브라우져별로 다르게 보일때 때 참고 하세요.

ex) 크롬에서는 보이고 윈도우의 엣지에서는 보이지 않을때

티스토리 관리자에서 설정한 파비콘이 적용되지 안될때 해결방법 {유목민 알폰스} (tistory.com)

티스토리 관리자에서 설정한 파비콘이 적용되지 안될때 해결방법 {유목민 알폰스}

 

 

By. 유목민 알폰스 - Alphonse Elric