티스토리 파비콘 3분 완성 만들기 (Favicon)

/ 2020. 4. 21. 13:01



Today:


목차

     

     

     

    파비콘 Favicon 이란

     

     

     

    파비콘을 빠르게 만들어 볼려고 합니다. 그 전에 파비콘 (Favicon) 이란 무엇인지 먼저 알아봐야겠죠. Favicon이란 Favorite Icon 의 줄임말로 간단하게 즐겨찾기 아이콘이라고 부릅니다.

     

     

    위의 이미지는 웹서핑을 하다가 가져온 것 인데요. 다들 아시다시피, 다음, 구글, 네이버, 유튜브 등 아주 유명한 사이트들입니다.

     

    이렇게 간단한 아이콘들로 이루어져 있으며, 웹사이트에서 보여지는 16x16 사이즈의 로고들을 바로 파비콘 (Favicon)이라고 합니다.

     

    파비콘은 보통 주소의 왼쪽이나 윈도우 사이트 상단에 나타내는데 요즈음에는 아이폰/안드로이드의 아이콘 영역까지 확장 되가고 있습니다. 따라서 어플의이나 홈페이지의 로고는 생각보다 상당히 중요한 의미를 가지고 있겠죠.

     

     

     

     

    아이콘을 만드는 장소

     

     

    🔻https://favicon.io 파비콧닷아이오라는 사이트입니다. 접속을 하게 되면 아래와 같은 화면이 나오는 것을 확인 하실 수가 있습니다.

     

    영어를 대략 해석해 드리면,

    궁극의 파비콘 생성기 - 몇 번의 클릭으로 파비콘을 만들어보세요. 글자로도 파비콘을 만들어보고, 이미지로도 만들어보고, 아니면 EMOJI (이모티콘)으로도 만들어서 다양한 형식( ico. 혹은 png)로 다운로드 해봅시다.

     

     

     

     

     

    아이콘 만드는 방법  [글자]

     

     

    네, 그렇습니다. 파비콘을 빠르게 만들어 보겠습니다. 첫 번 째 방법은 로고를 따로 가지고 계시지 않으신 분들을 위한 것입니다. 그래서 텍스트/글자로 아이콘을 생성하는 방법을 소개 하겠습니다.

     

    🔻 아래 이미지를 누르시면 바로 연결됩니다. 혹은 홈페이로 접속해서 GENERATE FROM TEXT로 들어가 주시면 됩니다.

     

    이미지를 누르시면 연결됩니다.

     

     

     

     

    🔻 아래 이미지와 같이 각각 입력을 해줍니다. Preview에서 바로 미리보기가 가능하고 오른쪽 상단 위에 Download 버튼으로 다운로드 받아주시면 됩니다.

     

     

     

    🔻 저는 보시다시피 아래처럼 특수기호를 사용해서 아이콘을 만들었습니다.😎

     

     

    🔻 다운로드 받으시고 압축을 풀어주시면 아래와같은 파일들이 자동으로 생성된 것을 발견할 수가 있죠.

     

     

     

    🔻 이제 티스토리 블로그 설정-관리-파비콘불러오기로 해당 ICO파일을 넣어주고 변경사항 저장을 눌러줍니다.

     

     

     

    🔻 제 티스토리 블로그도 이제 파비콘이 생겼네요 감격스럽습니다.

     

     

     

     

     

     

     

    아이콘 만드는 방법  [이미지 PNG]

     

     

    🔻 두 번 째로 이미지로 아이콘/파비콘 만드는 방법입니다. 아래 이미지를 누르시면 링크로 바로 연결됩니다.

     

    이미지를 눌러주시면 바로 연결됩니다.

     

     

     

     

    🔻https://pixabay.com/ko/픽사베이 무료이미지 다운로드에서 아무 아이콘이나 가져왔습니다.

     

     

     

     

    🔻아래처럼 이미지를 드래그해서 점선안으로 넣어주시면 자동으로 생성이 됩니다. 우선 알맞는 이미지를 준비하시는게 좋겠지요

     

    바로 다운 받으셔서 첫 번 째 방법에서와 같이 티스토리에 적용을 시켜주시면 끝이 납니다.

     

     

     

     

     

     

     

    아이콘 만드는 방법  [이모티콘]

     

     

    🔻 세 번 째로 이모티콘/이모지로도 아이콘을 만들 수가 있습니다. 이미지를 누르시면 링크로 바로 연결 됩니다. GENERATE FROM EMOJI를 눌러봅시다.

     

     

     

     

     

     

     

    🔻 수 만가지의 이모지가 존재하는데 이모티콘/이모지 중 마음에 드시는 것을 클릭하시면 됩니다.

     

     

     

     

     

     

     

     

    🔻 아래와 같이 아이콘을 다운 받을 수가 있게 됩니다!

     

     

     

     

     

     

     

    로고허브 LogoHub 로고 만들기

     

     

    🔻 마지막으로 아이콘 뿐만이 아닌 로고 까지 만들 수 있는 기능도 제공을 하기 때문에 소개를 해드리려고 합니다. 마찬가지로 아래 이미지를 누르면 링크가 연결 됩니다.

     

    이미지를 누르시면 연결됩니다.

     

     

     

     

    🔻 위에서 설명드린 것들과 비슷한 기능입니다.

     

    예를 들어 애플파이라는 브랜드 이름을 가지고 로고를 생성해보았습니다. 크게 변경을 할 수 있는 옵션이 없지만 간단하게 만들기 좋네요.

     

     

     

     

     

     

     

     

     

    블로그 읽어주셔서 감사합니다.

    Written by Sun Lee

    공감과 댓글은 작성자에게 힘이됩니다.🥰

     

     

     

    출처: 파피콘닷아이오 PAVICON.IO




    • 네이버 블러그 공유하기
    • 네이버 밴드에 공유하기
    • 페이스북 공유하기
    • 카카오스토리 공유하기