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!