Favicon Generator

By /
512×512
Download
180×180
Download
48×48
Download
32×32
Download
16×16
Download

What Exactly is a Favicon and Why Does it Matter?

A “favicon” (short for “favorite icon”) is a small icon file, typically 16×16 or 32×32 pixels, that represents your website. It appears in several key places:

  • Browser Tabs: The most common place, allowing users to identify your site at a glance.
  • Bookmarks Bar: Makes your site stand out in a user’s list of saved pages.
  • Browser History: Provides a visual cue when users are scrolling through their history.
  • Mobile Home Screen Shortcuts: When a user saves your website to their home screen on a phone or tablet.

Having a custom favicon is a sign of quality and attention to detail. It tells your visitors that your site is professional, legitimate, and complete.

How to Add Your New Favicon to Your Website

Great, you’ve generated your favicon package! Now it’s time to put that tiny icon to work. The process is slightly different depending on what kind of website you have, but both are very straightforward.

We’ll cover the two most common scenarios:

  1. For WordPress Websites: The most popular content management system (CMS).
  2. For Custom-Coded Websites: Sites built with HTML, PHP, or other frameworks where you have direct access to the code.

Method 1: For WordPress Websites (The Easy Way)

WordPress has a built-in feature called the “Site Icon” that makes this process incredibly simple. You won’t even need to touch any code.

Step-by-Step Instructions:

  1. Log in to Your WordPress Dashboard: This is your yourdomain.com/wp-admin area.
  2. Navigate to the Customizer: On the left-hand menu, hover over Appearance and then click on Customize. This will open the live theme customizer.
  3. Find the Site Identity Section: Look for a tab or menu item called Site Identity. It’s usually near the top. Click on it.
  4. Locate the “Site Icon” Option: Inside the Site Identity panel, you will see fields for your Site Title and Tagline. Below these, you’ll find a section specifically for the Site Icon. This is what WordPress calls the favicon.
  5. Upload Your Icon:
    • Click the “Select site icon” button.
    • This will open the WordPress Media Library. You can either drag and drop your favicon.ico or a high-quality PNG file (WordPress recommends an image that is 512×512 pixels) into the upload area. Using a 512×512 PNG is often the best practice here, as WordPress will automatically generate the smaller sizes needed.
    • Select the image you just uploaded and click the “Select” button. WordPress might give you a chance to crop the image if it isn’t perfectly square.
  6. Publish Your Changes: Once you’ve selected your icon, you’ll see a preview of it in the customizer. If you’re happy with it, click the blue “Publish” button at the top of the customizer panel.

And you’re done! WordPress automatically adds the necessary code to your website’s header.

Method 2: For Custom-Coded Websites (HTML, PHP, etc.)

If you have a website that isn’t on WordPress, you’ll need to do a couple of manual steps: upload the files and add a few lines of code. Don’t worry, it’s simpler than it sounds!

Step 1: Upload Your Favicon Files

  1. Unzip the favicon package you downloaded from the generator. You should see several files, like favicon.ico, apple-touch-icon.png, and a few other PNG files of different sizes.
  2. You need to upload all of these files to the root directory of your website. The root directory is the main folder where your website’s files are stored. It’s often named public_html, www, or htdocs.
  3. You can do this using an FTP client (like FileZilla) or the File Manager provided in your web hosting control panel (like cPanel or Plesk).

Step 2: Add the HTML Code to Your Site’s <head> Section

Now you need to tell browsers where to find your new favicon files. You do this by adding a few lines of HTML code inside the <head> section of your website.

  • For a simple HTML site, you’ll edit files like index.html, about.html, etc.
  • For a PHP site, you’ll likely have a single file that controls the header for all pages, such as header.php or head.php. Editing this one file will update the favicon across your entire site.

Copy the code block below and paste it between the <head> and </head> tags on your pages:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">


Make sure the href paths match the names of the files you uploaded.

Final Step for Both Methods: Clear Your Cache!

Favicons can be aggressively cached (stored) by browsers. If you’ve followed the steps but still don’t see your new icon, try the following:

  • Clear Your Browser Cache: Go into your browser settings and clear the cache and cookies. Then, restart the browser.
  • Clear Your Website Cache: If you’re using a caching plugin on WordPress (like W3 Total Cache or WP Rocket), clear the site’s cache from the plugin’s settings.
  • Check in an Incognito/Private Window: This is a great way to load your site fresh, without any cached data.

Sometimes it can take a few hours for the favicon to appear everywhere, so a little patience might be needed. But once it’s up, your site will have that professional finishing touch!


Related Tools: