{"id":33175,"date":"2022-03-14T07:00:31","date_gmt":"2022-03-14T14:00:31","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=33175"},"modified":"2026-08-10T07:44:05","modified_gmt":"2026-08-10T14:44:05","slug":"create-custom-favicon-wordpress","status":"publish","type":"post","link":"https:\/\/www.dreamhost.com\/blog\/create-custom-favicon-wordpress\/","title":{"rendered":"How to Create a Custom Favicon in WordPress"},"content":{"rendered":"\n

Whether you\u2019re creating a podcast<\/a> website or personal blog, making it memorable and user-friendly can be challenging. As you configure your website settings<\/a>, it\u2019s essential to establish your brand identity and start building a solid reputation.<\/p>\n\n\n\n

A simple way to create a professional online presence is by designing a custom favicon. A recognizable favicon helps people spot your site in crowded tabs and search results, building brand recognition<\/a> along the way.<\/p>\n\n\n\n

Here\u2019s the short answer: the fastest way to add a favicon in WordPress is built in. Go to Settings > General<\/i> in your dashboard, click Choose a Site Icon<\/i>, and upload a square image that\u2019s at least 512×512 pixels. That setting arrived in WordPress 6.5, so every supported WordPress version in 2026 has it. In this post, we\u2019ll cover what favicons are and why they matter, then walk through that method plus three alternatives. Let\u2019s get started!<\/p>\n\n\n\n

What is a favicon (favorite icon)?<\/strong><\/h2>\n\n\n\n

A favicon, or \u2018favorite icon,\u2019 is the small square icon that represents your website in browser tabs, bookmarks, browser history, and search results. It traditionally displayed at 16×16 pixels, but a modern favicon is really a small set of images in several sizes and formats (PNG, SVG, and ICO) all generated from one square source image.<\/p>\n\n\n\n

The favicon was created in 1999<\/a>, first appearing in Internet Explorer 5, to help differentiate between bookmarked web pages.<\/p>\n\n\n\n

Currently, you can see favicons at the top of a browser tab above the address bar. Here, visitors will see a small branding icon:<\/p>\n\n\n

\n
\"custom<\/figure>\n<\/div>\n\n\n

If a website doesn\u2019t have a designated favicon, users will see a generic browser icon instead. Therefore, many website owners use favicons to make their content more recognizable.<\/p>\n\n\n\n

You might also see favicons in bookmarks, your browser history, among Google search results, and as the app icon when someone saves your site to their phone\u2019s home screen. Often, this icon shows users they\u2019re about to click on a credible and well-known resource.<\/p>\n\n\n\n

Favicon sizes and formats: which file serves which surface<\/strong><\/h3>\n\n\n\n

A favicon \u201cis not just a single image, as it used to be when it was first introduced,\u201d as RealFaviconGenerator\u2019s favicon guide (2026) puts it, and \u201cthe main favicon format is now the SVG, supported by all modern browsers.\u201d Here\u2019s what each file in a modern favicon package does:<\/p>\n\n\n\n

File<\/th>Where it shows up<\/th><\/tr><\/thead>
SVG favicon<\/td>The main modern format: browser tabs in all modern browsers, sharp at any size<\/td><\/tr>
PNG favicon<\/td>Browser tabs and Google search result pages where SVG isn\u2019t used<\/td><\/tr>
Apple Touch Icon<\/td>The high-resolution icon iOS uses for home screen shortcuts \u2014 Android grabs it too when a site has no web app manifest<\/td><\/tr>
favicon.ico<\/td>The 1999 original (typically 16×16 or 32×32 pixels), now a legacy fallback \u2014 browsers still request it in edge cases, like showing a PDF in a tab<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

The good news: you rarely have to juggle these files yourself. WordPress uses your single 512×512 site icon \u201cas a browser and app icon for your site,\u201d per WordPress.org\u2019s documentation, and generators like RealFaviconGenerator build the full package for manual setups.<\/p>\n\n\n\n

Great. You\u2019re all caught up on favicons. Now, let\u2019s show you how to make one.<\/p>\n\n

How to add or change a favicon in WordPress (4 methods)<\/strong><\/h2>\n\n\n\n

To start creating your first favicon, you\u2019ll need to design the image you\u2019re going to use. For this process, we recommend using Canva \u2014 its built-in AI tools can even draft a square logo from a text prompt as a starting point:<\/p>\n\n\n

\n
\"Canva\"<\/figure>\n<\/div>\n\n\n

Canva is a beginner-friendly image editing tool that can create a logo from scratch. Alternatively, you can browse its logo templates<\/a>.<\/p>\n\n\n\n

Whatever option you choose, make sure you design a square image. Favicons typically display at 16×16 pixels, but WordPress requires a height and width of at least 512px. Design for that tiny canvas: keep the icon simple and recognizable, use as little text as possible, and check that it stands out on white, gray, and black backgrounds, since many visitors browse in dark mode \u2014 advice that comes straight from WordPress.com\u2019s site icon guidelines (reviewed June 2026).<\/p>\n\n\n\n

\n\tRelated Article<\/span>\n\t
\n\t\t
\n\t\t\tHow To Make a Website: A Complete Beginner\u2019s Guide\n\t\t<\/div>\n\t\t\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n\n

After you\u2019ve designed your logo as a favicon, it\u2019s time to add it to your website! Here are some of the best methods.<\/p>\n\n\n\n

1. Add a favicon in Settings \u2192 General (the default way)<\/strong><\/h3>\n\n\n\n

This is the current standard \u2014 and the fastest route. Since WordPress 6.5 (released April 2, 2024), the Site Icon<\/i> setting lives right in your general settings, so every supported WordPress version in 2026 has it. You won\u2019t have to make a favicon.ico<\/i> file or modify your template file.<\/p>\n\n\n\n

In your WordPress dashboard, go to Settings > General<\/i>. Near the top, you\u2019ll see a Site Icon<\/i> setting. Click Choose a Site Icon<\/i>, upload your square image (at least 512×512 pixels), and save your changes. That\u2019s it \u2014 your favicon is live.<\/p>\n\n\n\n

On a classic theme or older WordPress? Use the Customizer<\/strong><\/h4>\n\n\n\n

WordPress has had a built-in Site Icon<\/i> feature since version 4.3 \u2014 it just lived in the Customizer until 6.5. Not sure which setup you have? Check under Appearance<\/i> in your dashboard: if you see Editor<\/i>, you\u2019re on a block theme (block themes don\u2019t include the Customizer); if you see Customize<\/i>, you\u2019re on a classic theme and the steps below work, too.<\/p>\n\n\n\n

Find the image you want to use as your favicon. Then, go to Appearance > Customize<\/i> in your WordPress dashboard:<\/p>\n\n\n

\n
\"WordPress<\/figure>\n<\/div>\n\n\n

This will open the WordPress Customizer. Click Site Identity<\/i> (some themes tuck it inside a settings submenu, as in our screenshot):<\/p>\n\n\n

\n
\"WordPress<\/figure>\n<\/div>\n\n\n

Here, you\u2019ll see a section labeled Site Icon<\/i>. Click on Select site icon<\/i> and upload your favicon image:<\/p>\n\n\n

\n
\"Select<\/figure>\n<\/div>\n\n\n

Crop the image as needed. On the right-hand side, you can see a preview of the favicon:<\/p>\n\n\n

\n
\"crop<\/figure>\n<\/div>\n\n\n

After you\u2019re finished, click on Publish<\/i>.<\/p>\n\n\n\n

\n\n\n

Get Content Delivered Straight to Your Inbox<\/h2>

Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p>

<\/div>