매번favicon.ico가 잘못되지 않아 힘들었기 때문에 한순간에favicon.ico 생성

@yushimatenjin.며칠 전 PlayCanvas 운영 사무국으로 Qiita의 Organization을 등록했습니다.오늘은 자꾸 틀렸다고 생각하지만 조금만 주의를 기울이지 않았다favicon & 설정이 좀 번거로운 문제를 해결했기 때문에 공유합니다.

favicon에 가입할 때 나타나는 console가 없습니다.나는 error의 표시가 매우 마음에 든다.

HTML 파일을 만들 때마다 오류가 발생합니다.

뭐 공부 해요?

나는 단지 명령을 만들었을 뿐, 한순간에favicon을 생성할 수 있다.이번에는 그저 그렇다. 나는 좀 가치가 있다고 생각해서 투고했다.
이런 느낌은 순식간에 만들어진다favicon.ico.

파비콘이 뭐예요?

favicon.ico에 대한 정의가 잘 안 나와서 저도 favicon을 조사해 봤어요.
w3.org -How to Add a Favicon to your Site에 따르면 Favicon의 형식은
- 8ビット 또는 24ビット- 크기16x16 또는 32x32 픽셀
- 이미지 형식은 png, gif 및 ico예.2005년의 정보도 새것입니까? 후방에 교환이 있을 것 같습니다. 이 규격에 따라 제작되었습니다.

VM 자동 생성

npm의 이동 환경에서.이번에 만든 favi 라이브러리를 사용하면 カレントディレクトリ 자동으로 생성됩니다 favicon.ico.
주요한 이동 방법은 두 가지가 있다.

npx 사용

npx를 사용하여 실행

npx favi

설치 사용

1. 글로벌 설치

npm install -g favi

2. 실행

favi

실행 결과

현재 디렉토리favicon.ico에 추가됩니다.

컨텐트

제작된 라이브러리는 GitHub에 공개됩니다.
yushimatenjin/favi

canvas-node

사용한 외부 라이브러리로 canvas★6000↑ 의 라이브러리를 사용했다.
GitHub의 스타 수는 6000, Node를 넘는다.js에서 Canvas와 유사한 작업을 수행할 수 있는 라이브러리입니다.
다중 지원 Web Canvas API 은 생성된 이미지를 내보낼 수 있습니다.
이 라이브러리Node.js를 사용하면 브라우저에서 canvas 쓰기 방법으로 이미지를 만들 수 있습니다.
favi.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fs = require("fs");
const canvas_1 = require("canvas");

const CANVAS_SIZE = 32;
const OUTPUT = "./favicon.ico";
const canvas = canvas_1.createCanvas(CANVAS_SIZE, CANVAS_SIZE);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
ctx.fill();
ctx.fillStyle = "rgba(255,98,89,1);";
ctx.font = "40px sans-serif";
ctx.fillText("●", 5.0, CANVAS_SIZE - 4);
ctx.fill();

const out = fs.createWriteStream(OUTPUT);
const stream = canvas.createPNGStream();

stream.pipe(out);
out.on("finish", () => console.log("The favicon was created."));

이 원본 코드가 생성된 컨트롤러가 바로 이것입니다.

신중을 기하기 위해 Mac 표준 미리보기 기능으로 확인해 보세요

32x32픽셀

색상 공간: RGB

이것은 프로젝트를 만들 때마다 적당한 준비를 하는 데 시간이 걸리는 것을 없앴다favicon.
ps. 이미지 복사 느낌이 좋아요.