ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 티스토리 아이콘/파비콘 만들기 2018 ver
    블로그 Tip 2018. 6. 16. 13:05
    반응형




    티스토리에 아이콘과 파비콘을 만들어볼까요?


    안녕하세요. 다니엘유입니다. 

    이번시간에는 티스토리에 파비콘을 만드는 방법에 대하여 말씀드리려고 합니다.


    파비콘이란? Favicon

    즐겨찾기 (favorites)와 아이콘 (icon)의 합성어 입니다.아래와 같이 주소창에 조그마한 아이콘으로 표시가 됩니다.



    왜 이 파비콘은 왜 만들어야 할까요?

    파비콘의 기능이 있으니깐 만들어야죠. ^^ 티스토리에서는 블로그 사용자에게 최적의 환경을 조성해주고 있습니다.

    파비콘은 나 자신을 알리는 브랜딩 아이콘으로 생각해도 좋을 것 같습니다.



    1. 우선 관리-블로그를 클릭해서 해당 페이지로 들어갑니다.



    2. 페이지에 들어오시면 아이콘, 파비콘이라는 영역이 보이실거에요. 그곳에 아이콘과 파비콘을 만들어 보도록 하겠습니다.




    3. 저는 제 사진으로 아이콘과 파비콘을 만들어보려 합니다.




    위의 사진을 이용하여 아이콘과 파비콘을 각 사이즈별로 한번에 만드는 기능을 가진 사이트가 있습니다.

    이 사이트를 이용하면 하나하나 포토샵이나 그림판 등을 사용하지 않더라도 아이콘과 파비콘을 생성할 수 있어 매우 편리합니다.


    해당 사이트의 주소는 https://www.favicon-generator.org 입니다. 사이트에 들어오시면 파비콘을 만들 수 있습니다.

    외국 사이트라고해서 전혀 어려워하실 필요가 없습니다.

    자! 따라오시죠!


    [파비콘 실전 만들기]

    1. image 부분에 파일선택을 누르신 후 아래와 같이 자신이 넣고자 하는 사진의 폴더로 갑니다. 대신 사진의 비율은 정사각형 이미지를 사용하셔야 합니다. 아이콘과 파비콘은 정사각형이니까요.



    2. 사진을 선택하고 '열기' 버튼을 누르셔서 사진을 첨부하시구요.



    3. 사진이 첨부된 것을 확인하고(유정환.jpg) 'Create Favicon' 버튼을 누르시면 됩니다.



    4. 버튼을 누르시고 나면 아래와 같이 랜딩이 되어지구요. Download the generated favicon 버튼을 클릭하시면 됩니다.



    5. 아래와 같이 압축이 되면서 다운로드합니다.


    6. 다운로드 된 파일을 열면 아래와 같이 수많은 사이즈의 아이콘과 파비콘들이생성됩니다. 여기서 우리는 필요에따라 아이콘과 파비콘을 활용하여 사용하시면 됩니다.



    7. 다운로드 된 폴더를 열어보시면 아래와 같이 각각의 사이즈별로 아이콘과 파비콘이 생성 된 것을 확인하실 수 있습니다. 티스토리에 권장하는 사이즈는 아이콘의 경우 32*32 또는 64*64이며 파일확장자는 jpg, png, gif 로만 업로드가 가능하니 유의하시기 바랍니다.



    8. 파비콘의 경우 확장자가 ico인 파일을 찾으시면 됩니다.아래의 사진을 참고하시기 바랍니다. 찾기가 어려우시다면 제일 작은 사진 찾으시면 됩니다. 




    9. 저의 경우 아이콘은 72*72 사이즈를 선택했고 파비콘의 경우 favicon이라고 써 있는 파일을 선택했습니다. 




    자 그럼! 아이콘과 파비콘이 잘 설정되었는지 볼까요?



    10. 아이콘의 사이즈는 32×32 또는 64×64 에 파일형식은 jpg, gif, png 중에 하나를 사용하시면 됩니다.

    일반적으로는 jpg가 압축률이 높기 때문에 가장 많이 사용합니다.

    또한 파비콘은 확장자가 ICO인 파일을 선택하시면 됩니다.




    티스토리에 파비콘이 잘 적용되었습니다. 혹시라도 하시다가 도중에 막히시거나 질문이 있으시면 언제든지 댓글 남겨주시기 바랍니다. ^^


    그럼 오늘도 행복하세요!

    [티스토리 관련 글 보기]

    2018/06/14 - [블로그 Tip] - 티스토리 초대장 받는 꿀팁

    2018/06/15 - [블로그 Tip] - 티스토리 프로필 이름 변경방법 2018.ver

    2018/06/16 - [블로그 Tip] - 티스토리 html/css는 여기에서!



    반응형

    댓글

Designed by Tistory.