WordPress
Favicon & Site Icon Generator

The Favicon is a small icon that appears next to the URL in the browser tab, bookmark, Google search listing and a few other places. It can also be referred to as an app icon, shortcut icon or site icon. You would traditionally take your png files and resize them into multiple sizes, so it's compatible with all the web browsers and mobile devices and upload the images to your root directory with FTP or SFTP. Then add various HTML code/markup for the appropriate sizes to the WordPress site header by editing your theme files. There are plenty of WordPress tutorials out there you can follow if you still want to add them all manually.

The favicon is an important, often overlooked part of your branding strategy because it helps people identify your website from others and improves the site identity, giving it more brand recognition. It also helps people remember your website and return to it again.

The default site icon option in the WordPress customizer made it more accessible for people to add one to their WordPress site quickly, but the site icon gets included as one single file. My WordPress favicon generator generates multiple image sizes based on your main image for maximum compatibility with new and old browsers. By using just the WordPress customizer option, you may find some old browsers or less popular browsers may have issues disapplying it correctly, and the browser window may not show your site icon at all.

The simple answer is: that it's incredibly safe to use.

If you want to look at the plugin file yourself, you will see just one PHP file (tims-custom-favicons.php). The first eight lines are just the information WordPress needs, like plugin name, description etc... Then the first line of actual PHP code is a line to stop it from being directly accessed outside the WordPress infrastructure for security. There is then a line of code to disable the default site icon (in the customizer), so there won't be any duplicates being loaded. Then a simple function that links all the site icons into the header of the site so browsers can find them. All the images are contained within the /images/ folder within the plugin file.

No, it does a very simple job very efficiently, you can add it to multiple WordPress sites through the wp admin and you should see zero increase in page load times.

Just come back here, upload your new WordPress site icon image, and re-add the plugin, this time when you upload it, it will say this plugin already exists. Click the “Replace current with uploaded” button to update the WordPress site icon to your new image.

Absolutely, I have tested wit will all the most popular WordPress plugins and being its design is so simple, I’m confident it should work perfectly with every other WordPress plugin available.

No, only if you need to change your site icon/favicon icon image, and in that case, just come back here and start the process again by selecting your new image, and get a new plugin to upload.

The image only gets uploaded temporarily to process it into a favicon icon. After that it's gone, and it’s not stored or shared. I also don’t add any tracking info to the plugin that gets generated, and I don’t use any intrusive tracking on my website or set any cookies. I do keep a simple log of how many times this generator is used, but that's it, no identifying information.

So to summarise, very privacy friendly.

There are none. Simply enable the plugin, and away it goes, no options, no settings, just a simple, straightforward, secure, fast plugin.

If you want to remove the Tims Custom Favicons plugin, just go to plugins in your WordPress dashboard and click disable and or delete, the favicons will then be removed. Just to note, some browsers cache the favicon image, so you may need to clear your browser cache.

Ideally, just use my simple WordPress Favicon & Site Icon Generator, but if you want to do it yourself manually, you can by converting your site icon image into multiple sizes and formats, I find the below list covers all the sizes needed for most desktop and mobile browsers:

• android-icon-192x192.png (192px x 192px)
• apple-icon-180x180.png (180px x 180px)
• apple-icon-152x152.png (152px x 152px)
• apple-icon-144x144.png (144px x 144px)
• ms-icon-144x144.png (144px x 144px)
• apple-icon-120x120.png (120px x 120px)
• apple-icon-114x114.png (114px x 114px)
• favicon-96x96.png (96px x 96px)
• apple-icon-72x72.png (72px x 72px)
• apple-icon-76x76.png (76px x 32px)
• apple-icon-60x60.png (60px x 32px)
• apple-icon-57x57.png (57px x 57px)
• favicon-32x32.png (32px x 32px)
• favicon-16x16.png (16px x 16px)
• favicon.ico (32px x 32px)

You then want to FTP or SFTP into your WordPress site and add the favicon icons to your root domain, so they are accessible when for example, you go to www.mysite.co.uk/favicon.ico.

You then want to add a few lines of HTML code into the header of your WordPress site, you can either download a plugin that lets you add HMTL snippets into your site or edit your child themes header.php file to add the following:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.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="16x16" href="/favicon-16x16.png">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">

You can manually add it, use my WordPress Favicon & Site Icon Generator or add an image in the WP customizer

I find a simplified version of your logo works best or an icon representing your brand, I use photoshop normally but you can use an online service like Canva to create your own images.

To change the favicon icon in WordPress depends on how you initially setup the favicon icon. If you added them manually to your WordPress website root folder with FTP, then you need to remove them before using this WordPress favicon generator. If you used the customizer site icon option under appearances, my favicon generator will automatically disable it when you add the favicon plugin to your site.

I like to think my WordPress Favicon & Site Icon Generator does an excellent easy job of adding one to WordPress, but if you’re looking for other sites just to generate the site icon images you need, there are quite a few to choose from, like:

• https://realfavicongenerator.net/
• https://favicon.io/
• https://www.favicon-generator.org/
• https://www.websiteplanet.com/webtools/favicon-generator/
• https://www.favicon.cc/
• https://www.ionos.co.uk/tools/favicon-generator

If you're using my WordPress Favicon & Site Icon Generator, you don’t need to upload the favicon or site icon images to your WordPress sites media library, the images get automatically contained within the plugin that gets created for you.