{"id":27658,"date":"2012-07-13T22:52:52","date_gmt":"2012-07-13T17:22:52","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=27658"},"modified":"2026-10-11T10:52:03","modified_gmt":"2026-10-11T05:22:03","slug":"create-favicon-online-free","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2012\/07\/create-favicon-online-free\/","title":{"rendered":"How to Create a Favicon Online Free (Best Favicon Generators 2026)"},"content":{"rendered":"<p>Want to create a favicon online for free? A favicon is the small icon that appears in browser tabs, bookmarks, phone home screens and even next to your site in Google search results, so it&#8217;s an important part of your brand. When we redesigned the QOT favicon in 2012, we drew it pixel by pixel in a free online editor. In 2026 you can still do that, or turn your logo into a complete favicon set in seconds. Here&#8217;s how.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-27659\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/favicon-maker.png\" alt=\"Create favicon online free with a favicon generator\" width=\"500\" height=\"321\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/favicon-maker.png 500w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/favicon-maker-300x192.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> To create a favicon online free, upload a square logo (at least 512 x 512 pixels) to a generator such as <a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\" rel=\"noopener\">RealFaviconGenerator<\/a> or <a href=\"https:\/\/favicon.io\/\" target=\"_blank\" rel=\"noopener\">favicon.io<\/a>, download the icon pack and add it to your site. On WordPress, simply upload a 512 x 512 image under <strong>Appearance &gt; Customize &gt; Site Identity &gt; Site Icon<\/strong>, or in the Site Editor for block themes, and WordPress creates the sizes and code for you.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ae48d95b6631\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ae48d95b6631\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/07\/create-favicon-online-free\/#Best_free_tools_to_create_a_favicon_online\" >Best free tools to create a favicon online<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/07\/create-favicon-online-free\/#How_to_create_a_favicon_online_free_step_by_step\" >How to create a favicon online free, step by step<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/07\/create-favicon-online-free\/#Favicon_sizes_and_code_in_2026\" >Favicon sizes and code in 2026<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/07\/create-favicon-online-free\/#How_to_add_a_favicon_in_WordPress\" >How to add a favicon in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/07\/create-favicon-online-free\/#Make_your_favicon_show_in_Google_search\" >Make your favicon show in Google search<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/07\/create-favicon-online-free\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/07\/create-favicon-online-free\/#What_size_should_a_favicon_be\" >What size should a favicon be?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/07\/create-favicon-online-free\/#Is_faviconico_still_needed\" >Is favicon.ico still needed?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/07\/create-favicon-online-free\/#Why_isnt_my_new_favicon_showing\" >Why isn&#8217;t my new favicon showing?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/07\/create-favicon-online-free\/#Can_I_use_an_SVG_favicon\" >Can I use an SVG favicon?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Best_free_tools_to_create_a_favicon_online\"><\/span>Best free tools to create a favicon online<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>RealFaviconGenerator:<\/strong> upload an image and get every size and file you need (ICO, PNG, SVG, Apple touch icon, web manifest), with previews for each platform and the HTML code.<\/li>\n<li><strong>favicon.io:<\/strong> make a favicon from text, an emoji or an image. Great if you don&#8217;t have a logo yet.<\/li>\n<li><strong><a href=\"https:\/\/www.favicon.cc\/\" target=\"_blank\" rel=\"noopener\">favicon.cc<\/a>:<\/strong> the pixel editor we used in 2012. You draw on a 16 x 16 grid, pick colours, preview and download a favicon.ico. It&#8217;s fun for simple pixel-art icons.<\/li>\n<li><strong>Canva or any design app:<\/strong> design a square icon, export it as a 512 x 512 PNG, then run it through a generator.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"How_to_create_a_favicon_online_free_step_by_step\"><\/span>How to create a favicon online free, step by step<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li><strong>Start with a simple, square design.<\/strong> One letter, a symbol or a simplified logo works best at 16 x 16 pixels. Fine details and long text disappear.<\/li>\n<li><strong>Use high contrast<\/strong> so it&#8217;s visible on light and dark browser tabs. A transparent background with a coloured shape, or a solid coloured square, both work.<\/li>\n<li><strong>Upload to a generator<\/strong> and check the previews for desktop tabs, iPhone and Android home screens.<\/li>\n<li><strong>Download the package<\/strong> and upload the files to your site&#8217;s root folder.<\/li>\n<li><strong>Add the code<\/strong> to your page&#8217;s <code>&lt;head&gt;<\/code> (the generator gives you the exact lines).<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Favicon_sizes_and_code_in_2026\"><\/span>Favicon sizes and code in 2026<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You no longer need dozens of files. A modern minimal set is:<\/p>\n<pre><code>&lt;link rel=\"icon\" href=\"\/favicon.ico\" sizes=\"32x32\"&gt;\r\n&lt;link rel=\"icon\" href=\"\/icon.svg\" type=\"image\/svg+xml\"&gt;\r\n&lt;link rel=\"apple-touch-icon\" href=\"\/apple-touch-icon.png\"&gt;  &lt;!-- 180x180 --&gt;\r\n&lt;link rel=\"manifest\" href=\"\/site.webmanifest\"&gt;  &lt;!-- lists 192 and 512px icons --&gt;<\/code><\/pre>\n<p>The old <code>rel=\"shortcut icon\"<\/code> tag from our 2012 code isn&#8217;t needed any more, and links should use <code>https:\/\/<\/code> or relative paths.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_add_a_favicon_in_WordPress\"><\/span>How to add a favicon in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Classic themes:<\/strong> go to <strong>Appearance &gt; Customize &gt; Site Identity<\/strong> and click <strong>Select site icon<\/strong>. Upload a square image at least 512 x 512 pixels.<\/li>\n<li><strong>Block themes:<\/strong> in the Site Editor, select the <strong>Site Logo<\/strong> block and switch on <strong>Use as Site Icon<\/strong>. Recent WordPress versions also show a Site Icon option under <strong>Settings &gt; General<\/strong>.<\/li>\n<\/ul>\n<p>WordPress generates the browser, Apple and Android icon sizes and adds the code automatically. If your theme or SEO plugin also adds favicon code, keep only one source to avoid conflicts.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Make_your_favicon_show_in_Google_search\"><\/span>Make your favicon show in Google search<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Google shows favicons next to results on mobile and desktop. To qualify, your favicon should be square, at least 48 x 48 pixels (or a multiple of 48), crawlable by Googlebot, and declared on your homepage. Changes can take days or weeks to appear. Google also shows your site name next to the favicon; see how to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2022\/12\/site-name-google-search\/\">set the correct site name in Google Search<\/a>. For sharp logos on retina screens, read our guide to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/dispay-sharper-logo-on-high-resolution-screens\/\">displaying a sharp logo with srcset<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"What_size_should_a_favicon_be\"><\/span>What size should a favicon be?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Upload a 512 x 512 source image. Browsers use 16 to 32 px versions, Apple uses 180 px and Android uses 192 and 512 px.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Is_faviconico_still_needed\"><\/span>Is favicon.ico still needed?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>It&#8217;s still a good fallback, because some browsers and tools request <code>\/favicon.ico<\/code> automatically.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Why_isnt_my_new_favicon_showing\"><\/span>Why isn&#8217;t my new favicon showing?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Browsers cache favicons heavily. Clear the cache or open your site in a private window. Google may take weeks to update it in search.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_use_an_SVG_favicon\"><\/span>Can I use an SVG favicon?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. Modern browsers support SVG favicons, which stay sharp at any size and can even adapt to dark mode.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to create a favicon online for free? A favicon is the small icon that appears in browser tabs, bookmarks,&#8230;<\/p>\n","protected":false},"author":4,"featured_media":27659,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49],"class_list":["post-27658","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/27658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=27658"}],"version-history":[{"count":2,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/27658\/revisions"}],"predecessor-version":[{"id":63778,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/27658\/revisions\/63778"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/27659"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=27658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=27658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=27658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}