Extracting Icon but saves ico as blank

I had this question after viewing extract webpage icon.

An example is www.fitbit.com  page
I go to the item with the icon and see it in the upper left of the page.
right click and save as ICO  but when I see it it is blank
LVL 11
Donald MaloneyConsultantAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Moussa MokhtariEnterpreneurCommented:
You mean this image cart-empty.fd0fc1c2aaf62f9370590cac6.png
you can't get the the image cause it's in the css style
Just right click on the image
>press inspect
>get the name of the class
>find it in the style
>search for background in that class you should find an url to the image open it in new tab and save it .
this image will illustrate what i wrote ficon.jpg
Donald MaloneyConsultantAuthor Commented:

not that image.
It would be the image in the tab at the top of the browser

I did an inspect but did not see an .ico imagre
Ray PaseurCommented:
See: http://www.fitbit.com/favicon.ico

That image is not the standard .ico file type.  It's a Portable Network Graphic .png type, with varying levels of transparency.  Here is a PHP script that shows what you're working with, and also enables you to copy / save the image.  I succeeded in saving it as a .png here:

<?php // demo/temp_fitbit.php
 * http://www.experts-exchange.com/questions/28933168/extract-webpage-icon.html#a41507902

$url = 'http://www.fitbit.com/favicon.ico';
$doc = file_get_contents($url);
$doc = substr($doc,0,120);
$hex = new Hexdump($doc);

$lnk = PHP_EOL . PHP_EOL . '<a target="_blank" href="' . $url . '">Icon in new window</a>';
echo $lnk;

Class Hexdump
    public function __construct($str)
        $this->str = $str;
        $this->arr = preg_split('~~u', $str, -1, PREG_SPLIT_NO_EMPTY);
        return $this;

    public function getChrs($dot='_')
        $out = NULL;
        foreach ($this->arr as $chr)
            $out .= $chr;

            $len = strlen($chr)-1;
            while ($len > 0)
                $out .= $dot;
        $this->len = strlen($out);
        $this->out = $out;
        return $out;

    public function getScale()
        $this->num = substr('1...5...10...15...20...25...30...35...40...45...50...55...60...65...70...75...80...85...90...95..100..105..110..115..120..125..130', 0, $this->len);

    public function getNibbles()
        $hex = str_split(implode(NULL, unpack('H*', $this->str)));

        $this->hi  = NULL;
        $this->lo  = NULL;
        $mod = 0;
        foreach ($hex as $nib)
            $mod = $mod % 2;
            if ($mod)
                $this->hi .= $nib;
                $this->lo .= $nib;

    public function render($br = PHP_EOL)
        echo $br . '<pre>';
        echo $br . $this->num;
        echo $br . $this->out;
        echo $br . $this->hi;
        echo $br . $this->lo;
        echo $br;

Open in new window



Icon in new window

Open in new window

You can try the script on my server, here:
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Moussa MokhtariEnterpreneurCommented:
Okay cause i think you wrote right of the page
if you mean this image
download--4-.pngIts .svg
inspect it and save it as svg and then convert it to png
use this code
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="120" height="30"></canvas>

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

var image = new Image;
image.src = "fallback.svg";
image.onload = function() {
  context.drawImage(image, 0, 0);

  var a = document.createElement("a");
  a.download = "fallback.png";
  a.href = canvas.toDataURL("image/png");


Open in new window

save it as .html and save the .svg file in the same directory and open the html page then you can save it as .png
Donald MaloneyConsultantAuthor Commented:
That is all well and good.
However the code is not useful to me since I don't know how to run it.
Nor do I think I should search code for an ico or png image.

What do people do who have no idea what code is?

There should be an easy way to capture the image from the label and create an ico without having to go through multiple steps.

In the past it seemed that when a shortcut was created the system would id the icon and import it as the icon for the shortcut.
It seems as if Windows 7 does not do that now.

Is there an exe that will use the url as an import and give the ico as an image to save.?
Ray PaseurCommented:
Did you try the clickable links in my earlier post?  Did any of them not work correctly?  What part did you not understand?
Donald MaloneyConsultantAuthor Commented:
I have the picture.  
However what I want to do is save it as an . ico
So then when I go into my shortcut I can change the desktop Icon from the browser icon to the webpage icon.
Also I understand the code but how would I run it?
Ray PaseurCommented:
Here are the steps I followed to make a favicon from the (misnamed) PNG image:

1. Visit http://www.fitbit.com/favicon.ico
2. Firefox at current version; Mouseover the image and right click
3. Save Image As (select location)
4. Default file name will be favicon.ico.png - change this to xxx.png
5. Visit www.favicon.cc/
6. Click "Import Image" and "Browse"; Locate xxx.png; click Upload
7. Under the preview panel, click Download Favicon

Look in your regular downloads directory where you will find the favicon.ico file in the corrected format!

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bookmark your web page drag to desktop, it would look like  the round chrome ball if using chrome
Use my png,
web image icon png then go this web site https://iconverticons.com/online/  <drag and drop it on
and convert your png to .ico   click on the .ico tab   choose your size to convert.
then rightclick the  Chrome shortcut bookmarked then properties change icon
Here is the png now an ico you can download  
>tested it with Chrome shortcut of your linked web page  changed icon and it works
chrome icon changed
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.