Faviconify

A favicon generator tool that converts uploaded images into multiple favicon formats and sizes for web applications.

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!