파비콘 만들기 [닫기]

95

내 웹 사이트의 파비콘을 어떻게 만들 수 있습니까?

html  favicon 
— Ry-
소스
1
— Michał Perłakowski
@Gothdo 이것은 중복이 아닙니다! 당신이 가리키는 것은 IS! 이것보다 1 년 반 앞섰습니다!
— Dov Miller
5
이 질문은 프로그래밍이 아니라 웹 디자인에 관한 것이기 때문에 주제를 벗어난 것으로이 질문을 닫는 데 투표합니다.
— Kyll
@DovMiller 더 나은 답변이있는 더 나은 질문은 열려 있어야하는 질문입니다.
— mbomb007

답변:

100

파비콘을 검색하다가 모든 브라우저와 장치에서 작동하려면 10 가지 이상의 파일이 필요하다는 사실을 발견했습니다.

나는 화를 냈고 자신의 파비콘 생성기를 만들었습니다.이 모든 파일과 각각에 대한 올바른 HTML 헤더를 생성합니다. faviconit.com

즐기 셨으면 좋겠습니다.

— 에두아르도 루소
소스
14
훌륭한 앱. 이것은 내가 본 최고의 파비콘 생성기 사이트 중 하나입니다.
— Chris Livdahl 2014 년
1
고마워, 크리스! 기꺼이 도와 드리겠습니다!
— Eduardo Russo
3
@EduardoRusso 이것은 단순히 굉장합니다-감사합니다!
— davnicwil
4
잘 했어. 예상대로 작동합니다.
— Dilshan
1
예상보다 잘 작동합니다! 작은 버그 (?) : 고급을 사용할 때 경로와 버전이 browserconfig.xml에 포함되지 않습니다. 그래도 여전히 좋아합니다. : D
— mrjink
42

파비콘으로 변환하려는 로고 이미지가 이미있는 경우 다음을 사용하여 변환 할 수 있습니다. http://www.favicomatic.com/ . 생생한 파비콘을 생성하고 생성 한 후 편집 할 필요가 없습니다. 16x16 및 32x32에서 파비콘을 생성하고 "모든 크기, 선생님!"을 인용합니다. 이 사이트는 또한 일부 png에있는 투명도를 지원 / 유지합니다. 또한 사이트가 멋지고 사용하기 쉽습니다.

예를 들어 다음은 stackoverflow 로고입니다. 여기에 이미지 설명 입력

다음은 생성 된 파비콘 중 일부입니다.

여기에 이미지 설명 입력 여기에 이미지 설명 입력 여기에 이미지 설명 입력 여기에 이미지 설명 입력 여기에 이미지 설명 입력

또한 필요한 html을 생성합니다.

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

처음 20 개 정도의 Google 결과를 봤는데 이것이 가장 좋았습니다.

— 자레드 메 나드
소스
1
더 이상의 비추천을 피하기 위해이 답변을 어떻게 개선 할 수 있습니까?
— Jared Menard
3
모르겠어요. 귀하의 답변은이 작업을 5 분으로 만들었습니다. 감사.
— andyb
1
어떤 사람들은 이유없이 반대 투표를 좋아합니다. 그래서 그것에 대한 정책이 필요합니다. BTW, 우리는 정말 많은 다른 크기를 필요합니까 또는 우리는 16 × 16와 32 × 32은 충분한 웹 사이트 생성과 같다
— batmaci
저는 개인적으로 여기에 모범 사례가 무엇인지 모릅니다. 내 사이트에서는 하나만 사용한다고 생각합니다. 이는 manifest.json과 결합 될 때 크롬 프로그레시브 웹 앱에 도움이 될 수 있습니다.
— Jared Menard
favicomatic.com 에서이 리소스를 찾았 습니다. "Favicon Cheat Sheet"라고합니다. github.com/audreyr/favicon-cheat-sheet
— Jared Menard
20

김프 는이를위한 좋은 프로그램입니다. 이미지를 PNG로 저장 한 다음

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

온 <HEAD>페이지의 섹션을 참조하십시오.

— 스테파노 보리 니
소스
7
Gimp는 링크를 추가하는 수고를 덜어주는 favicon.ico로 저장하는 옵션도 제공합니다.
4
이전 MSIE (여전히 인기가 있음)가 "적절한"ICO 형식의 파일 대신 PNG를 허용하지 않는 것이 유감입니다.
— Már Örlygsson 2011 년
웹 사이트를 작업 표시 줄에 고정하려면 Windows에도 ico가 필요합니다.
— Necriis 2014
8

16x16, 32x32 또는 64x64 인 아이콘 파일을 만듭니다. 이름을 favicon.ico로 지정하고 웹 사이트 공용 폴더의 루트에 배치합니다.

다른 그래픽 형식을 .ico로 변환하는 웹 사이트가 있습니다. 즉. http://tools.dynamicdrive.com/favicon/

— 짐
소스
4
또한 : 당신이 추가하면 당신이 당신의 파비콘 파일 어디를 저장할 수 있습니다 <link rel="shortcut icon" href="link/to/fav.ico" />받는 <head>페이지의 블록.
— Már Örlygsson 2011 년
1
tools.dynamicdrive.com/favicon도 하나 favico에서 여러 크기를 병합 할 수있는 중대하다
— hdorio는
3

.ico 파일 을 만들려면 김프 를 사용하여 파비콘을 만들 수도 있습니다 . 최신 브라우저는 일반 이미지 파일을 사용할 수 있지만 원래는 .ico 파일이라고 생각합니다. Photoshop과 유사한 오픈 소스 이미지 편집기입니다. 적절한 크기 (예 : 32 x 32)의 이미지를 만들고 편집하고 하나의 레이어로 병합 한 다음 (동일한 파일에 여러 아이콘이있는 경우 제외) .ico로 저장합니다. 올바른 형식을 지정한 다음 Stefano 's <link rel="SHORTCUT ICON" HREF="/favicon.ico">를 사용하여 웹 페이지에서 사용합니다.

— 로켓 원숭이
소스
3

나는 Icon 플러그인 과 함께 오픈 소스 Paint.net 프로그램을 사용합니다 .

그런 다음 .ico 파일에 포함 된 모든 다양한 크기의 이미지를 .ico 형식으로 만들고 저장할 수 있습니다.

— 매튜 락
소스
아이콘 플러그인의 호스트로 paint.net.amihotornot.com.au? 그게 합법적입니까?
— RonaldB
@RonaldB 예, 플러그인의 고향입니다. 이상한 도메인은 그렇지 않다
— 마태 복음 잠금
2

파비콘을 만들 때 다음 요소를 고려할 수 있습니다.

  • 지원되는 플랫폼 10 년 전에는 데스크톱 브라우저 만 지원하고 싶었고 해결책은 고전적인 favicon.ico그림을 만드는 것이 었습니다 . 요즘에는 iOS (및 iOS Safari) 및 Android (및 Android Chrome)를 지원하려고합니다. Windows 10 (및 Edge) 및 새로운 Mac Book Pro Touch Bar (macOS Safari)도 가능합니다. 더 이상 하나의 "모든 크기에 맞는"이미지를 사용할 수 없습니다.
  • 디자인 여러 플랫폼을 지원하는 즉시 여러 디자인 지침에 직면하게됩니다. 예를 들어 Google은 Android의 기본 앱에 투명 아이콘을 사용하고 있지만 iOS 아이콘은 전혀 투명 할 수 없습니다. "단일 디자인이 모든 것에 적합"접근 방식을 사용할 수 없습니다.
  • 생성 된 아이콘 및 HTML 코드 2 ~ 3 년 동안 모든 경우를 다루기 위해 가능한 한 많은 아이콘을 생성하는 것이 참조였습니다. 저는이 트렌드를 혼자서 만들었습니다.-/ 문제는 결국 20 개의 라인이나 HTML로 끝나는 것입니다. 만족스러운 기술 솔루션을 얻으려면 생성 된 아이콘 / HTML의 양과 지원되는 플랫폼의 균형을 맞춰야합니다.

평소와 같이 이러한 모든 자산을 수동으로 만들 수 있습니다. 매우 구체적인 요구 사항과 예산이없는 한 이것은 확실히 갈 길이 아닙니다.

대부분의 사람들에게 올바른 방법은 모든 아이콘의 모양을 결정하고 모든 세부 사항을 처리 할 수있는 파비콘 생성기를 사용하는 것입니다. 이를 수행하는 유일한 것은 Real Favicon Generator 입니다. 전체 공개 : 나는이 사이트의 작성자입니다.

— philippe_b
소스
1

그리고 asp.net을 사용하는 경우 다음 방법으로 페이지에 파비콘을 적용 해보십시오.

<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />

그러나 여기에서 더 많은 정보를 찾을 수 있습니다 : http://doctype.com/

— 타릭
소스
1
참고로 doctype.com은 2013 년 2 월 15 일부로 문을 닫았습니다. 자세히 알아보기 .
— Krease
1

Photoshop을 사용하여 파비콘을 16 x 16 또는 32 x 32로 만듭니다. 나는 그것을 gif로 저장하고 IrfanView 를 사용 하여 gif를 ico로 변환합니다.

— 최대
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.