favicon.js

KO | EN

gitlite — search

#javascript #python #hacktoberfest #llm #golang #rust #deep-learning #macos #java #awesome #cli #kubernetes #awesome-list #open-source

(★ 201)

Given a HTML5 canvas return an ICO formatted favicon.

파일 탐색기

최종 버전 다운로드 (.zip)

- bundle.html
- examples.166ded57.js
- examples.166ded57.js.map
- favicon.js
- favicon.js.map
- favicon.mjs
- favicon.mjs.map
- ico.html
- index.html
- bundle.html
- ico.html
- index.html
- preview.png
- bundle.js
- favicon.js
- ico.js
- png.js
- resize.js
.gitignore
LICENSE
package.json
README.md
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Favicon.js

Favicon.js is a lightweight library that allows you to create ICO and PNG formatted favicons from a canvas element.

## Examples

```
yarn install
yarn examples
```

### Generate ICO

Generate an ICO file from a `<canvas>` element. Initialize a `Favicon.Ico` object with a canvas element. The canvas should be square for best results. Pass the generate method an array of sizes that the (layered) ICO file should contain.

```JavaScript
const favicon = new FaviconJS(canvas);
const dataurl = favicon.ico([16, 32, 48]);
```

### Generate PNG

Generate a PNG file from a `canvas` element. Initialize a `Favicon.Png` object with a canvas element. The canvas should be square for best results. Pass the generate method the size that should be generated.

```JavaScript
const favicon = new FaviconJS(canvas);
const dataurl = favicon.png(32);
```

### Generate Bundle

Generate multiple favicon format based on current best practices.

```JavaScript
const favicon = new FaviconJS(canvas);
const package = favicon.bundle();
```

The bundle will contain the follow keys which map to common favicon formats.

- `ico` - favicon.ico
- `png16` - favicon-16x16.png
- `png32` - favicon-32x32.png
- `png180` - apple-touch-icon.png
- `png192` - android-chrome-192x192.png
- `png512` - android-chrome-512x512.png

### Example

The example below will generate an ICO formatted favicon that includes 3 sizes: 16x16, 32x32, and 48x48 pixels. The full example can be found [here](./examples/ico.html).

![Preview](https://raw.githubusercontent.com/johnsorrentino/favicon.js/main/examples/preview.png)

```JavaScript
// Setup canvas
const canvas = document.getElementById("canvas");
canvas.width = 128;
canvas.height = 128;
const context = canvas.getContext("2d");

// Draw background
context.fillStyle = "#d85537";
context.fillRect(0, 0, canvas.width, canvas.height);

// Draw text
context.fillStyle = "#FFFFFF";
context.font = "100px Helvetica";
context.textBaseline = "middle";
context.textAlign = "center";
const x = canvas.width / 2;
const y = canvas.height / 2;
context.fillText("F", x, y);

// Create favicon.ico dataurl
const favicon = new FaviconJS(canvas);
const dataurl = favicon.ico([16, 32, 48]);

// Activate the download button
const download = document.getElementById("download");
download.href = dataurl;
download.setAttribute("download", "favicon.ico");
```

favicon.js

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

favicon.js

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README