파비콘 아이콘을 만드는 중입니다. 파비콘을 생성하는 보편적인 방법입니다. 완성된 이미지의 파비콘

파비콘(Favicon)은 말 그대로 "좋아하는 아이콘"으로 번역되는 용어로서 현대 웹 디자인의 가장 복잡한 요소 중 하나로 간주됩니다. 이는 브라우저 탭, 검색창 및 기타 위치에 있는 작은 이미지로, 사이트 개인화에 중요한 역할을 합니다.

비표준 형식과 작은 크기로 인해 파비콘을 만드는 것은 기술적인 관점과 디자인적인 관점 모두에서 어려울 수 있습니다.
똑같이 어려운 작업은 다양한 브라우저와의 파비콘 호환성을 보장하는 것입니다.

이 기사에서는 파비콘을 만드는 방법을 배웁니다. 디자인 팁을 제공하고 파비콘을 만드는 서비스와 사이트에 파비콘을 추가하는 방법에 대해 설명합니다.

파비콘이란 무엇이며 왜 필요한가요?

파비콘은 매우 작은 그래픽 개체라는 사실에도 불구하고 웹사이트 디자인 및 일반 분야에서 매우 중요합니다.

그림을 확대하려면 클릭하세요.

첫째로, 파비콘은 사이트를 더욱 개인화하고 로고와 같은 다른 그래픽 요소와 일관성을 갖도록 해줍니다.

둘째 , 파비콘은 검색 결과 목록에서 귀하의 사이트를 다른 웹 리소스와 구별합니다. 이 미니 아이콘이 없는 사이트는 지루해 보이고 경쟁업체에 뒤처지게 됩니다. 한마디로, 파비콘은 단순히 웹사이트의 "필수품"입니다.

제삼 , 파비콘을 사용하면 사용자는 북마크 디렉터리나 데스크탑의 기타 아이콘에서 사이트를 빠르게 찾을 수 있습니다.

파비콘 디자인 만들기

파비콘은 웃는 얼굴 크기의 작은 간판에 ​​본질과 브랜드를 반영해야 합니다. 회사 로고의 단순화된 버전이 좋은 솔루션이 될 수 있지만 텍스트와 상표가 포함된 완전한 로고는 이러한 목적에 적합하지 않다는 점을 명심하십시오.

이러한 웹사이트는 해당 브랜드의 그래픽(또는 최소한 이와 유사한 것)을 사용합니다.

텍스트를 사용하지 마세요

파비콘의 크기가 작기 때문에 비문을 읽을 수 없으므로 텍스트 사용을 피해야 합니다. 아이콘에 1~2개의 문자를 입력하세요. 예를 들어 회사 또는 웹 리소스 이름의 첫 번째 문자를 입력하세요. 이 경우에도 여전히 구별할 수 있습니다.

파비콘 픽셀화

파비콘은 너무 작아서 모든 픽셀이 중요합니다. 전체 크기 로고를 더 작게 만들면 이미지가 흐릿하게 나타나는 경우가 많습니다.

전체 크기 Facebook 로고를 32x32 크기로 축소한 후의 조각입니다. 이미지가 가장자리 주위에 "떠있는" 것을 쉽게 알 수 있습니다. 이러한 결함을 방지하려면 픽셀 수준에서 편집을 수행해야 합니다.
아이콘 작업을 할 때 저는 래스터 이미지 편집 프로그램(예: Photoshop 또는 Pixelmator)을 사용하는 것을 선호합니다. 먼저 전체 크기 로고를 64x64픽셀로 축소합니다. 왜냐하면 그것이 필요한 가장 큰 파비콘이기 때문입니다. 작업은 매우 힘들고 한 시간 또는 두 시간이 걸릴 수 있지만 결과는 매우 훌륭합니다.
그러한 작업에 필요한 시간과 기술이 없다면 다음과 같은 온라인 서비스를 이용하는 것이 좋습니다. Logotizer.ru

파비콘 크기

64x64 아이콘을 받은 후 같은 방법으로 32x32, 24x24, 16x16 픽셀의 아이콘을 만듭니다. 각각에는 고유한 목적이 있습니다.

– 64×64 – Safari 및 Windows의 “읽기 목록”
– 24×24 – IE9에 고정된 사이트.
– 32×32 – 고해상도 화면용.
– 16x16 – 일반적으로 IE, Safari, Chrome 등과 같은 브라우저에서 사용됩니다.

그러나 더 작은 파비콘을 만드는 것은 여기서 끝나지 않습니다. 픽셀 수준에서 추가 편집이 필요한 경우가 많습니다. 적합하다고 판단되면 알파 채널을 추가할 수도 있습니다. 이전에 이로 인해 어려움이 있었다면 이제 거의 모든 브라우저가 파비콘의 투명성을 지원합니다.

파비콘 형식

이전에는 Windows ICO 파일만 지원되었을 때는 16x16 파비콘을 GIF로 저장하고 .ico 확장자를 지정하여 시간을 절약할 수 있었습니다. 이 기술은 완벽하게 작동했습니다! 그러나 이제 ICO 파일을 생성하는 도구를 인터넷에서 쉽게 찾을 수 있으므로 이 방법이 필요하지 않습니다. 또한, 현재는 파비콘에 사용되지만 가장 일반적인 것은 여전히 ​​다음 두 가지뿐입니다.

ICO

손바닥은 ICO 형식에 속합니다. PNG 파일과 달리 ICO 파일은 다양한 해상도와 비트 심도(Windows에 적합)로 제공될 수 있습니다. Internet Explorer는 다양한 크기의 파비콘(예: Windows 7의 32픽셀 작업 표시줄 아이콘)을 사용하므로 이 경우 ICO 형식이 유일한 옵션입니다.

PNG 파일은 파일을 만드는 데 특별한 도구가 필요하지 않기 때문에 매우 편리합니다. 이 형식은 알파 채널을 지원하며 매우 작은 파일을 만들 수 있습니다. 아마도 PNG 형식의 유일한 단점은 Internet Explorer 브라우저에서 지원되지 않는다는 점일 것입니다.

다른 옵션도 있습니다:

– GIF 및 애니메이션 GIF 형식은 매우 오래된 브라우저와의 호환성 외에는 장점이 없습니다.
– 이미지가 사진 형태라도 JPG 형식은 권장하지 않습니다. 이 형식은 PNG의 선명도가 부족하며 유일한 장점은 색상 간 전환이 더 부드럽다는 것입니다. 이는 아주 작은 이미지에서는 전혀 눈에 띄지 않는 뉘앙스입니다.
– 더 많은 브라우저가 이 형식의 파비콘을 지원한다면 SVG는 훌륭한 옵션이 될 수 있습니다. 현재로서는 Opera와의 호환성만 있습니다.
– Firefox 및 Opera에서 지원되는 소위 PNG의 "하위 형식"인 APNG(애니메이션 PNG)도 있습니다. 그러나 그 활용 가능성은 여전히 ​​의문이다. 애니메이션 파비콘은 사용자의 주의를 산만하게 하고 심지어 짜증나게 할 수도 있습니다.

온라인 파비콘 만들기 - 도구 및 온라인 서비스

우리는 온라인 파비콘을 만드는 데 도움이 되는 가장 유용한 서비스를 선택했습니다.

로고타이저

Logotizer는 귀하의 웹사이트에 대한 파비콘과 로고를 생성하기 위한 새롭고 간단하며 편리한 서비스입니다.
이 온라인 메이커를 사용하면 처음부터 파비콘을 만들 수 있습니다. 이 서비스는 초보자를 대상으로 하기 때문에 좋은 디자인을 개발하는 것은 어렵지 않을 것입니다.

Logotizer 온라인 생성기를 사용하여 파비콘을 만드는 방법

주요 작업 영역은 왼쪽에 있습니다. 오른쪽에서는 브라우저 탭, 컴퓨터 작업 표시줄, 스마트폰 화면 등 다양한 미디어에서 파비콘이 어떻게 보이는지 확인할 수 있습니다. 매우 편리하고 명확합니다.

먼저 파비콘의 모양을 선택해야 합니다. 50개가 넘는 많은 항목이 있습니다. 파비콘을 쉽게 인식하고 기억할 수 있도록 간단하고 복잡하지 않은 형식을 선택하는 것이 좋습니다.

이 단계에서는 파비콘의 배경이 될 폼의 색상도 결정하고, 프레임도 선택합니다. 로고에서 어떤 색상이 주요 색상인지(있는 경우), 웹사이트의 주요 색상은 무엇인지 살펴보세요. 이 범위 내에서 파비콘 디자인을 만드는 것이 좋습니다.

"Shape" 블록 아래에는 모양(기호) 모음이 있습니다. 그 수가 많지 않고 자신만의 옵션을 업로드할 수 없다는 점이 아쉽습니다. 하지만 그 선택은 여전히 ​​매우 흥미롭습니다.

피규어의 색상, 크기, 위치를 변경해보세요! 한마디로 실험해 보면 다행스럽게도 서비스를 통해 이를 수행할 수 있습니다.

모양을 선택하고 나면 텍스트를 추가할 수 있습니다. 앞서 썼듯이 1~2글자를 사용하는 것이 좋으며, 그 이상은 사용하지 않는 것이 좋습니다.

광범위한 글꼴 선택이 있습니다. 이것은 확실히 플러스입니다. 모양과 마찬가지로 텍스트의 색상, 크기 및 위치를 변경할 수 있습니다.

일부 파비콘 레이어가 일시적으로 귀찮거나 전혀 필요하지 않다고 판단되면 간단히 숨길 수 있습니다.

파비콘을 생성한 후 서비스는 파비콘 저장을 제안합니다. 계정을 등록하고 (2017 년에는 등록 없이는 방법이 없습니다) 그 후에는 199 루블의 소액 지불로 파일을 다운로드 할 수 있습니다.

이 사이트에는 사이트에 파비콘을 추가하는 방법에 대한 간단한 지침도 포함되어 있으므로 사이트에 파비콘을 추가하는 데 문제가 없을 것입니다. 이 문서 아래에도 유사한 권장 사항이 제공되어 있습니다.

결제 후 사용자는 현재 필요한 모든 장치에 대해 다양한 크기의 파비콘 10개(Apple 터치 아이콘, Microsoft 애플리케이션 아이콘 등)를 즉시 받습니다.

favicon.ico 파일 자체는 다양한 크기로 되어 있으며 하나의 파일에 4가지 크기(16px, 24px, 32px, 64px)의 아이콘이 포함되어 있습니다. 따라서 브라우저 북마크에 사이트를 추가하거나 기록을 열면 다양한 크기의 아이콘을 볼 수 있지만 흐릿함 없이 선명하게 표시됩니다.

전반적으로 서비스가 좋습니다. 간단하고 편리하며 불필요한 것은 없습니다.

RealFaviconGenerator.net

모든 플랫폼에 대한 파비콘을 생성할 수 있는 간단한 파비콘 생성기입니다. 또한 리소스에서 파비콘을 테스트할 수도 있습니다. 사이트의 URL을 입력하면 모든 브라우저와 운영 체제에서 파비콘이 어떻게 보이는지 확인할 수 있습니다. 실제 파비콘 생성기는 결함을 수정하고 파비콘을 더욱 좋게 만드는 방법도 알려줍니다.

Favicon.by

Favicon.by PNG, JPG 및 GIF 파일을 .ico 형식으로 변환하는 또 다른 무료이며 사용하기 쉬운 파비콘 생성기입니다. 컴퓨터에서 이미지를 업로드하고 크기(16x16px 또는 32x32px)를 선택한 후 "만들기" 버튼을 클릭하세요. 웹사이트에 결과 파비콘을 저장하려면 지침을 따르세요.

이 서비스를 사용하면 로고를 픽셀 단위로 그리는 것도 가능하지만 솔직히 모든 사람이 그렇게 할 수 있는 것은 아닙니다. 예를 들어, 나는 할 수 없었습니다. 그게 내가 얼마나 비뚤어진 지 :)

웹사이트에 파비콘을 추가하는 방법

사이트 페이지의 HTML 코드를 몇 가지 변경하여 사이트에 파비콘을 추가할 수 있습니다.

1단계: "favicon.ico" 파일을 호스팅 서버에 업로드합니다.

이렇게 하려면 다음 링크를 사용하여 FTP 서버로 이동하세요.
FTP:// [이메일 보호됨]
사용자 이름과 비밀번호를 입력하세요. 이는 호스팅 회사의 관리자 패널에서 얻을 수 있습니다.
파비콘 파일을 루트 디렉터리에 업로드합니다. 루트 디렉토리는 일반적으로 "public_html" 또는 "www"라고 합니다.

2단계: HTML에 파비콘을 추가합니다.

FTP 서버 창을 열어둔 상태에서 “index.html” 또는 “header.php” 파일을 다운로드합니다.
그런 다음 코드를 다운로드해야 합니다. 다운로드하는 코드는 웹사이트에 따라 다릅니다.
사이트가 HTML로 되어 있는 경우 index.html 파일에서 HEAD 영역을 찾아 다음 코드를 붙여넣습니다.

사이트가 WordPress에 있는 경우 header.php 파일에서 HEAD 영역을 찾아 다음 코드를 붙여넣습니다.

/favicon.ico" />

이 코드를 사용하면 브라우저가 파비콘을 찾을 수 있습니다.
이제 파비콘을 설치했습니다!

WordPress 및 기타 플랫폼에 파비콘을 추가하는 방법

리소스가 WordPress 또는 다른 CMS를 기반으로 하는 경우 사이트에 파비콘을 추가하는 것은 매우 간단합니다. 일반적으로 다양한 플랫폼에 대한 파비콘을 추가하는 알고리즘은 동일합니다.
1. 사이트 콘솔로 이동해야 합니다.
2. "디자인" 또는 "외관" 섹션을 찾으세요.

3. "테마 설정" 섹션으로 이동하여 "파비콘"을 찾으세요.

4. 컴퓨터에서 파비콘을 업로드하세요.

5. 페이지를 저장하고 새로 고칩니다.

더 복잡한 파비콘을 만드는 방법

이 문서에서는 거의 모든 브라우저 및 운영 체제와 호환되는 파비콘을 만드는 간단하고 빠른 방법에 대해 설명합니다. 그러나 웹 디자인 및 개발에는 한계가 없습니다. 더 복잡한 파비콘, iOS 홈 화면용 터치 아이콘, Windows의 Metro 인터페이스용 아이콘, Google TV용 아이콘 등을 만드는 방법을 배우고 싶다면 다음 자료를 확인하는 것이 좋습니다. 파비콘 치트 시트. 여기에는 주제에 대한 완전한 정보가 포함되어 있으며 좋은 소스를 제공합니다. 이는 지속적으로 지식을 확장하려는 디자이너와 개발자(나 포함)에게 훌륭한 옵션입니다.

Favico.js를 사용하면 숫자가 포함된 동적 파비콘을 만들 수 있습니다.

숫자가 바뀌는 아이콘이 있는 동적 파비콘이 필요할 수도 있습니다. 이러한 파비콘을 만들려면 서비스를 사용하는 것이 좋습니다 favico.js, Github에서 사용 가능합니다. 동적 파비콘은 아직 모든 브라우저와 호환되지 않습니다. 그러나 이를 지원하는 브라우저의 경우 이러한 아이콘은 흥미롭고 유용한 추가 기능이 될 수 있습니다.

이 글에 또 다른 팁을 추가하고 싶거나 질문이 있으시면 아래에 댓글을 남겨주세요!

웹사이트용 파비콘을 만드는 방법 - 팁 및 서비스업데이트 날짜: 2018년 2월 7일 작성자: 관리자

파비콘은 모든 웹사이트에서 중요한 역할을 합니다. 존재하지 않고 생성할 방법이 없는 경우 어떻게 해야 할까요? 프로젝트에서 사이트에 대해 미리 만들어진 파비콘을 다운로드할 수 있습니다.

안녕하세요, 블로그 사이트 독자 여러분.

오늘 우리는 파비콘 주제에 대해 계속 연구할 것입니다. 즉, 이미 기성품이 많이 있는 프로젝트를 분석할 것입니다. 즉, 독특하고 멋지며 기억에 남는 파비콘이 필요하다면 하루 종일 머리를 쥐어짜며 아이디어를 찾아낸 다음 Photoshop을 사용하여 구현해야 할 필요가 없습니다. 웹사이트용으로 미리 만들어진 파비콘을 다운로드하려면 다음 몇 단계만 완료하면 됩니다.

1. 아래 목록에서 프로젝트를 선택하세요.
2. 파비콘을 찾으세요.
3. 사이트에서 다운로드하여 설치하세요.

기성 파비콘을 무료로 다운로드할 수 있는 프로젝트(16×16)

1. Findicons.com.

쓰레기 같은 기성품 파비콘(475,000개)이 있습니다. 사용자 친화적인 인터페이스, 핵심 문구로 검색이 가능합니다. 꼭 사용해 보세요. 파비콘은 무료이므로 비용을 지불할 필요가 없습니다. 다운로드하려면 다음을 클릭하세요. ICO 다운로드.

2. Iconj.com.

첫 번째 프로젝트와 유사하지만 검색만 없습니다. 페이지를 클릭하여 검색해야 합니다. 파비콘 반대편에 있는 ICO를 클릭하여 다운로드하세요.

3. Faviconka.ru.

무기고에 2118개의 기성 아이콘이 있는 간단한 프로젝트입니다. 직접 링크를 따라가서 파비콘을 수동으로 저장하세요.

그것이 전체 목록입니다. 이 3가지 프로젝트가 귀하에게 충분하기를 바랍니다.

파비콘이 있는데 사이트에 어떻게 설치하나요? 친구 여러분, 제가 이에 대해 자세히 이야기 한 기사가 이미 블로그에 있습니다. 당신을 기다리고 있습니다(마지막 섹션).

WordPress에 파비콘을 설치하는 방법

여기서는 두 가지 방법으로 갈 수 있습니다:

1. 수동으로 수행 - 코드로 표시합니다.
2. 또는 플러그인을 사용하여 설치하세요.

코드를 사용하여 WordPress에 파비콘을 설치합니다.

2단계. Appearance => Editor 섹션에서 header.php 파일을 찾아야 합니다. 이 파일에 다음 코드를 붙여넣어야 합니다(아래 ):

< link rel = "shortcut icon" href="/favicon.png" />

모두. WordPress의 Favicon(코드 포함)이 성공적으로 설치되었습니다.

플러그인을 사용하여 WordPress에 파비콘을 설치합니다.

1단계. 플러그인을 다운로드해야 합니다. 올인원 파비콘.링크 여기.

2단계. 플러그인 설정으로 이동해 보겠습니다.

파비콘을 업로드하면 작업이 완료됩니다.

WordPress에서 플러그인을 사용하는 것은 바람직하지 않습니다. 긴급한 경우에만. 예를 들어 코드로 대체할 수 없는 경우입니다. 플러그인은 영향을 미치며 결과적으로 검색 결과에 표시될 수 있습니다.

오늘의 정보는 이것이 전부입니다. 이 기사가 유용하고 귀하의 질문에 대한 답변을 찾았기를 바랍니다. 관심을 가져주셔서 감사합니다.

감사합니다, Mogish Ivan

내 블로그 방문자 여러분, 안녕하세요. 오늘 저는 온라인에서 파비콘을 만드는 데 도움이 되는 10가지 서비스를 준비했습니다. 또한 기사 끝부분에서 제 생각에는 가장 편리한 사이트 5개를 강조했습니다.

우선, 파비콘이 무엇인지 이해하는 것이 가치가 있습니까? 이 개념은 많은 분들이 잘 아실 거라 생각합니다만, 다시 한 번 말씀드리겠습니다. 한마디로 이것은 귀하 사이트의 아이콘입니다. Yandex에서 검색할 때 사이트 옆에 작은 16x16 아이콘이 표시되므로 이것이 파비콘입니다. 일부 브라우저의 주소 표시줄과 북마크에서도 볼 수 있습니다.

이 작은 그림은 무엇보다도 귀하의 브랜드입니다. 사람들은 이를 통해 귀하의 사이트를 알아볼 것입니다. 따라서 Yandex 검색에서 즉시 볼 수 있도록 독창적이고 기억에 남는 것이어야 합니다. 이렇게 작은 아이콘을 스스로 그리는 것은 어렵고 사진에서 파비콘을 만드는 데 도움이 되는 온라인 서비스가 구출됩니다. 그 중 일부를 순서대로 살펴보고 각각의 강점과 약점을 살펴보겠습니다.

• 사용하기 편리합니다.
• 사진으로 파비콘을 만들거나 직접 그릴 수도 있습니다.
• 전문가에게 주문할 수 있습니다.
• 결과 결과 미리보기.
• 내 생각에는 아무 것도 없으며 필요한 모든 것이 사이트에서 제공되며 기성 아이콘 갤러리가 없다는 점만 강조할 수 있습니다.

1. 
   

   • 그림으로 만들거나 직접 그릴 수 있습니다.
   • 생성 후 사이트에 추가할 수 있는 링크의 예가 표시됩니다.
   • 모든 것이 영어로 되어 있습니다.
   • 추악한 디자인.
   • 이미지를 생성할 때 이미지를 자르는 것은 불가능합니다.

2. 3 www.Chami.com

3. 
   

   • 아름다운 사용자 친화적인 인터페이스.
   • 사진으로 파비콘을 만들거나 직접 그릴 수도 있습니다.
   • 그림을 그리기 위한 큰 색상 팔레트입니다.
   • 미리보기가 없습니다.
   • 모든 것이 영어로 되어 있습니다.
   • 기성 아이콘 갤러리가 없습니다.

4. 
   

   • 사용자 친화적 인 인터페이스.
   • 추가 사항은 없습니다.
   • 기성 아이콘 갤러리가 없습니다.
   • 혼자서 그리는 것은 불가능합니다.
   • 생성 중에는 이미지를 자를 수 없습니다.

5. 
   

   • 편리하고 아름다운 인터페이스.
   • 추가 사항은 없습니다.
   • 직접 그리거나 그림에서 생성할 수도 있습니다.
   • 기성 아이콘 갤러리가 있습니다.
   • 아이콘을 만들거나 압축할 때 아이콘의 크기를 유지할 수 있습니다.
   • 시사.
   • 애니메이션 아이콘을 만들 수 있습니다.
   • 칠할 수 있는 색상이 엄청나게 많습니다.
   • 모든 것이 영어로 되어 있습니다.

6. 
   

   • 아이콘 크기는 16×16 및 32×32 중에서 선택할 수 있습니다.
   • 추가 기능은 없으며 이미지에서 파비콘을 생성하는 것뿐입니다.
   • 미리보기가 없습니다.

7. 
   

   • 시사.
   • 기성품 아이콘의 대규모 컬렉션입니다.
   • 이미지 자르기가 가능합니다.
   • 모든 것이 영어로 되어 있습니다.
   • 사이트에 오류가 있습니다.
   • 불편한 인터페이스.

8. 
   

   • 아이콘 크기는 16×16, 32×32, 48×48, 64×64 중에서 선택할 수 있습니다.
   • 모든 것이 영어로 되어 있습니다.

9. 
   

   • 추가 사항은 없습니다.
   • 아이콘 크기를 선택할 수 있습니다.
   • 직접 그리거나 사진을 이용해 온라인으로 파비콘을 만들 수 있습니다.
   • 이미지를 자르는 옵션이 없습니다.
   • 미리보기가 없습니다.

더 많은 온라인 서비스가 있지만 저는 10가지 온라인 서비스만 소개했습니다. 제 생각에는 이것들이 가장 인기가 있는 것 같습니다. 다른 것을 사용하는 경우 댓글에 적어주시면 나와 다른 독자들이 이에 대해 알고 싶어할 것입니다.

그리고 이제 약속대로 TOP 5 편리하고 고품질의 서비스가 있다고 생각합니다.

이것이 나의 상위 5개입니다. 어떤 서비스를 먼저 배치하고 어떤 서비스를 마지막에 배치할지 알고 싶습니다. 댓글에서 답변을 듣게 되어 기쁩니다.

추신 아직 파비콘을 직접 만들지 못했다면 홈페이지를 꼭 확인해 보세요 Faviconka.ru. 여기에는 모든 취향에 맞는 2,000개 이상의 기성 아이콘이 있습니다. 이 기사가 귀하에게 도움이 되기를 바라며 온라인에서 파비콘을 만드는 서비스를 찾았기를 바랍니다.

파비콘이란 무엇입니까?

파비콘이 무엇인지 모르시는 분들을 위해 빠르게 이해하는 데 도움이 되는 작은 정보를 제공해 드리겠습니다. 파비콘은 16x16 또는 32x32 픽셀 크기의 작은 아이콘으로 일반적으로 로고, 브랜드의 첫 글자 또는 비즈니스 유형이나 사이트 테마를 반영하는 특징적인 이미지를 포함합니다.

파비콘이 중요한 이유는 무엇입니까?

파비콘은 다음 기능을 수행합니다.

브랜딩.

사용자가 사이트를 식별합니다(사용 편의성).

사이트에 전문적인 느낌을 줍니다.

파비콘 사용의 주요 이점을 자세히 살펴보겠습니다.

브랜드 인지도

파비콘은 작은 사이트 아이덴티티와 같습니다. 서문에서 언급했듯이 파비콘은 사용자가 본 수많은 사이트 중에서 귀하의 사이트를 기억하는 데 도움이 됩니다. 인터넷 사용 기록, Google 검색 결과, 브라우저의 북마크된 사이트 목록 등 파비콘은 사용자가 사이트를 쉽게 인식하고 액세스할 수 있도록 도와줍니다.

신뢰

사용자는 웹사이트의 전문성을 기준으로 상품 및 서비스의 온라인 판매자를 판단하는 경향이 있습니다. 파비콘이 없는 형태의 부주의(검색 엔진은 파비콘이 없는 사이트를 빈 문서의 아이콘으로 표시함)로 인해 쉽게 신뢰를 잃을 수 있으며, 특히 사용자가 귀하를 경쟁업체와 비교할 때 더욱 그렇습니다.

반복 방문

사람들은 텍스트보다 이미지에 더 잘 반응하는 것으로 알려져 있습니다. 이제 귀하의 사이트 방문자가 처음 방문했을 때 서두르다가 나중에 다시 방문할 수 있도록 북마크에 추가하기로 결정했다고 가정해 보겠습니다. 나중에 이 사람이 귀하의 사이트를 다시 방문하기로 결정하고 북마크를 사용한다고 가정해 보겠습니다. Google의 눈에 띄고 독특한 G와 같이 눈에 띄는 파비콘이 있고 사용자가 귀하를 찾을 수 있다면 운이 좋습니다. 파비콘이 없으면 북마크 목록에서 삭제될 수도 있습니다.

사용자 시간 절약

파비콘은 빠른 식별을 위해 브라우저가 파비콘을 배치하는 북마크, 기록 또는 기타 장소에서 사이트를 식별하는 데 소요되는 사용자 시간을 절약합니다. 이는 귀하의 사이트를 방문하는 일반 방문자의 삶을 더 쉽게 만들어줍니다.

SEO 혜택

귀하의 사이트에 파비콘이 있으면 파비콘이 없는 사이트보다 검색 결과에 더 많이 표시되므로 더 많은 방문자를 유치할 수 있습니다.

파비콘을 만드는 방법은 무엇입니까?

몇 분 안에 파비콘을 만들 수 있는 도구가 많이 있습니다. 디자인 기술이 없거나 어떻게 해야 할지 모른다면 Logaster를 사용하여 파비콘을 생성해 볼 수 있습니다.

이렇게 하려면 단계별 지침을 따르십시오.

5단계: 파비콘 만들기

이제 로고가 생겼으니 로고 페이지에서 “이 로고로 파비콘 만들기”를 클릭하세요.

6단계. 원하는 파비콘 디자인을 선택하세요.

로고와 마찬가지로 Logaster는 수십 개의 아름답고 바로 사용할 수 있는 파비콘을 생성합니다. 마음에 드는 디자인을 선택하세요. 미리보기를 통해 파비콘이 사이트에서 어떻게 보이는지 확인할 수 있습니다.

파비콘을 변경해야 하는 경우 로고 디자인을 기반으로 파비콘이 생성되는 것처럼 로고를 편집하면 됩니다. 따라서 예를 들어 다른 파비콘 색상을 원하는 경우 로고 페이지로 돌아가서 색상을 변경한 다음 파비콘을 다시 만들어야 합니다.

다음 사이트에서 파비콘에 대한 영감을 얻을 수 있습니다.

7단계. 파비콘 다운로드

파비콘은 별도로 9.99달러에 구매하거나, 파비콘뿐 아니라 로고, 명함, 봉투, 레터헤드 등이 포함된 디자인 팩을 구매할 수도 있다. 디자인팩 구매방법을 확인하실 수 있습니다.

결제 후 ico 및 png 형식의 파비콘을 다운로드할 수 있습니다.

파비콘은 어디에서 사용할 수 있나요?

파비콘을 사용할 수 있습니다:

그 자리에서;

모바일 장치. 사용자는 장치의 홈 화면에 파비콘(북마크와 같은 것)을 추가할 수 있습니다(Android, IOS, Windows Phone 등).

PC/Mac용 프로그램 및 애플리케이션.

웹사이트에 파비콘을 설치하는 방법은 무엇입니까?

파비콘을 받으면 서버에 설치하는 데 몇 분도 걸리지 않으며 두 단계로 완료됩니다. 이렇게 하려면 사이트의 루트 디렉토리에 액세스하고 사이트의 HTML 코드를 변경하기 위한 텍스트 편집기가 필요합니다.

1 단계. favicon.ico 파일을 서버에 업로드해야 합니다. 이렇게 하려면 FileZilla와 같은 FTP 클라이언트를 다운로드하여 설치해야 합니다. 그런 다음 사용자 이름과 비밀번호를 입력하고 파일을 다운로드하십시오. 파비콘 파일을 업로드하는 방법에 대한 자세한 지침을 읽어보세요.

2 단계.이제 브라우저가 파비콘 이미지를 찾을 수 있도록 사이트의 HTML 페이지를 편집해야 합니다. FTP 창이 열린 상태에서 서버에서 index.html 또는 header.php 파일을 찾아서 다운로드하세요.

텍스트 편집기(Notepad, Notepad++, Sublime Text)에서 index.html 파일을 엽니다.

사이트에 순수 HTML이 포함되어 있는 경우 index.html 파일의 HEAD 영역에 특수 코드를 붙여넣으세요.

코드는 Logaster 웹사이트의 파비콘 페이지에서 복사할 수 있습니다.

WordPress를 사용하는 경우 header.php 파일의 HEAD 영역에 아래 코드를 붙여넣습니다.

이 작업을 완료한 후 파일을 받은 위치로 다시 다운로드하세요. 준비가 된! 파비콘을 보려면 사이트 페이지를 새로고침하세요.

대부분의 최신 브라우저는 그러한 코드 없이도 파비콘 파일을 찾을 수 있을 만큼 똑똑하지만 파비콘에 favicon.ico라는 이름의 16x16 픽셀 이미지가 있고 사이트의 루트 디렉터리에 저장되어 있는 경우에만 가능합니다.

이 기사가 귀하의 웹사이트를 더욱 성공적이고 매력적으로 만드는 파비콘을 만드는 데 도움이 되는 몇 가지 유용한 정보를 제공하였기를 바랍니다.

워크숍 스타일의 새로운 수업으로 이번에는 파비콘의 비밀을 배웁니다. 파비콘 - 북마크와 브라우저 표시줄에 표시되는 작은 아이콘입니다. 나만의 홈페이지가 있고, 작은 것에도 남들보다 돋보이고 싶다면 - 파비콘 필요한. 물론 그래픽 식별이 없는 희미한 주소 목록을 배경으로 하면 북마크 중에서 가장 유리해 보입니다. 그러나 우리의 수업은 파비콘을 브라우저 표시줄에 첨부하는 방법보다는 Photoshop에서 자신만의 파비콘을 그리는 방법에 관한 것입니다.

파비콘을 어떤 형식으로 저장해야 하나요?

그것은 모두 브라우저에 따라 다릅니다. 을 위한 마이크로소프트 익스플로러적합한 아이콘 형식 ICO. 커서를 만들 때 이미 이 형식을 접했습니다. 다른 브라우저의 경우 구글 크롬~ 전에 애플 사파리레귤러가 할게 GIF또는 PNG. 파비콘반투명할 수 있습니다. 이렇게 하려면 반투명으로 저장해야 합니다. PNG을 누른 다음 형식으로 변환합니다. ICO. 이것은 좋은 프로그램에서 할 수 있습니다 IcoFX.그러나 파비콘을 생성하는 타사 사이트가 많이 있으며 그 중 가장 눈에 띄는 사이트는 www.favicon.ru입니다.

웹사이트에 파비콘을 배치하는 방법은 무엇입니까?

그것을 확신하는 방법 파비콘작동할까요? 4가지 조건이 충족되어야 합니다.

• 파일 이름은 - 파비콘.
• 파비콘 크기 16 ~에 16px
• 파비콘의 최적 위치는 사이트의 루트 폴더입니다.
• 메타 태그에 아이콘의 주소를 적습니다. 헤더사이트 색인에서

HTML 표현식에서는 다음과 같습니다.

다양한 브라우저에 대해 여러 아이콘을 만들 수 있습니다. 예를 들어 다음과 같은 형식의 아이콘을 만들 수 있습니다. ICO, 그리고 다른 하나는 PNG태그를 통해 이 모든 것을 나타냅니다. 링크 . 최신 브라우저는 대부분 사이트 루트에서 다음과 같은 파일을 검색합니다. 파비콘, 그러나 정확한 링크를 표시하는 것이 나쁠 것은 없습니다.

Photoshop에서 파비콘 만들기

만들다 파비콘매우 간단합니다. 이런 걸 만들고 싶나요? 파비콘 VKontakte나 Odnoklassniki처럼요? 좋은 파비콘인터넷에 가득 찬 모든 종류의 파비콘 "생성기"에서 큰 이미지를 줄이는 것만으로는 불가능합니다. 파비콘은 매우 작습니다. 사실 우리는 일종의 픽셀 아트, 이는 고유한 특성을 가지고 있습니다. 편지를 쓸 수 없고 그냥 줄여서 써도 돼 16px .

좋다 파비콘크기를 조정할 때 글자의 가장자리가 몇 픽셀씩 겹치기 때문에 흐릿하고 불분명해집니다. 그것은 일종의 것으로 판명 될 것입니다 앤티앨리어스, 일반적으로 좋지만 픽셀 아트의 경우 이러한 전환이 필요하지 않습니다. 반면에 원형도에 과도한 "너덜거림"을 피해야 합니다. 그렇지 않으면 hello 1999 gif가 생성될 것입니다.

크기의 파일 만들기 16 엑스 16px . 우리는 매우 간단한 반투명을 만들 것입니다. 파비콘약간의 깊이가 있는 편지 형식입니다. 그림자와 그라데이션을 통해 깊이가 만들어집니다.

배경 그리기

왜 이 레슨의 도입부에서 거대하고 매끄럽고 핥아진 부분을 볼 수 있습니까? 파비콘? 강의 소개를 위해 확대해 봤기 때문이죠. 이미지를 어떻게 질적으로 확대할 수 있었나요? 16px? 간단히 말해서, 사용이 가능하고 타당하다면 항상 벡터로 작업합니다. 그리고 벡터는 어떤 변형에도 쉽게 견딜 수 있으며 품질이 저하되지 않습니다.

도구 선택 둥근 사각형 도구. 설정 패널에서 모드를 선택하면 벡터로 그릴 수 있습니다. 패널의 드롭다운 메뉴에는 확인 표시가 있습니다. 픽셀에 맞추기. 이는 벡터 경로가 픽셀에 맞춰지고 "사이"에 그려지지 않도록 하기 위해 필요합니다.

우리에겐 표면이 있어요 파비콘, 반투명 가장자리는 부드러운 원형을 만듭니다. 이제 흰색 배경을 제거할 시간입니다. 필요하지 않습니다. 가시성을 끄십시오. 또는 해당 레이어를 더블클릭하여 일반 레이어로 만든 후 삭제하세요.