mirror of
https://github.com/ruisaraiva19/favycon.git
synced 2026-09-12 19:51:07 +05:00
3588ab0506
Two changes to the about modal, in the same file: Rui's credit pointed at a Twitter handle and now points at ruisaraiva.dev, with a globe icon. Augusto keeps Twitter and Miguel keeps GitHub, so the link type is now one of three rather than a binary — hence a small lookup instead of a second ternary in the JSX. The icon is drawn from circle, line and ellipse primitives rather than path data, so the geometry is exact. Because the globe is stroked where the GitHub mark is filled, the dark-mode rule for it has to set stroke rather than fill. Both were checked in both themes. The subtitle said "follow these guys on Twitter", which only one of the three links now is, so it drops the platform. The contact address moves from hello@favycon.app, which is no longer in use, to hello@ruisaraiva.dev. |
||
|---|---|---|
| .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!