mirror of
https://github.com/ruisaraiva19/favycon.git
synced 2026-09-12 11:40:34 +05:00
60d571fe11
Resized from a 512x512 source to 112x112, the size the other two use and twice the 56px it renders at. The circle is baked into the file, not applied by CSS — the component sets no border-radius at all, and the existing avatars are pre-masked with fully transparent corners. A plain square resize rendered as a square next to two circles, so the mask is composited in with dest-in. PNG with palette quantisation: 8.3 KB against 28.6 KB for straight RGBA, with no difference visible at 3x magnification on either the face or the masked edge. That also puts it under the 13.1 KB the other two weigh. |
||
|---|---|---|
| .github | ||
| .husky | ||
| .storybook | ||
| .vscode | ||
| components | ||
| cypress | ||
| hooks | ||
| pages | ||
| public | ||
| styles | ||
| utils | ||
| .all-contributorsrc | ||
| .editorconfig | ||
| .eslintignore | ||
| .eslintrc.json | ||
| .gitignore | ||
| .npmrc | ||
| .nvmrc | ||
| .prettierignore | ||
| .prettierrc | ||
| .stylelintrc.json | ||
| commitlint.config.js | ||
| cypress.config.ts | ||
| LICENSE | ||
| lint-staged.config.js | ||
| next-env.d.ts | ||
| next.config.js | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| release.config.js | ||
| tsconfig.json | ||
| vercel.json | ||
| yarn.lock | ||
Favycon
A favicon generator tool
A small online tool to help you generate your favicon in all the sizes and formats you need.
Browser favicon formats supported
| IE | Edge | Firefox | Chrome | Safari | iOS Safari | Chrome Android | |
|---|---|---|---|---|---|---|---|
| ico | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| png | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ |
| svg | ❌ | ✅ | ✅ | ✅ | ⚠️ | ⚠️ | ✅ |
Favicon recommended sizes
| apple-icon | favicon | ms-icon | pwa | |
|---|---|---|---|---|
| 57x57 | ✅ | |||
| 60x60 | ✅ | |||
| 72x72 | ✅ | ✅ | ||
| 76x76 | ✅ | |||
| 114x114 | ✅ | |||
| 120x120 | ✅ | |||
| 144x144 | ✅ | ✅ | ✅ | |
| 152x152 | ✅ | ✅ | ||
| 180x180 | ✅ | |||
| 16x16 | ✅ | |||
| 32x32 | ✅ | |||
| 96x96 | ✅ | ✅ | ||
| 128x128 | ✅ | |||
| 192x192 | ✅ | ✅ | ||
| 384x384 | ✅ | |||
| 512x512 | ✅ | |||
| 70x70 | ✅ | |||
| 150x150 | ✅ | |||
| 310x150 | ✅ | |||
| 310x310 | ✅ |
HTML tags to add for all favicon sizes
<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/favicon-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- SVG favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PWA compatible -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, install the project dependencies:
yarn install
Then, run the development server:
yarn dev
Open http://localhost:3000 with your browser to see the result.
Also, you can run the Storybook server:
yarn storybook
Open http://localhost:6006 with your browser to see all stories.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 Rui Saraiva 🚇 💻 📖 💬 🚧 |
 Augusto Lopes 🎨 |
 Miguel Teixeira 💻 👀 |
This project follows the all-contributors specification. Contributions of any kind welcome!