파비콘 만들기 사이트, ico 파일 생성 사이트

파비콘은 웹브라우저에서 보여지는 작은 아이콘으로 책갈피역할을 합니다.
수 십개가 열려있는 브라우저 탭에서 쉽게 찾을 수 있으며 사이트의 아이덴티티 역할도 해줍니다.

브라우저 탭에 이렇게 보여집니다. 아무것도 아닌것 같아도 아무것도 아닌게 아닙니다. 포토샵에서 파비콘 이미지를 만들고, 쉽게 ico로 변환해주는 사이트입니다. 파비콘을 만들어서 티스토리에도 적용해보세요.

🌍 지금 소개할 파비콘 만들어주는 아래에 있는 "파비콘 제너레이터" 사이트입니다.

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

파비콘 사이즈

파비콘의 기본사이즈는 16x16 pixel 입니다.
32x32 pixel, 96x96pixel로 가능합니다.

안드로이드, 아이폰(애플), ms용으로 사이즈를 만들 수 있습니다.

파비콘 이미지 만들기

파비콘 이미지를 만들기 위해서 포토샵이나 일러스트로 이미지를 만듭니다.
파비콘 사이즈는 310x310에 맞게 그려준 후 png나 jpg 파일로 저장합니다.
여러 운영체제에 맞는 파비콘을 만들 수 있는데 여기에서 최대 사이즈가 310x310입니다.

저는 배경이 없는 투명한 png 파일로 파비콘 이미지를 저장했습니다.

파비콘 이미지 icon로 변환하기

이미지가 준비되었다면 ico 파일로 변환하면 됩니다.
ico로 변환은 파비콘 변환 사이트를 이용하세요.
간단하게 ico는 물론 app 아이콘까지 만들어주는 사이트입니다.

🌏 www.favicon-generator.org

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

①
Generate your favicon icon에서
[파일선택]을 한 후 [Create Favicon]을 클릭해줍니다.

1번에서
"Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps"는
일반 웹사이트, 안드로이드, ms 아이폰(애플)에서 적용되는 사이콘을 만들때 선택하세요.

2번은
브라우저 파비콘 ico만 단순하게 만들 때
"Generate only 16x16 favicon.ico"를 선택하면 됩니다.

3번은
업로드한 이미지 사이즈 그대로 이용할 것인지 체크합니다.

4번은
만들어진 파비콘을 이 사이트 갤러리에
게시할 것인지 선택할 수 있어요.

②
1번에서 파비콘을 다운로드 받으세요.
다운로드 받은 파비콘 이미지 압축을 해제한 다음
다운로드 받은 파일을 모두 서버에 저장하세요.

<head>와 </head>사이에 아래처럼 파비콘 소스를 복사해서 넣습니다.
아래 소스를 보시면 파비콘은 루트 디렉토리로 되어 있습니다.
원래 파비콘은 /루트 디렉토리에 있는 것이 맞습니다.
루트 디렉토리에 웹문서가 많고 관리하기 힘들다면 지정된 폴더에 png 파일을 저장하고 이미지 경로를 수정해줍니다.
(href="파비콘 png 경로")

Generate only 16x16 favicon.ico을 선택했을 때는 파비콘 ico 만 복사해서 저장해주면 됩니다.

파비콘을 포토샵이나 일러스트없이 직접 그릴 경우 이 사이트에서는 편집창도 제공하고 있네요.
https://www.favicon-generator.org/image-editor/

Free Online Image Editor

Join to access discussion forums and premium features of the site.

www.favicon-generator.org

티스토리에 파비콘 적용

티스토리에 파비콘을 적용하는 것은 아주 간단합니다.
소스를 넣지 않아도 됩니다.
그냥 ico 파일만 등록해주면 끝~

①
티스토리 관리화면에서 [관리 > 블로그]로 들어갑니다.

②
파비콘에서 불로오기로 ico를 선택한 후
[변경사항 저장]을 클릭하면 티스토리에 파비콘이 적용됩니다.

파비콘위에 있는 아이콘에도 파비콘과 같은 이미지를
적용하고 싶다면 다운로드 받은 파일 중에서
32x32 또는 64x64 를 찾아 저장해 주면 됩니다.

파비콘 생성 사이트를 이용해서 간단하게
파비콘을 만들어보세요.

움직이는 파비콘 생성 사이트

움직이는 파비콘을 만들 수 있어요.
티스토리에 움직는 파비콘은 적용되지 않습니다.(참고)

방법은 [Import image]를 선택해서 파비콘 이미지를 넣어줍니다.
애니메이션을 위해서 [Append New Frame]을 클릭해서 생성해주고
[Copy Previous Frame]을 클릭해서 이전 프레임을 복사해주고
파비콘의 위치를 바꾸거나 색상을 바꾸어줍니다.

또는 파비콘을 다른 모양으로 그려서
프레임을 추가해 애니메이션 파비콘을 만들 수 있습니다.

Priview에서
애니메이션 미리보기를 확인할 수 있습니다.
적용하기 전에 open license를 확인해보세요.

🌍 애니메이션 파비콘 만들기 사이트 바로가기

favicon.ico Generator

Preview Favicon in original size:

www.favicon.cc

폰트와 png 이미지를 ico 파비콘으로 만드는 사이트

함께 보면 좋은 글

티스토리에 파비콘 쉽게 넣어보자!🍓

파비콘은 브라우저에 작은 이미지를 넣어 고유 웹페이지를 표시하는 기능으로 사용됩니다. 파비콘으로 변환해주는 사이트로 간단하게 만들 수 있습니다. 만드는 방법은 포토샵을 이용하거나

amango.tistory.com

icomoon 사용법 아이콘 폰트 직접 만들어보자!

icomoon을 이용해서 fontawesome과 같이 아이콘 폰트를 직접 만들 수 있습니다. 천천히 따라서 만들어보세요. ① 일러스트 파일로 아이콘 만들어 svg 파일로 저장하기 ② icomoon에서 아이콘 폰트로 만들

amango.tistory.com

Favicon.io - The Ultimate Favicon Generator (Free)

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

favicon.io

무료 아이콘 사이트 - BEST 7개 사이트🍄

무료 아이콘 폰트 사이트 BEST 7개 전에는 일러스트에서 직접 폰트를 그려서 png로 저장해서 쓰거나 svg로 저장해서 썼는데요. 지금은 그냥 무료 아이콘 사이트에서 가져옵니다. 깨지지 않는 아이

amango.tistory.com

저작자표시 비영리 변경금지

'웹관리' 카테고리의 다른 글

구글 드라이브 파일 공유 해보자.(엄청 쉬움 😅) (1)	2022.04.12
네이버 미션위젯 설치하기 (0)	2022.03.24
구글 미트(google meet) 배경화면 설정, 바꾸기 추가하기 (0)	2022.03.06
구글미트(google meet) 사용법 화상회의 프로그램치고는 100% 쉽다😘 (0)	2022.03.05
티스토리에 애드센스 코드 자동으로 넣기 (0)	2022.03.01

잡다지식 | 🍋에이망고🍓🍋🍉

파비콘 만들기 사이트, ico 파일 생성 사이트

파비콘 사이즈

파비콘 이미지 만들기

파비콘 이미지 icon로 변환하기

티스토리에 파비콘 적용

움직이는 파비콘 생성 사이트

폰트와 png 이미지를 ico 파비콘으로 만드는 사이트

함께 보면 좋은 글

'웹관리' 카테고리의 다른 글

티스토리툴바

파비콘 만들기 사이트, ico 파일 생성 사이트

파비콘 사이즈

파비콘 이미지 만들기

파비콘 이미지 icon로 변환하기

티스토리에 파비콘 적용

움직이는 파비콘 생성 사이트

폰트와 png 이미지를 ico 파비콘으로 만드는 사이트

함께 보면 좋은 글

'웹관리' 카테고리의 다른 글

'웹관리' Related Articles

티스토리툴바