Favicon으로 Font Awesome 아이콘 사용

109

그것은 사용할 수 있습니다 글꼴 최고 파비콘 아이콘으로 아이콘을? 브라우저 탭에서 웹 사이트 제목 옆에 나타나는 작은 아이콘을 알고 계십니까?

favicon font-awesome

— 코너 블랙
소스

38

네, 그렇습니다. 원하는 캐릭터의 스크린 샷을 찍고 원하는 부분을 잘라 이미지 (.ico)로 저장하면됩니다.

진지하게 이제 각 브라우저에서 지원하는 형식을 확인할 수 있습니다. http://en.wikipedia.org/wiki/Favicon#File_format_support

캐릭터가 이미지 또는 벡터 파일 인 경우 대부분의 브라우저에서는 괜찮지 만 IE는 괜찮을 것입니다 ~~(MS는 당신을 싫어하기 때문입니다)~~ . 그렇지 않으면 먼저 이미지로 저장해야합니다.

— 레난
소스

3

라이센스가 허용합니까?

— 예술 solopov

3

@ 예술 - solopov 예, 그것은 않습니다 - 당신은 그들의 라이센스 페이지에서 그것을 확인할 수 있습니다 fortawesome.github.io/Font-Awesome/license

— 르낭

OFL을 읽었으며 글꼴 형식 변경 또는 글리프에서 이미지 구성과 관련된 내용을 찾지 못했습니다. 누락 된 항목이 있으면 죄송합니다. 특정 섹션을 알려 주시겠습니까? 감사합니다.

— art-solopov

스크린 샷 제안에 대해 비추천했습니다. 이를 달성하기위한 많은 무손실 방법이 있습니다.

— metaColin

2

@marcogmonteiro 당신이 방문하는 경우 fontawesome.com/download 당신이 .svg 파일로 아이콘을 다운로드 할 수 있습니다. 대부분의 브라우저는 .svg 자산을 파비콘으로 받아들입니다. 이전 버전의 IE를 지원해야하는 경우 Photoshop 또는 Illustrator를 사용하여 .svg를 변환하여 깔끔한 래스터 자산 (예 : .png)을 얻을 수 있습니다.

— metaColin

289

편집 : http://gauger.io/fonticon 을 사용하는 것이 좋습니다.

이를 위해 온라인 Font Awesome Favicon Generator를 만들었습니다!

Font Awesome Favicon Generator를 참조하십시오 .

— 폴 페렛
소스

7

빠르고 효과적입니다. +1!

— U rsus

2

색상을 정의 할 수 있어야합니다!

6

@Freddy는 실제로 생성기가 이미 가능하며 UI를 구축하지 않았습니다. RGB HEX 색상 값을 사용하여 각각 배경 및 전경에 대한 params bg 및 fg를 전달합니다. 예를 들어, paulferrett.com/fontawesome-favicon/...

— 폴 Ferrett에게

7

@ paul-ferrett : 생성 된 아이콘의 크기를 변경하는 방법이 있습니까?

— vgoklani

4

멋진 구현입니다. 불행히도 요즘에는 16x16 파비콘만으로는 충분하지 않습니다. 필요한 모든 크기의 파비콘이 포함 된 zip을 다운로드하면 좋을 것입니다.

— coorasse

85

또한 Paul Ferrett의 솔루션에서 누락 된 추가 기능이 있는 온라인 Font Awesome Favicon Generator 를 만들었습니다 .

브라우저에서 라이브 파비콘 미리보기
아이콘 크기
투명 아이콘 및 배경
거대한 이미지 크기 (아이콘은 원하는만큼 상세 할 수 있음)
iconset은 github pull 요청을 통해 업데이트 할 수 있습니다.
2017 년 06 월 업데이트 Font Awesome 4.7로 업데이트
2017 년 6 월 업데이트 퍼지 검색 및 키워드 검색
업데이트 09/2017 누적 아이콘
Font Awesome 5.0.13으로 2018 년 6 월 업데이트 업데이트
2018 년 11 월 업데이트 Font Awesome 5.5.0으로 업데이트
업데이트 2019 년 4 월 Font Awesome 5.8.1로 업데이트
2019 년 4 월 업데이트 는 Font Awesome Pro에 대한 지원을 추가했습니다 !

추가 기능을 원하시면 여기에 문제를 제출하거나 풀 요청을 보내주십시오 .

— 식
소스

@vgoklani 제안 사항이 있으시면 알려주세요 :)

— eclipse

@eclipse : 정말 감사합니다! 이것은 저에게 많은 고통을 덜어주었습니다.

— sam

이러한 노력에 감사드립니다. 먼저 몇 가지주의 사항을 알려드립니다 . 이미지를 다운로드 할 때 너비와 높이가 항상 1024이고 실제 크기로 조정되어야합니다. 두 번째 : 슬라이더 값의 크기를 작성하거나 numberbox에 더 잘 설정할 수 있습니다

— Saif

1

스택 아이콘 지원으로 개선했습니다. PR이 검토 대기 중입니다.

— trung

2

라이브 탭 미리보기 기능이 마음에 듭니다!

— Tot Zam

11

모든 이미지는 다음과 같은 파비콘 생성기 사이트에 업로드 할 수 있습니다.

http://favicon-generator.org/

또는

http://www.favicon.cc/

선택한 사이트의 온라인 지침을 따르십시오. 일반적으로 3 단계 프로세스입니다. 사이트의 최상위 레벨에 파비콘을 저장합니다.

브라우저 간 호환성을 위해 항상 파비콘에 이미지를 사용하는 것이 좋습니다. 만든 일부 사이트가 최신 브라우저 전용 인 경우에도 여전히 파비콘 아트 워크를 이미지로 변환합니다. 동일한 프로세스를 지속적으로 사용하면 걱정할 일이 하나 줄어 듭니다.

— 기타
소스

2

"사이트가 로컬 인 경우 웹 호스트에 사이트를 업로드 할 때만 Chrome에 파비콘이 표시되지 않습니다." 그것은 정확하지 않습니다.

— U rsus

즐겨 찾기 아이콘을 로컬에서 보는 데 문제가있는 경우. stackoverflow.com/questions/16375592/...

— otherDewi

7

직접 멋진 글꼴 문자를 이미지로 변환하지 않고 파비콘으로 사용할 수는 없습니다. 캐릭터를 이미지로 변환해야합니다 ..

— Shakeel Ahmed
소스