Last Updated: June 27, 2020 | Reading Time: 2 minutes
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.
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.
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.
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">if you are using WordPress, paste this code to your functions.php file
function add_favicon() {
$favicon_code = '<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">';
$favicon_code .= '<link rel="icon" href="images/favicon.ico" type="image/x-icon">';
echo $favicon_code;
}
add_action('wp_head','add_favicon');All done, now go on check your new Web favicon on your high res devices.
4 Responses
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?
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
Found this page: https://realfavicongenerator.net
Let you adjust the icon for various devices and browsers, generates all the files and code for different languages. Pretty nice 🙂
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.