Link to home
Start Free TrialLog in
Avatar of Donald Maloney
Donald MaloneyFlag for United States of America

asked on

Extracting Icon but saves ico as blank

I had this question after viewing extract webpage icon.

An example is  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
Avatar of Moussa Mokhtari
Moussa Mokhtari

You mean this image User generated image
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 User generated image
Avatar of Donald Maloney



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

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

$url = '';
$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:
Okay cause i think you wrote right of the page
if you mean this image
User generated imageIts .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"); = "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
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.?
Did you try the clickable links in my earlier post?  Did any of them not work correctly?  What part did you not understand?
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?
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Merete
Bookmark your web page drag to desktop, it would look like  the round chrome ball if using chrome
Use my png,
User generated image then go this web site  <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
User generated image