---
title: "Uploading a custom favicon in Drupal 8"
description: "One of the minor customizations we get asked about is replacing the stock Drupal favicon with a custom one. The favicon is the small icon that appears next to the site name on the browser tab. See..."
url: https://www.inmotionhosting.com/support/edu/drupal/custom-favicon/
date: 2013-10-22
modified: 2021-08-16
author: "Scott Mitchell"
categories: ["Drupal"]
type: post
lang: en
---

# Uploading a custom favicon in Drupal 8

One of the minor customizations we get asked about is replacing the stock Drupal favicon with a custom one. The favicon is the small icon that appears next to the site name on the browser tab. See our article [here](/support/website/how-to-create-a-favicon-for-your-website/) for more information on favicons and how to create one. The instructions below demonstrate how to replace this in Drupal 8.

## How to Upload your custom Favicon in Drupal 8

1. [Log into your Drupal 8 admin interface](/support/edu/drupal/how-to-log-into-the-drupal-admin-dashboard/).
2. [![select menu option](https://www.inmotionhosting.com/support/wp-content/uploads/2013/06/edu_Drupal-8__common-images_select-menu.png)](/support/wp-content/uploads/2013/06/edu_Drupal-8__common-images_select-menu.png) Select **Menu** from the top menu bar.
3. [![select the Appearance option](https://www.inmotionhosting.com/support/wp-content/uploads/2013/10/edu_Drupal-8__common-images_select-appearance.png)](/support/wp-content/uploads/2013/10/edu_Drupal-8__common-images_select-appearance.png) Next, click on **Appearance** from the secondary menu bar.
4. [![the configuration screen for the module](https://www.inmotionhosting.com/support/wp-content/uploads/2013/10/edu_Drupal-8_105_customize-colors_1-select-settings.png)](/support/wp-content/uploads/2013/10/edu_Drupal-8_105_customize-colors_1-select-settings.png) Next you will arrive at the main *Appearance* page. Here you will see all the available active themes listed at the top under *Enabled Themes*. Locate the theme you want to work with and click on the **Settings** link to its right. We will be using the *Bartik* theme in this example.
5. [![the configuration screen for the module](https://www.inmotionhosting.com/support/wp-content/uploads/2013/10/edu_Drupal-8_105_custom-favicon_1-upload-favicon.png)](/support/wp-content/uploads/2013/10/edu_Drupal-8_105_custom-favicon_1-upload-favicon.png) From the theme settings page, scroll down to the *Shortcut Icon Settings* section where you will at first see a single setting labled **Use the default shortcut icon supplied by the theme**. Uncheck the checkbox and two new fields will appear. Path to custom icon the folder path to a icon that has already been uploaded. Upload icon image The **Browse** button to upload an icon from your local machine. We uploaded a new icon from our local machine for our example.
6. After your new icon has been uploaded, click on the **Save Configuration** button. This will save and activate the change. Included below is a before and after comparison displaying our favicon change. Before After [![the configuration screen for the module](https://www.inmotionhosting.com/support/wp-content/uploads/2013/10/edu_Drupal-8_105_custom-favicon_before.png)](/support/wp-content/uploads/2013/10/edu_Drupal-8_105_custom-favicon_before.png) [![the configuration screen for the module](https://www.inmotionhosting.com/support/wp-content/uploads/2013/10/edu_Drupal-8_105_custom-favicon_after.png)](/support/wp-content/uploads/2013/10/edu_Drupal-8_105_custom-favicon_after.png)