블로그 브랜딩, 파비콘(favicon) 만드는 방법

     2021년을 맞아 블로그를 조금 손보았습니다. 기존 글에 대한 반복되는 수정 작업은 어뷰징으로 간주될 수 있어 좋지 않지만, 저는 항상 변화를 추구합니다. 변화를 주고 적응하는 과정에서 모르던 지식을 습득하며 발전합니다.

    걔다가 연도가 바뀌고 새해를 맞은 상황에서 저로썬, 변화하지 않을 이유가 없었습니다. 

    파비콘

    블로그 디자인 변경

     그래서 파비콘을 바꿨습니다. 변경 전 파비콘은 저해상도의 도트 이미지였습니다. 그래서 프로필 사진과 동일한 이미지를 적용하지 못했었죠. 하지만 변경 후 파비콘은 프로필 이미지와 동일합니다. 통일성이 갖춰졌죠.

    통일성이란 브랜딩을 의미하기도 합니다.

    파비콘 (favicon) 이 뭘까?

    파비콘을 변경하며, 확장자 명에 대한 의문이 생겼습니다.

    프로필 이미지나 아이콘 이미지는 흔히 아는 jpg, png 파일이 적용되는데, 파비콘은 확장자명이 ico입니다.

    왜 그럴까요? 파비콘이란 무엇일까요.

    파비콘이란?

    파비콘이란?

    • favicon = favorite + icon = 즐겨찾기 + 아이콘
    • 웹사이트 주소 옆이나 브라우저 탭에 나타나는 작은 아이콘
    • 아이콘 크기 : 16*16, 32*32, 48*48, 64*64 픽셀 가능
    • 아이콘 컬러 : 8비트, 24비트, 32비트 가능
    • 1999년 인터넷 익스플로러에 첫 도입 (현재까지도 변경 없음)
    • 웹사이트 운영자가 직접 설정 가능
    • .ico 포맷 사용

    티스토리 블로그 파비콘 (favicon) 적용 방법

    • 설정 → 관리 → 관리 → 블로그 관리 → 파비콘 설정 → 적용 완료

    티스토리 블로그 파비콘 적용 방법


     

    파비콘 만드는 방법 (사이트) 3가지 소개

     파비콘을 어떻게 만들면 좋을까, 에 대해서 검색해보고 알아보니 딱히 정답이 없었습니다.

    본인이 만들고자 하는 아이콘이 어떠한 느낌인가를 먼저 정한 후에 소개드리는 3가지 방법 중 하나를 선택하면 됩니다.

    소개드리려 하는 3가지 방법 (파비콘 만드는 사이트)에 대한 선택에 따라서 전혀 결과물이 다를 수 있습니다.

    1. favicon.io

    특징 

    • 이미지 파일을 이용한 파비콘 제작을 할 수 없음
    • 알파벳 한 두자 정도의 텍스트를 이용한 파비콘 제작 가능
    • 깔끔하고 눈에 띄며, 높은 해상도의 결과물을 얻을 수 있음 (48*48픽셀, 32비트)
    • 독창성이 떨어짐, 다른 웹사이트와 중복될 가능성 매우 높음

    제작 방법

    참조 - favicon.io 웹페이지

    1. 네모 박스 부분을 모두 설정
    2. 오른쪽 상단 - Download

    사이트 링크

     

    Favicon.io - The Ultimate Favicon Generator (Free)

    With Favicon.io you can quickly generate a favicon for your website for free!

    favicon.io


    2. favicon.ico Generator

    특징

    • 이미지 파일을 이용한 파비콘 제작 가능 (이미지 파일이 없어도 가능)
    • 16*16픽셀을 이용한 색감 표현 → 해상도 품질이 떨어짐 (16*16픽셀, 32비트)
    • 16*16개의 도트 안에 색칠 놀이하는 재미가 있음

    제작 방법

    참조 - favicon.cc 웹페이지
    참조 - favicon.cc 웹페이지

    1. Import Image (이미지 불러오기)
    2. 이미지 파일 선택 (파일 삽입)
    3. 이미지 업로드
    4. 원하는 이미지로 도트 세팅 (한 번에 원하는 이미지 나왔을 시 건너뛰어도 무관함)
    5. 다운로드

    사이트 링크

     

    favicon.ico Generator

    Preview Favicon in original size:

    www.favicon.cc


    3. Favicon & App Icon Generator

    특징

    • 이미지 파일을 이용한 파비콘 제작 필수
    • 16*16픽셀을 이용한 색감 표현 → 해상도 품질이 떨어짐 (16*16픽셀, 32비트)
    • 제작이 가장 간편함

    제작 방법

    참조 - favicon Generater 웹페이지

    1. 이미지 파일 선택
    2. Create Favicon (파비콘 생성)
    3. 다운로드

    사이트 링크

     

    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


     

     지금까지 파비콘(favicon) 이 무엇이며, 티스토리에 나만의 파비콘을 어떻게 적용하는지, 그리고 파비콘을 쉽게 만들 수 있게 해주는 파비콘 제작 사이트 3가지에 대하여 정리해 보았습니다.

    사실 파비콘을 굳이 제작하거나, 설정하지 않아도 블로그에 전혀 영향이 없습니다. 단지 자기만족일 뿐이라 생각합니다.

    그러나 본인의 블로그의 가치를 높이고, 성취감을 맛보는데 파비콘이 한몫할 것이라 것은 확신합니다.

    많은 분들에게 도움이 되길 바라며, 마치겠습니다.

    긴 글 읽어주셔서 감사합니다.


    가장 추천하는 파비콘 사이트 (업데이트)

    https://favicon.io/favicon-converter/ - 사용도 매우 간편, 퀄리티도 매우 훌륭!

     

    제 모든 포스팅은 정성과 노력으로 작성되며, 제품 리뷰 또한 마찬가지입니다.

    두손의 노트 블로그와 함께 성장하실 협업 담당자님의 연락을 기다립니다.


     

    제 글이 마음에 드신다면, 구독과 공감 부탁드립니다.

    협찬 및 제품 지원 문의 - dosonnote@gmail.com

    댓글(26)

    Designed by JB FACTORY