![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233215\/favicon.jpg\")
<\/figure>\n\n\n\nYou can also find favicons in:<\/p>\n\n\n\n
- \n
- browser bookmarks<\/li>\n\n\n\n
- iOS and Android home screen buttons<\/li>\n\n\n\n
- app icons<\/li>\n\n\n\n
- search engine results.<\/li>\n<\/ul>\n\n\n\n
Often, website owners underestimate the significance of this little icon. Let\u2019s consider the benefits of using favicons.<\/p>\n\n\n\n
Why Should You Use a Favicon?<\/h2>\n\n\n\n
There are many reasons why you should add a favicon to your website. Here is the list of the most important ones.<\/p>\n\n\n\n
Brand Identity and Authenticity<\/h3>\n\n\n\n
Usually, a favicon has the same color scheme and style as other brand identification marks (website colors, logos, business cards, etc.). Favicons can be very similar to the company\u2019s logo. Thus, this icon is another means of showing your brand\u2019s identity. Undoubtedly, a unique, authentic favicon will look better on the tab with your website than a standard WordPress favicon used by default.<\/p>\n\n\n\n
The screenshots below show that world-famous brands Nike and Adidas use favicons resembling their logos.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233259\/adidas-favicon.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233312\/nike-favicon.jpg\")
<\/figure>\n\n\n\nImproving User Experience<\/h3>\n\n\n\n
Favicons serve as catchy visual cues. Firstly, internet users can easily identify your website by its favicon when they have numerous open tabs and websites’ names are not visible. Scanning a multitude of tabs for a familiar icon is much easier than clicking on each browser tab to find the necessary website.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233343\/favicon-tabs.jpg\")
<\/figure>\n\n\n\nSecondly, if visitors want to come back to your website, they can use bookmarks or search history. They\u2019ll find your site faster when they see the favicon.<\/p>\n\n\n\n
Thirdly, favicons help websites to stand out in search engine results. As Google Search Central\u2019s documentation states, your site\u2019s favicon<\/a> can be visible in Google Search results.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233410\/favicon-serp.jpg\")
<\/figure>\n\n\n\nIn short, favicons add professionalism, uniqueness, and brand consistency to websites. They also improve UX, helping people quickly get to the necessary tab or bookmark.<\/p>\n\n\n\n
How You Can Make a Favicon<\/h2>\n\n\n\n
Creating a favicon is quite simple, and there are various ways to do it. Also, you should know the essential characteristics that favicons should have.<\/p>\n\n\n\n
Favicon Requirements<\/h3>\n\n\n\n
Let\u2019s consider the basic requirements for a favicon.<\/p>\n\n\n\n
Size and Format<\/h4>\n\n\n\n
Your favicon must be square. It should also be a multiple of 48px, such as 48x48px, 96x96px, 144x144px and so on. In Google search results, the favicon images are rescaled to 16x16px, so you should check that your icon looks good under that resolution, too.<\/p>\n\n\n\n
As WordPress states, site icons should be at least 512x512px, so make sure that you get a file of this size.<\/p>\n\n\n\n
File Format<\/h4>\n\n\n\n
You can create favicons and save them in different image formats: ICO, PNG, GIF, animated GIFs, JPEG, APNG, and SVG. Yet, remember that not all browsers support all formats. To be on the safe side, you should create favicons in ICO, PNG, or GIF formats, as all browsers support them.<\/p>\n\n\n\n
Ways to Create a Favicon<\/h3>\n\n\n\n
Now, it\u2019s time to talk about various methods of creating a favicon. You can choose the most convenient one.<\/p>\n\n\n\n
Use Image-Editing Software<\/h4>\n\n\n\n
Firstly, you can create your favicon manually using any software for editing images, such as Photoshop. You may adjust your brand logo to make a favicon from it. It\u2019s advisable to crop your image to 512\u00d7512 px.<\/p>\n\n\n\n
Create Favicons with Online Generators<\/h4>\n\n\n\n
Secondly, you can make favicons by using online generators. These tools allow you to <\/p>\n\n\n\n
- \n
- adjust your image (such as a logo) <\/li>\n\n\n\n
- create an image from scratch <\/li>\n\n\n\n
- generate a favicon from text<\/li>\n\n\n\n
- choose from suggested graphics (such as emojis).<\/li>\n<\/ul>\n\n\n\n
You can find numerous online generators for icons and favicons. favicon.io<\/a>, favicon.cc<\/a>, Favicon & App Icon Generator<\/a>, realfavicongenerator.net<\/a> are just a few examples of the tools to make a favicon. Here, we\u2019ll speak about the functionality of the first two generators. <\/p>\n\n\n\n
Favicon.io<\/h5>\n\n\n\n
Favico<\/a>n<\/a>.io<\/a> features three types of favicon generators:<\/p>\n\n\n\n
- \n
- PNG – favicon (to convert an existing image to the proper favicon format)<\/li>\n\n\n\n
- Text – favicon (to generate a favicon from the text)<\/li>\n\n\n\n
- Emoji – favicon (to create a favicon with emojis).<\/li>\n<\/ol>\n\n\n\n
The first type lets you upload your image and get various favicon files fast. <\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233450\/converter.jpg\")
<\/figure>\n\n\n\nSecondly, with favicon.io you can generate your favicon from the text<\/a>. After you type in the text, you can adjust the font style, color, size, as well as the background color and style (rounded, square, or circle). Additionally, you\u2019ll see the preview of your favicon both in a specialized field and on the tab.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233520\/favicon-from-text-1024x603.jpg\")
<\/figure>\n\n\n\nThirdly, favicon.io lets you select and use emoji graphics as favicons<\/a>. You may choose from various categories, such as smileys and emotions, activities, animals and nature, food and drinks, flags, symbols, objects, etc.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233548\/emoji-favicon.jpg\")
<\/figure>\n\n\n\nWhen you proceed to download the desired emoji, you\u2019ll also see it on the tab as a preview.<\/p>\n\n\n\n
Whatever method you prefer, you\u2019ll get multiple favicon files compatible with desktop and mobile devices. You\u2019ll also see the instructions where you should place the files and link tags that you should use. If you choose to add favicon files to your website manually, you\u2019ll have to add the code into your HTML’s <head> section. In this case, remember to save the provided coding.<\/p>\n\n\n\n
Favicon.cc<\/h5>\n\n\n\n
Favicon.cc<\/a> lets you create your favicon from scratch. You have to pick a color, paint your image using the squares, and download it when you are finished. A significant advantage of this generator is the possibility to preview the favicon on the tab while you are still creating it.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233614\/favicon-cc-1024x512.jpg\")
<\/figure>\n\n\n\nWhen you download the image you\u2019ve created, you\u2019ll get an ICO file. Then, you\u2019ll need to put this image into your server directory.<\/p>\n\n\n\n
How to Add a Favicon to Your WordPress Site<\/h2>\n\n\n\n
After creating and downloading your favicon, it\u2019s necessary to add it to your WordPress website. We\u2019ll show you three easy ways to do this.<\/p>\n\n\n\n
1. Use the WordPress Customizer<\/h3>\n\n\n\n
WordPress add favicon functions are inherent in the CMS itself. So, you can upload and crop an image that will be used as a favicon directly in WordPress. On your dashboard, choose the Customize<\/strong> submenu in Appearance<\/strong>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233642\/wordpress-customizer.jpg\")
<\/figure>\n\n\n\nThen, go to the Site Identity tab.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233716\/site-identity-tab.jpg\")
<\/figure>\n\n\n\nNext, find the \u2018Select site icon\u2019 at the bottom of the tab and click it.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233739\/select-site-icon.jpg\")
<\/figure>\n\n\n\nYou will get to the WordPress Media Library. Here, you can select an existing file or add a new one. After you\u2019ve added your favicon to the library and chosen it, remember to save the settings by pressing \u2018Select\u2019.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233811\/media-library.jpg\")
<\/figure>\n\n\n\nIf the file is not 512x512px, WordPress will let you crop the image, adjusting it to the necessary size.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233845\/crop-favicon.jpg\")
<\/figure>\n\n\n\nAfter you save the settings and publish the website, your favicon will appear next to the site\u2019s name on the tab. If you need to change the favicon WordPress image, you should follow the same steps (get to the Site Identity settings) and press \u2018Change image\u2019.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233907\/change-image.jpg\")
<\/figure>\n\n\n\n2. Add a Favicon to WordPress with Plugins<\/h3>\n\n\n\n
If you prefer, you can add favicons with plugins. There are various options, such as<\/p>\n\n\n\n
- \n
- RealFaviconGenerator<\/li>\n\n\n\n
- Favicon Rotator<\/li>\n\n\n\n
- Heroic Favicon Generator<\/li>\n<\/ul>\n\n\n\n
Favicon (RealFaviconGenerator)<\/a> by Philippe Bernard is compatible with WordPress 3.5 or higher. This plugin has a free version that lets you customize your site\u2019s favicon. After installing and activating the plugin, you\u2019ll find the option \u2018Favicon\u2019 in the Appearance menu on your dashboard. Then, you can choose a picture to use as your icon from the WordPress Media Library and click \u2018Generate Favicon\u2019.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31233947\/favicon-generator-1024x432.jpg\")
<\/figure>\n\n\n\nYou will be redirected to the Real Favicon Generator<\/a> website, where you can adjust the settings (change the background color and radius and set the image size). When you have finished with settings, press \u2018Generate your Favicon and HTML code\u2019 at the bottom of the page. <\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31234016\/favicon-generator-options-1024x323.jpg\")
<\/figure>\n\n\n\nThe generator will create the favicon, and you\u2019ll get back to the WordPress dashboard. Here, you\u2019ll see a message that the favicon is installed and previews on different devices.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31234053\/current-favicon-1024x569.jpg\")
<\/figure>\n\n\n\nFavicon Rotator<\/a> by Archetyped is another plugin that you can use to upload a favicon. It works with WordPress 5.4 or newer and has been recently updated and tested with WordPress 5.9. You\u2019ll find the plugin in the Appearance menu.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31234121\/favicon-rotator.jpg\")
<\/figure>\n\n\n\nWhen you choose \u2018Add Icon\u2019 in Browser Icon, you\u2019ll be able to select files from your Media Library or to upload a new file from your computer. Moreover, you can edit the image, if necessary, setting the image ratio, scaling, or cropping it.<\/p>\n\n\n\n
Next, you have to scroll to the bottom and press \u2018Add Browser Icon\u2019. Then, remember to save the changes and check your website.<\/p>\n\n\n\n
Heroic Favicon Generator<\/a> by HeroThemes is one more easy-to-use plugin that facilitates adding a favicon. It\u2019s compatible with WordPress 5.5 or newer and has been tested up to 5.8.3. You\u2019ll find it in the Settings menu on the dashboard after installing and activating it.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31234154\/heroic-favicon-generator-1024x637.jpg\")
<\/figure>\n\n\n\nAll you have to do is press \u2018Select Favicon\u2019 and choose the necessary file. Your favicon will be updated instantly.<\/p>\n\n\n\n
What\u2019s more, this plugin adjusts favicons to various devices and lets you enable or disable modified images. Particularly, you can switch on\/off iPad home screen icon, iPhone retina touch icon, Chrome Web Store icon, Windows site icons, etc.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31234245\/adjustments-1024x703.jpg\")
<\/figure>\n\n\n\n3. Add Your Favicon Manually<\/h3>\n\n\n\n
Another way to add a favicon is to use an FTP (File Transfer Protocol) or a File Manager. You should create a favicon file and save it on your computer in advance. As we\u2019ve already discussed, online generators also provide you with the code that you should use when adding your favicon manually. Make sure you copy the coding (or keep it open on the generator website). Then, you should follow the steps below.<\/p>\n\n\n\n
- \n
- Open an FTP client or your hosting cPanel to see your website\u2019s files.<\/li>\n\n\n\n
- Find your website\u2019s root directory.<\/li>\n\n\n\n
- Copy the necessary favicon image files to the root directory. You should place the favicon files in the same folder as your wp-admin and wp-content folders.<\/li>\n\n\n\n
- Add the coding created by the online generator to your website. You should add it to the theme\u2019s header (by using the Insert Headers and Footers plugin, for instance, or by adding the code to your theme\u2019s header.php file).<\/li>\n<\/ol>\n\n\n\n
You can modify the theme\u2019s header.php file by opening the Theme File Editor (in the Appearance menu of your dashboard) and finding the header.php file on the list on the right.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31234321\/add-favicon-manually-1024x426.jpg\")
<\/figure>\n\n\n\nAfter adding the code, remember to scroll down and press \u2018Update File\u2019 to save the changes.<\/p>\n\n\n\n
How to Add a Favicon to Outdated WordPress Versions<\/h2>\n\n\n\n
If you are using WordPress 4.6 or older, you\u2019ll need to add a favicon manually. Follow the procedure described above (copy the files into the root folder and add the necessary code to the header). <\/p>\n\n\n\n
If you don\u2019t feel like editing theme files manually, we advise using the Insert Headers and Footers plugin<\/a>. This simple tool by WPBeginner allows you to add the necessary code fast without editing your theme\u2019s file. After installing and activating the plugin, go to the Insert Headers and Footers in the Setting menu on your dashboard. Then, place the coding in the Header section and save the changes.<\/p>\n\n\n\n
![\"\"](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/31234400\/outdated-wp-version-1024x791.jpg\")
<\/figure>\n\n\n\nAdvice on Adding a Favicon<\/h2>\n\n\n\n
We\u2019ll summarize the information on creating and adding favicons to WordPress websites in these tips and recommendations.<\/p>\n\n\n\n
- \n
- Your favicon image should be a square of at least 512x512px.<\/li>\n\n\n\n
- You should create files in ICO, PNG, or GIF formats to ensure that all browsers support the favicon.<\/li>\n\n\n\n
- Online generators can provide you with multiple files for different devices, so you can get a favicon that looks good on all gadgets and in all browsers.<\/li>\n\n\n\n
- Current WordPress functionality lets you add a favicon hassle-free via your dashboard, using the Customizer in the Appearance menu.<\/li>\n\n\n\n
- You can use plugins to upload your favicon if your prefer.<\/li>\n\n\n\n
- For older WordPress versions, it\u2019s advisable to add the favicon manually by uploading files to the root directory and modifying the header.php file.<\/li>\n<\/ol>\n\n\n\n
You can experiment with your favicon design to get an ideal combination of colors and other elements. Remember that people will see it across various platforms and in different sizes. So, the favicon should look good and add to your brand\u2019s identity.<\/p>\n\n\n\n
\n\n\n\nExceptional WordPress Development Services from GetDevDone<\/h2>\n\n\n\n
Does adding a favicon to your site still seem a daunting task? Let our WordPress developers<\/a> help you. With 16+ years of industry experience and thousands of successfully completed WP projects, we know everything about the world\u2019s most popular CMS.<\/em><\/p>\n\n\n\n
Get in touch with <\/a>us with any WordPress-related task, from developing a custom theme or customizing your current one to improving your website\u2019s Core Web Vitals scores<\/em> for better user experience. <\/p>\n\n\n\n
Helping your business succeed is our primary goal! <\/p>\n","protected":false},"excerpt":{"rendered":"
A favicon is a small icon you can see in a browser tab next to the website title. In this post, we discuss the main reasons to use favicons and the common methods you can apply to create and add one to your website.<\/p>\n","protected":false},"author":4,"featured_media":13512,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[739,752],"tags":[814],"class_list":["post-13508","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","category-wordpress-development","tag-wordpress"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Dmytro Mashchenko","author_link":"https:\/\/getdevdone.com\/blog\/author\/dima"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/21130038\/Intro-preview-4-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["Guide<\/a>","WordPress development<\/a>"],"unlinked":["Guide<\/span>","WordPress development<\/span>"]},"tags":{"linked":["WordPress<\/a>"],"unlinked":["WordPress<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 4 years ago","modified":"Updated 1 year ago"},"absolute_dates":{"created":"Posted on February 22, 2022","modified":"Updated on March 31, 2025"},"absolute_dates_time":{"created":"Posted on February 22, 2022 2:43 pm","modified":"Updated on March 31, 2025 11:44 pm"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/21130038\/Intro-preview-4-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/21130038\/Intro-preview-4.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/21130038\/Intro-preview-4.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/21130038\/Intro-preview-4.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/21130038\/Intro-preview-4.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/02\/21130038\/Intro-preview-4.png"},"featured_post_color":"#25bfb3","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/97bd036a871c68c70de0956108719ad9489849769ee15e25e0bee81f3bdd7286?s=96&d=mm&r=g","author_position":"CEO of GetDevDone","reading_time":"<\/span> 9<\/span> min read<\/span><\/span>","prev_post":{"slug":"is-react-suitable-for-your-project","name":"Is React Suitable for Your Project?"},"next_post":{"slug":"8-reasons-to-hire-a-dedicated-dev-team-instead-of-freelancers","name":"8 Reasons to Hire a Dedicated Development Team Instead of Freelancers"},"related_posts":["figma-to-wordpress-conversion-key-methods","choosing-best-wordpress-hosting-for-your-site-key-guidelines","how-to-choose-a-store-name-dos-and-donts"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/13508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=13508"}],"version-history":[{"count":21,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/13508\/revisions"}],"predecessor-version":[{"id":24702,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/13508\/revisions\/24702"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/13512"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=13508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=13508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=13508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}