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:

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

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

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

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 😁

Comments

[MexiKode ⚙]

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

[vladkens]

Good

[rufusakande]

Wow thanks you for this information

[Rodrigo Veiga]

Thank you!