How to Create Hi Res Favicon For Your WordPress Website

I realized a traditional favicon pixellated when I viewed from a Hi-Res smartphone screens. After googling for a while I found out that .ico file can stores multiple resolution at a file, so it would be practical to apply it.

Create a square image

I suggest to create a 64×64 px or bigger  with PNG file format, although current Hi-Res screens still using  a 32×32 px dimension.

ps-icon

Convert to .ico

There are manual ways to create multiple resolution .ico, as I read it here. But I will go with more practical way, go to Icon Converter website and upload your created .png file.

ico-converter

You will get your favicon.ico file after a successful conversion.

Put it Live

Upload your favicon.ico to your images folder. And put below code before </head> tag on your page.

if you are using WordPress, paste this code to your functions.php file

All done, now go on check your new Web favicon on your high res devices.

How To, PHP, Software, Wordpress

4 thoughts on “How to Create Hi Res Favicon For Your WordPress Website

  1. Hi. I see this is a few years old, but I thought I might throw in a question. I use WordPress on Azure. Added the code to the header.php and that works for the first page, but not any of the other pages. Tried adding it to functions.php, but that crashed the page completely. Is there an update somewhere that makes this not work, or could it be theme related?

    1. Hi, The code should be still relevant to any WP version and Themes, but in particular case it might be conflicted with theme / plugin related to function naming, try to change ‘add_favicon’ to ‘any_add_favicon’ in functions.php

  2. Hi. Thanks for your answer. I tried adding ‘any_’, it doesn’t crash the page anymore, but also it does not make any difference, but it got me thinking. I have a favicon already, added through the theme customiser. If I remove this, the “any_” solution solves it, (still does not work without any_). But the favicon I added through the theme customiser also served as home screen icon for touch devices like iPhone and iPad. I guess maybe there is a solution out there to add these using code, I can look around for it. 🙂 Thanks a lot.

Any idea? Fill the comment below

This site uses Akismet to reduce spam. Learn how your comment data is processed.