본문 바로가기

나♡코 티스토리 관련

"정보" 티스토리 꾸미기(파비콘 적용편)

728x90

 

티스토리 꾸미기 네번째는 파비콘(favicon)을 적용해 보는 거에요.

 

사실 관심있게 보지 않으면 눈이 잘 안가는 부분이라

꾸미지 않는 분들도 많지만...

전 이런 부분까지도 블로그와 어울리게 꾸미고 싶더라구요. ㅎㅎ

방법이 정말 간단해요. 그러니 꼭 도전해 보세요~

 

 

 

 

관리자 화면에서 기본정보로 접속하면

블로그 정보를 입력하는 부분이 나와요.

그럼 파비콘이라고 있는데

저 부분에 ico형식의 이미지를 업로드하면 끄읏~

설정하는건 정말 초간단이조?ㅎㅎ

 

 

 

 

 

파비콘에 이미지를 등록하면

이미지처럼 주소창 앞 부분에 저장한 이미지가 보여지는 거에요.

 

소소한 부분이지만 이곳은 나의 블로그요!!!!!!!! 라고

알려줄 수 있는 부분이기도 하조.

 

 

 

 

파비콘을 꾸미려면 가장 중요한게 ico형식의 이미지를 만드는 거에요.

일단 제가 이미지를 만들때 이용하는 사이트는

 http://www.favicon.cc/ 이곳인데..

어디든 만드는 방법은 비슷하기 때문에 각자 편하신 곳을 이용하면 될 듯해요~

 

 

 

 

Import image버튼 클릭!

 

 

 

 

찾아보기를 클릭해서 원하는 이미지를 업로드 하면 되요.

 

단 지원하는 이미지는 jpg, jpeg, gif, png, bmp, ico, cur / 이미지

최대용량은 5메가 이하여야한데요.

 

체크하는 부분의 내용은 이미지를 비율에 맞게 줄일 것이냐...

아님 위아래로 조정할 것이냐를 택하는 건데..

전 항상 이미지는 정사각형에 맞게 만들고 비율에 맞게 줄이는것으로 작업해요.

그래야 이미지도 안 깨지고 이쁘게 잘 올라가거든요.

사실 이미지가 워낙 작아서 깨졌는지 아닌지 잘 보이지도 않긴 하지만...ㅎㅎ

 

 

 

 

원하는 이미지를 업로드 하면

 

 

 

 

요렇게 만들어져서 보여요.

만약 수정하고 싶은 부분이 있다면 이미지 옆쪽에

간단하게 색이나 이런 부분을 바꿀 수 있는 곳이 있으니

참고하시면 좋을꺼 같아요~

 

Download Favicon을 눌러서

만들어진 파비콘 이미지를 컴퓨터에 저장하고

 

 

 

 

위 경로로 접속해서 업로드 하면 끄읏~~~

정말 간단하조..

 

 

저 간단한 방법으로 요렇게 상콤한 주소창을 만들 수 있답니다. ㅎㅎㅎ

 

질문! 파비콘을 움직이는 이미지로 꾸며볼 수 있을까요?

움직이는 이미지로 꾸밀 수는 있어요.

하지만....

모든 브라우저에서 다 움직이는 이미지로 보이는건 아니고...

지원하는 브라우저 에서만 움직이는 이미지로 보여진답니다..

그외 브라우저는 그냥 고정된 이미지로 보이구요.

 

대략.. 크롬이나 익스플로러는 안되고 파이어폭스정도?

많은 브라우저가 지원하진 않지만... 만드는 방법은 알려 드릴께요~

두루두루 알고 있으면 좋은 정보니까요!!

 

 

 

 

일단 움직이는 gif이미지는 포토샵으로 만들수 있지만...

좀더 간단하게 만들 수 있는 방법으로 알려드릴께요...

 

참.. 방법은 간단한데 화질은 포토샵이 월등하게 좋답니다.

큰 이미지를 gif로 만들때는 화질이 많이 떨어져 보일 수 있어요.

 

일단 포토스케이프는게 설치되어 있어야 하는데..

위 프로그램은 이미지 사이즈도 일괄적으로 줄일 수 있고...

gif이미지도 간편하게 만들 수 있어서 저는 자주 사용하는 프로그램이에요.

 

 

 

 

일단 gif 애니메이션으로 접속해서 원하는 사진을 추가해주면 되요.

 

 

 

 

그럼 올려진 이미지들이 움직이는 이미지로 보여질껀데...

속도나 전환효과 등은 원하는데로 설정가능하니 한번 만들어 보세요!

정말 쉬워요.

 

 

 

 

gif로 만들어진 이미지를 아까와 마찬가지로 ico형식으로 만들어 줘요.

만드는 방법은 동일해요.

 

 

 

 

만든 후 티스토리에서 파일업로드를 통해 이미지를 추가해주면 되요.

 

 

 

 

html을 클릭한 후

<head> (요 부분) </head> 사이에

<link rel="shortcut icon" href="./images/favicongif.ico" type="image/x-icon">

위 소스 추가를 해주면 되는데,

빨간 글씨가 파일이름이니 해당 부분만 수정하면 되요~

 

 

 

 

물론 기본정보 쪽에도 파비콘 이미지는 추가해야 하구요~

 

위 방법대로 하면 지원하는 브라우저에서는 움직이는 파비콘으로 보여질테고,

그렇지 않은 브라우저에서는 고정된 파비콘으로 보여질꺼에요.

 

어려운 듯 하지만 막상 해보면 간단하답니다~

 

 

 

나나코노 티스토리

티스토리꾸미기,파비콘적용,파비콘,움직이는 gif,움직이는 이미지,움직이는 파비콘

728x90