DEV Community

Cover image for How to update your favicon on your website
Rodrigo Veiga
Rodrigo Veiga

Posted on

How to update your favicon on your website

Hello I'm Rodrigo Veiga and I'm the developer of the app QuickCoords (an app of compass exploration and calculation of coordinates).

What's a favicon

A favicon (short for favorite icon) is a file containing one or more small icons associated with a particular website (Source)

In simple terms a favicon is the little top icon before your website domain that represents normally the logo of the website. Here's an example of the favicon of Wikipedia:

Image of the favicon of wikipedia website

How to change the favicon of my website?

If you're like me you're struggling to do such a simple thing as changing a favicon. Don't worry I have a complete solution for you 🙃!

🚫 Favicon.ico 🚫

A simple solution seems to create a favicon.ico file and just use it but unfortunately it's not that simple

For example, if you see your website in an Apple device you would not see any favicon... Why? Because Apple requires an additional configuration called "apple-touch-icon"

For Safari you need a SVG file because of some MacBooks Touch Bar and pinned websites

How to do it?

So let's get to work 🔨:

  • You could generate all by yourself but I don't recommend because you could get errors. What I recommend is using this website

Supported platforms of the website

As you see the website supports the most famous platforms and browsers

  • After you upload your logo the website will give you options for each platform and browser. It's not bad keeping all by default but you should pay attention to detail 😉

  • Then just download the pack of the files and put in the public folder or other folder on your website directory

Files in public folder

  • And finally you just insert the code in your index.html. Normally it should look like this or similar:

Code

How to clear caches of favicon in Safari

Safari has a cache of Safari and when developing the website in localhost it sometimes show the previous non favicon because its in cache.

To clear it:

  1. Quit Safari. Select safari and do CMD + Q
  2. Using Finder, click Go then Go to Folder
  3. Enter ~/Library/Safari/Favicon Cache/ in the window that pops up and go to this location
  4. Select all the items and delete them. Also clear your bin

Done!

If you've done all this and its not working restart your browser or clear caches.

Now your done, you now have your new favicon 🎉

If you have any more questions please let me know in the comments 😁

Top comments (6)

Collapse
 
mexikode profile image
MexiKode ⚙

you dont even need to include it in your html, just upload the favicon.ico to your root directory

Collapse
 
vladkens profile image
vladkens

Good

Collapse
 
rufusakande profile image
rufusakande

Wow thanks you for this information

Collapse
 
rodriveiga01 profile image
Rodrigo Veiga

Thank you!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.