asked on

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

Moussa Mokhtari

You mean this 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

Donald Maloney

ASKER

Moussa,

not that image.
It would be the image in the tab at the top of the browser
http://www.fitbit.com/

I did an inspect but did not see an .ico imagre
Don

Ray Paseur

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:
http://iconoun.com/demo/fitbit.png

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

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

$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);
        $this->getChrs();
        $this->getScale();
        $this->getNibbles();
        return $this;
    }

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

            $len = strlen($chr)-1;
            while ($len > 0)
            {
                $out .= $dot;
                $len--;
            }
        }
        $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()
    {
        // GET THE HEX BYTE VALUES IN A STRING
        $hex = str_split(implode(NULL, unpack('H*', $this->str)));

        // ALLOCATE BYTES INTO HI AND LO NIBBLES
        $this->hi  = NULL;
        $this->lo  = NULL;
        $mod = 0;
        foreach ($hex as $nib)
        {
            $mod++;
            $mod = $mod % 2;
            if ($mod)
            {
                $this->hi .= $nib;
            }
            else
            {
                $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

Outputs:

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
‰PNG


IHDRóÿa@IDAT8ÒO+¦QðIÖ’,|ƒÁrJ63HOŠzD½a&YcáL¬hŠ¥”“”N)M±šÅ”Ér’…Ædõ.¤XÈâ9Ê;õ<¹7çÏ}ŸëÜ×_______________________________________________________________________________________________________________________
854400100000444500010001000001ff600044445388d42a510f14d9278c743344874b116256e04a681a999424b9c9c798c6f2a5ce3c3f3b3ec79edd
90e7daaa000d98420000000086000f3f1001094148dd2fb61860f962cc312a638faa4d1f169313cc8a45434e9d1a549225645e48829ab5c977fdfbc7


Icon in new window

Open in new window

You can try the script on my server, here:
http://iconoun.com/demo/temp_fitbit.php

Moussa Mokhtari

Okay cause i think you wrote right of the page
if you mean this image

Its .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>
<script>

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");
  a.click();
};

</script>

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 Maloney

ASKER

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 Paseur

Did you try the clickable links in my earlier post? Did any of them not work correctly? What part did you not understand?

Donald Maloney

ASKER

Ray,
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?

ASKER CERTIFIED SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Merete

Bookmark your web page drag to desktop, it would look like the round chrome ball if using chrome
Use my 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
https://www.dropbox.com/s/94j4olrs6moj7z8/Web%20image%20.png.ico?dl=0
>tested it with Chrome shortcut of your linked web page changed icon and it works