CINXE.COM

<!DOCTYPE html> <html data-html-server-rendered="true" lang="en" data-vue-tag="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D"> <head> <title>Favicon Generator - Image to Favicon - favicon.io</title><meta name="gridsome:hash" content="656814ed5a2dea6d40949c30dc543f986715aa4c"><meta data-vue-tag="ssr" charset="utf-8"><meta data-vue-tag="ssr" name="generator" content="Gridsome v0.7.23"><meta data-vue-tag="ssr" data-key="viewport" name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><meta data-vue-tag="ssr" data-key="format-detection" name="format-detection" content="telephone=no"><meta data-vue-tag="ssr" property="og:type" content="website"><meta data-vue-tag="ssr" property="og:type" content="https://favicon.io/"><meta data-vue-tag="ssr" property="og:title" content="Favicon.io - The Ultimate Favicon Generator (Free)"><meta data-vue-tag="ssr" property="og:description" content="With Favicon.io you can quickly generate a favicon for your website for free!"><meta data-vue-tag="ssr" property="og:image" content="/og-image.png"><meta data-vue-tag="ssr" property="twitter:card" content="summary_large_image"><meta data-vue-tag="ssr" property="twitter:url" content="https://favicon.io/"><meta data-vue-tag="ssr" property="twitter:title" content="Favicon.io - The Ultimate Favicon Generator (Free)"><meta data-vue-tag="ssr" property="twitter:description" content="With Favicon.io you can quickly generate a favicon for your website for free!"><meta data-vue-tag="ssr" property="twitter:image" content="/twitter-image.png"><meta data-vue-tag="ssr" data-key="description" name="description" content="The only favicon generator you need for your next project. Quickly generate your favicon from text, image, or choose from hundreds of emojis."><link data-vue-tag="ssr" rel="icon" href="data:,"><link data-vue-tag="ssr" rel="icon" type="image/png" sizes="96x96" href="/assets/static/favicon.b9532cc.ed88c65f76fa003989a0c683d668c765.png"><link rel="preload" href="/assets/css/1.styles.128869a9.css" as="style"><link rel="preload" href="/assets/js/app.119b0d09.js" as="script"><link rel="preload" href="/assets/js/page--src--pages--favicon-converter-vue.151893d8.js" as="script"><link rel="prefetch" href="/assets/js/page--node-modules--gridsome--app--pages--404-vue.b77c375a.js"><link rel="prefetch" href="/assets/js/page--src--pages--contact-vue.62f3e03d.js"><link rel="prefetch" href="/assets/js/page--src--pages--emoji-favicons--index-vue.4d8906f2.js"><link rel="prefetch" href="/assets/js/page--src--pages--favicon-generator--index-vue.c1adb660.js"><link rel="prefetch" href="/assets/js/page--src--pages--index-vue.55d146e7.js"><link rel="prefetch" href="/assets/js/page--src--pages--index-vue~page--src--pages--tutorials--what-is-a-favicon-vue.d82a60be.js"><link rel="prefetch" href="/assets/js/page--src--pages--logo-generator--index-vue.3287d1c5.js"><link rel="prefetch" href="/assets/js/page--src--pages--privacy-policy-vue.9d32a1d2.js"><link rel="prefetch" href="/assets/js/page--src--pages--squarespace-favicon-vue.6e5815fe.js"><link rel="prefetch" href="/assets/js/page--src--pages--terms-of-use-vue.4f1a6c66.js"><link rel="prefetch" href="/assets/js/page--src--pages--tutorials--how-to-add-a-favicon-to-a-website-ico-format-vue.b2474c2a.js"><link rel="prefetch" href="/assets/js/page--src--pages--tutorials--how-to-add-a-favicon-to-a-website-png-format-vue.20679dca.js"><link rel="prefetch" href="/assets/js/page--src--pages--tutorials--index-vue.31ffee46.js"><link rel="prefetch" href="/assets/js/page--src--pages--tutorials--what-is-a-favicon-vue.5a1bd170.js"><link rel="prefetch" href="/assets/js/page--src--templates--emoji-vue.5c63ba44.js"><link rel="prefetch" href="/assets/js/vendors~page--src--pages--favicon-converter-vue~page--src--pages--favicon-generator--index-vue~page-~6abeb7c1.a650ff34.js"><link rel="prefetch" href="/assets/js/vendors~page--src--pages--favicon-converter-vue~page--src--pages--favicon-generator--index-vue~page-~d715ed7c.a918d9e0.js"><link rel="prefetch" href="/assets/js/vendors~page--src--pages--favicon-generator--index-vue.cffbf72e.js"><link rel="prefetch" href="/assets/js/vendors~page--src--pages--favicon-generator--index-vue~page--src--pages--logo-generator--index-vue.6f81acd7.js"><link rel="prefetch" href="/assets/js/vendors~page--src--pages--logo-generator--index-vue.ffc84120.js"><link rel="stylesheet" href="/assets/css/1.styles.128869a9.css"><script data-vue-tag="ssr" type="text/javascript" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async></script><noscript data-vue-tag="ssr"><style>.g-image--loading{display:none;}</style></noscript> </head> <body > <div data-server-rendered="true" id="app" class="layout" data-v-14591542><nav class="navbar is-tablet is-spaced"><div class="container"><div class="navbar-brand"><a href="/" class="navbar-item active"><img src="/assets/img/navbar-logo-2x.d9aeaef3.png" alt="Favicon.io Logo" width="166" height="28"></a><div data-target="navbar" class="navbar-burger burger"><span></span><span></span><span></span></div></div><div id="navbar" class="navbar-menu"><div class="navbar-start has-text-weight-bold"><a href="/favicon-converter/" aria-current="page" class="navbar-item active--exact active">Converter</a><a href="/favicon-generator/" class="navbar-item">Generator</a><a href="/emoji-favicons/" class="navbar-item">Emojis</a><a href="/tutorials/" class="navbar-item">Tutorials</a><a href="/logo-generator/" class="navbar-item">Logos</a></div><div class="navbar-end"><div class="navbar-item"><div class="field is-grouped"><p class="control"><a target="_blank" href="https://twitter.com/intent/tweet?text=Generate a simple text based favicon with https://favicon.io (via @johnsorrentino)" class="button is-default"><span class="icon"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-twitter fa-w-16"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg></span><strong>Tweet</strong></a></p><p class="control"><a target="_blank" href="https://www.buymeacoffee.com/johnsorrentino" class="button is-default"><span class="icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="coffee" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-coffee fa-w-20"><path fill="currentColor" d="M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z"></path></svg></span><strong>Buy me a coffee</strong></a></p></div></div></div></div></div></nav><section class="hero is-black" data-v-14591542><div class="hero-body"><div class="container"><div class="columns"><div class="column is-7"><h1 class=" subtitle is-spaced is-uppercase has-text-grey-light has-text-weight-bold"> Favicon Generator / Generate from Image </h1><p class="title is-3 has-text-letter-spacing-wide"> Quickly generate your favicon from an image by uploading your image below. Download your favicon in the most up to date formats. </p></div><div class="column is-4"><div class="is-pulled-right"><ins data-ad-client="ca-pub-6364731787646900" data-ad-slot="8415939935" class="adsbygoogle" style="display:inline-block;width:300px;height:250px;"></ins></div></div></div></div></div></section><section id="generate-from-image" class="section" data-v-14591542><div class="container" data-v-14591542><div class="columns" data-v-14591542><div class="column is-8" data-v-14591542><div class="box" data-v-14591542><h3 class="title is-3" data-v-14591542>Converter</h3><div class="file-dropzone" data-v-14591542><input id="image" type="file" data-v-14591542><p class="has-text-centered has-text-3 is-vcentered" data-v-14591542><span data-v-14591542><i class="fa fa-upload" data-v-14591542></i></span><span class="is-3" data-v-14591542>Drag and drop your file here or click here to upload.</span></p></div><br data-v-14591542><div class="field is-grouped" data-v-14591542><p class="control" data-v-14591542><img id="preview" alt="Favicon Preview 48x48" src="/assets/static/48x48.813b813.c2822fa3d9ef25a65543ba9409e52e89.png" width="40" srcset="/assets/static/48x48.813b813.c2822fa3d9ef25a65543ba9409e52e89.png 40w" sizes="(max-width: 40px) 100vw, 40px" class="image g-image" data-v-14591542></p><p class="control" data-v-14591542><a id="download-package" target="_blank" class="button is-rounded is-info" data-v-14591542><span class="icon" data-v-14591542><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="download" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-download fa-w-16" data-v-14591542><path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z" data-v-14591542></path></svg></span><span data-v-14591542>Download</span></a></p></div></div></div><div class="column is-4" data-v-14591542><div class="is-pulled-right" data-v-14591542><ins data-ad-client="ca-pub-6364731787646900" data-ad-slot="3257263391" class="adsbygoogle" style="display:inline-block;width:300px;height:250px;" data-v-14591542></ins></div></div></div></div></section><hr data-v-14591542><section class="section" data-v-14591542><div class="container"><div class="content"><div class="columns"><div class="column is-8"><div class="box"><h3 class="title is-4">Installation</h3><p> First, use the download button to download the files listed below. Place the files in the root directory of your website. </p><ul><li>android-chrome-192x192.png</li><li>android-chrome-512x512.png</li><li>apple-touch-icon.png</li><li>favicon-16x16.png</li><li>favicon-32x32.png</li><li>favicon.ico</li><li>site.webmanifest</li></ul><p> Next, copy the following link tags and paste them into the <code>head</code> of your HTML. </p><pre><code><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"></code></pre><button class="button is-info">Copy</button></div></div><div class="column is-4"><div class="is-pulled-right"><ins data-ad-client="ca-pub-6364731787646900" data-ad-slot="9257005045" class="adsbygoogle" style="display:inline-block;width:300px;height:250px"></ins></div></div></div></div></div></section><hr data-v-14591542><section class="section" data-v-14591542><div class="container" data-v-14591542><div class="columns" data-v-14591542><div class="column is-8" data-v-14591542><div class="box" data-v-14591542><div class="content" data-v-14591542><h3 class="title is-4" data-v-14591542>About the favicon generator</h3><p data-v-14591542> If you already have an image that you would like to use for a favicon on your website the this is the tool you need. The favicon generator will convert you image to a favicon. You can upload a PNG, JPG, or BMP and the favicon generator will output an ICO file. </p><p data-v-14591542> For the best result you should upload an square image. You can use a standard image editing tool if you need to crop your image. Once your image is prepared upload it using the tool above. Next, verify that the preview image is to your liking. Finally, use the download button to export your favicon in ICO format. </p><h3 class="title is-4" data-v-14591542> Why do I need an ICO file instead of a PNG? </h3><p data-v-14591542> An ICO file is a special image file use by the browser. The unique feature of an ICO file is that it is multilayered. Each layer of the favicon holds a different size of the image. The common sizes for a ICO formatted favicon are 16x16px, 32x32px, and 48x48px. </p><p data-v-14591542> For best compatibility web browsers can leverage the ICO file generated by the favicon generator. The browsers will use the different sizes for displaying in different areas of the website such as the bookmarks bar, the address bar, the browser tab, and as a desktop shortcut. </p><h3 class="title is-4" data-v-14591542> What types of images work best for the favicon generator? </h3><p data-v-14591542> The favicon generator works best with a simple icon, logo, or letter. Intricate or complex designs don't work well when they are resized using the favicon generator as much detail is lost. If your logo is very complex we recommend generating the favicon from text using the alternative generator. </p></div></div></div><div class="column is-4" data-v-14591542><div class="is-pulled-right" data-v-14591542><ins data-ad-client="ca-pub-6364731787646900" data-ad-slot="6618113852" data-ad-format="auto" data-full-width-responsive="true" class="adsbygoogle" style="display:block;" data-v-14591542></ins><br data-v-14591542><ins data-ad-client="ca-pub-6364731787646900" data-ad-slot="7943923378" data-ad-format="auto" data-full-width-responsive="true" class="adsbygoogle" style="display:block;" data-v-14591542></ins></div></div></div></div></section><footer class="footer"><div class="container"><div class="columns"><div class="column is-5"><div class="content"><h5 class="title is-5"> Created by: <a href="https://twitter.com/johnsorrentino" target="_blank">John Sorrentino</a></h5><p>Copyright 2023</p><h5 class="title is-5">About</h5><p> I built Favicon.io because creating a favicon should be a simple process. No other favicon generator or favicon creator can make a well designed favicon from text. If you like favicon.io or have a suggestion feel free to <a href="https://twitter.com/johnsorrentino" target="_blank">say hello</a>. Feedback is much appreciated! </p></div></div><div class="column is-2 is-offset-1"><div class="content"><h5 class="title is-5">Built With</h5><p><a href="https://bulma.io/" target="_blank">Bulma</a></p><p><a href="http://huebee.buzz/" target="_blank">Huebee</a></p><p><a href="https://github.com/twitter/twemoji" target="_blank">Twemoji</a></p><p><a href="https://github.com/johnsorrentino/center.js" target="_blank">Center.js</a></p><p><a href="https://github.com/johnsorrentino/favicon.js" target="_blank">Favicon.js</a></p></div></div><div class="column is-2"><div class="content"><h5 class="title is-5">Resources</h5><p><a href="/favicon-converter/" aria-current="page" target="_blank" class="active--exact active">Favicon Converter</a></p><p><a href="/favicon-generator/" target="_blank">Favicon Generator</a></p><p><a href="/emoji-favicons/" target="_blank">Emoji Favicons</a></p><p><a href="/logo-generator/" target="_blank">Logo Generator</a></p></div></div><div class="column is-2"><div class="content"><h5 class="title is-5">Contact</h5><p><a href="/contact">Contact Us</a></p><p><a href="https://twitter.com/johnsorrentino" target="_blank">Twitter</a></p><p><a href="/privacy-policy">Privacy Policy</a></p><p><a href="/terms-of-use">Terms of Use</a></p></div></div></div></div></footer></div> <script>window.__INITIAL_STATE__={"data":null,"context":{}};(function(){var s;(s=document.currentScript||document.scripts[document.scripts.length-1]).parentNode.removeChild(s);}());</script><script src="/assets/js/app.119b0d09.js" defer></script><script src="/assets/js/page--src--pages--favicon-converter-vue.151893d8.js" defer></script> </body> </html>