Update icon after 20 years

[imshvc]

New icon provides additional sizes (32, 64, 128, 256)
Font shape and contrast has been altered for easier legibility, as well as presence of anti-aliasing which smooths out sharp edges.

[iluuu1994]

@oxou Thanks for your work. Maybe consider sending a mail to the internals mailing list. There's unfinished work on the website, and the there logo is relatively new I think. Maybe the people who work on that have some thoughts.

[vdelau]

Good initiative! However, I'm a bit concerned with the look of the icon at bigger sizes. The letters seem to be of a different typeface than for instance used in the logos on the main website. Especially the rounded corners of the letters themselves look weird to me.

[imshvc]

@vdelau Indeed. The typeface is weird because I aligned it to match the original 16x16 icon, and to also not deviate too far from the original, those rounded corners smooth out sharp edges at lower resolutions but may not look appealing at higher resolutions. As of writing this I am working on reconstructing the icon from the php.net favicon so we'll see how that goes.

[imshvc]

Here's the new iteration, thoughts?

[vdelau]

Much better! There are two minor things that should be improved in my opinion:

• Especially at larger sizes, add some margin around the letters and outline.
• I think the smallest size (16x16) suffers from the slant, but I think we should not be to concerned about that.

We could deviate a bit further from the original and align with the favicon, as mentioned on list. The favicon uses white text on a purple background, instead of the black text with white outline.

Additional question: How do you technically create the icon? Is this a reproducible process, for instance rendering SVG into a bitmap? In that case it might be helpful to also have the source SVG and 'build steps'.

[imshvc]

I mainly work with raster images, though I've done some experimenting with Potrace but have had mixed results and could not get a decent result in the end.

The build step in this case is basically a set of ImageMagick commands wrapped in a shell script. Input file is a PNG that's used as a base image and is then downsampled to multiple resolutions to form an icon (.ICO) file.

I will attach the files and the script so you can see how it works, you'll need ImageMagick installed.

build-php-icon.zip

---

Here's the preview of the icon from php.net:

[Ayesh]

In the current PHP logo, the font face is Handel Gothic. There are three variants: Regular, Italic, and bold. I checked the current logo and the slant we have in the logo is not exactly the Italic variant, but about 6 degree of shear.

I went ahead and recreated the logo in SVG, also attaching a PNG for preview:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <style>
      .a {
        fill: #777bb3;
      }

      .b {
        fill: #f1f2f2;
      }
    </style>
  </defs>
  <title>Artboard 1</title>
  <rect class="a" width="512" height="512"/>
  <g>
    <path class="b" d="M135.73,192.35q28.74.26,41.82,17.59t8.84,47.35a102.44,102.44,0,0,1-7.33,26.91A79.68,79.68,0,0,1,163.51,308q-12.19,13.46-26,17.07a112.62,112.62,0,0,1-28.71,3.63H79.48l-8.94,49.16H36.63L70.34,192.35ZM98.9,221.84,84.79,299.47a21.34,21.34,0,0,0,3.25.26h3.29q23.39.25,39-5.05T151.06,257q4.2-27.16-8.95-31.3t-32.72-3.89c-1.83.18-3.59.26-5.3.26H98.85Z"/>
    <path class="b" d="M261.83,142.93l-9,49.42h30.26q24.78.51,37.18,10.86t7.37,39.33L312,328.71H277.85l14.95-82.29q2.35-12.93-1.54-18.37t-16.83-5.43l-27-.26L228.07,328.71H194.4l33.76-185.78Z"/>
    <path class="b" d="M431.7,192.35q28.74.26,41.82,17.59t8.84,47.35A102.44,102.44,0,0,1,475,284.2,80.07,80.07,0,0,1,459.48,308q-12.21,13.46-26,17.07a112.7,112.7,0,0,1-28.72,3.63H375.44l-8.93,49.16H332.59l33.72-185.52Zm-36.84,29.49-14.1,77.63a21.21,21.21,0,0,0,3.24.26h3.3q23.37.25,39-5.05T447,257q4.2-27.16-8.95-31.3t-32.73-3.89c-1.82.18-3.58.26-5.29.26h-5.25Z"/>
  </g>
</svg>

[vdelau]

Assuming the above SVG is saved as php-ico.svg, one could create an ICO file with the following ImageMagick calls:

for I in 16 32 64 128 256; do convert -size ${I}x${I} -depth 8 -alpha deactivate php-ico.svg php-ico-${I}.png; done
convert -adjoin php-ico-* php.ico

https://gist.github.com/vdelau/54cc73d99f59bc181b7b1e4ea3ea1fd6

[Ayesh]

Most browsers support SVG favicons too: https://caniuse.com/link-icon-svg

[imshvc]

@Ayesh Great work! I appreciate you lending the hand, could you align the text in the SVG to match the raster version?

If we deviate from the grid it could introduce blurry results due to the nature of how downsampling algorithms work.

While the resulting 16x16 image looks almost identical to mine, there's slight blurriness on both sides which isn't noticable if you look from far, but just to make sure the text is correctly center.

I apologize if this is too nitpicky because I know it is, just make that slight change by moving the text horizontally, you don't actually need to align it vertically because it scales better on your version.

Eventually I'll include your SVG in the branch in case people wanna make changes in the future e.g. colors and such.

Can you also provide information as to what tools you used? Thanks again!

[imshvc]

@vdelau Good approach, I modified that command a little bit:

for I in 16 32 64 128 256; do convert -size ${I}x${I} php-ico.svg php-ico-${I}.png; done
convert -adjoin php-ico-* php.ico
rm -f php-ico-*.png

1. Removed -alpha deactivate as icons can support transparency.
2. Removed -depth 8 as once we adjoin all the images this won't have an effect.
3. Cleanup after we've generated the icon.

---

Windows variant:

for %%i in (16,32,64,128,256) do magick convert -size %%ix%%i php-ico.svg php-ico-%%i.png
magick convert -adjoin php-ico-* php.ico
del /f /q php-ico-*.png

[Ayesh]

@oxou thanks a lot for the review. I tried a bit with the positioning. You are right it indeed wasn't aligned to the center properly. I adjusted this one 32px in left-right, and 138px in top-bottom margins in a 512x512px artboard.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <style>
      .a {
        fill: #777bb3;
      }

      .b {
        fill: #f1f2f2;
      }
    </style>
  </defs>
  <title>Artboard 1</title>
  <rect class="a" width="512" height="512"/>
  <g>
    <path class="b" d="M131.86,187.37q28.74.25,41.82,17.59t8.84,47.35a102.34,102.34,0,0,1-7.33,26.91A79.56,79.56,0,0,1,159.64,303q-12.21,13.46-26,17.07a112.62,112.62,0,0,1-28.71,3.63H75.61l-8.94,49.16H32.75L66.47,187.37ZM95,216.87,80.92,294.49a21.34,21.34,0,0,0,3.25.26h3.29q23.37.25,39-5.05t20.75-37.65q4.2-27.17-8.95-31.3t-32.72-3.88c-1.83.17-3.59.26-5.3.26H95Z"/>
    <path class="b" d="M258,138l-9,49.42h30.25q24.79.52,37.19,10.87t7.37,39.33l-15.66,86.16H274l15-82.28q2.34-12.94-1.54-18.37t-16.83-5.44l-27-.26L224.2,323.73H190.53L224.29,138Z"/>
    <path class="b" d="M427.83,187.37q28.74.25,41.82,17.59t8.84,47.35a102.73,102.73,0,0,1-7.33,26.91A79.94,79.94,0,0,1,455.61,303q-12.21,13.46-26,17.07a112.7,112.7,0,0,1-28.72,3.63H371.57l-8.93,49.16H328.72l33.72-185.52ZM391,216.87l-14.11,77.62a21.44,21.44,0,0,0,3.25.26h3.3q23.37.25,39-5.05t20.75-37.65q4.2-27.17-9-31.3t-32.73-3.88c-1.82.17-3.58.26-5.29.26h-5.25Z"/>
  </g>
</svg>

[imshvc]

@Ayesh Thanks for your contribution, the SVG will be included in the commit

[imshvc]

@Ayesh Are you able to make a 2nd version SVG that matches the original design:

In case people change their mind they can easily swap the design.

Thanks

[Ayesh]

Took a try retracing the logo:

---

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <style>
      .a {
        fill: #777bb3;
      }

      .b {
        fill: #fff;
      }

      .c {
        fill: #231f20;
      }
    </style>
  </defs>
  <title>Artboard 1</title>
  <rect class="a" width="512" height="512"/>
  <path class="b" d="M41.51,158.74l147.75,0,8.83-49.46,92.61.33-6.47,49.49,188.26-.47c69.26,11.14,42.66,193.53-30.28,195.31-1.13,0-2.27.18-3.42.12l-45.62.17-10.38,50.27-94.81,0,9.87-50.22H100.06l-9.75,50.27L0,404.36V372.74Z"/>
  <g>
    <path class="c" d="M131.86,187.37q28.74.25,41.82,17.59t8.84,47.35a102.34,102.34,0,0,1-7.33,26.91A79.56,79.56,0,0,1,159.64,303q-12.21,13.46-26,17.07a112.62,112.62,0,0,1-28.71,3.63H75.61l-8.94,49.16H32.75L66.47,187.37ZM95,216.87l-14.1,77.62a21.34,21.34,0,0,0,3.25.26h3.29q23.37.25,39-5.05t20.75-37.65q4.2-27.17-8.95-31.3t-32.72-3.88c-1.83.17-3.59.26-5.3.26H95Z"/>
    <path class="c" d="M258,138l-9,49.42h30.25q24.79.52,37.19,10.87t7.37,39.33l-15.66,86.16H274l15-82.28q2.34-12.94-1.54-18.37t-16.83-5.44l-27-.26L224.2,323.73H190.53L224.29,138Z"/>
    <path class="c" d="M427.83,187.37q28.74.25,41.82,17.59t8.84,47.35a102.73,102.73,0,0,1-7.33,26.91A79.94,79.94,0,0,1,455.61,303q-12.21,13.46-26,17.07a112.7,112.7,0,0,1-28.72,3.63H371.57l-8.93,49.16H328.72l33.72-185.52ZM391,216.87l-14.11,77.62a21.44,21.44,0,0,0,3.25.26h3.3q23.37.25,39-5.05t20.75-37.65q4.2-27.17-9-31.3t-32.73-3.88c-1.82.17-3.58.26-5.29.26h-5.25Z"/>
  </g>
</svg>

[imshvc]

@Ayesh Excellent work! Mind sharing what tools you use as I'm personally interested in UI design and logos. Again thank you for your contributions.

[Ayesh]

Dabbling with Illustrator. Put the source image, resize it, set opacity to 20%, and retrace the lines :)

[vdelau]

Most browsers support SVG favicons too: https://caniuse.com/link-icon-svg

I believe this PR is mostly about the Windows icon, as used for php.exe and potentially other non-web places. Having this build pipeline in place might actually enable generating ICO and PNG version from the same source SVG.

[vdelau]

1. Removed `-alpha deactivate` as icons can support transparency.

I did this as the image does not make use of transparency, and disabling saves a couple of bytes as we only deal with 3 channels, instead of 4.

2. Removed `-depth 8` as once we adjoin all the images this won't have an effect.

Similarly, my ImageMagick version was using 16 bit channels, so setting this to 8 reduced the file size of the PNG files and also the ICO file (ICO supports embedding PNG instead of BMP data)

3. Cleanup after we've generated the icon.

Fair enough, although the PNG files might be good assets to have as well, and facilitate troubleshooting.

[imshvc]

Similarly, my ImageMagick version was using 16 bit channels,
so setting this to 8 reduced the file size of the PNG files
and also the ICO file (ICO supports embedding PNG instead
of BMP data)

I just learned this recently, good for future reference.

[morrisonlevi]

By the way, we already have an SVG based logo: https://www.php.net/images/logos/php-logo.svg. I'm fine with adding colors, etc, but they should be based on the same SVG coordinates.

Alternatively, if the coordinates are better in some way and you can argue that in a way I can understand, then we could update the SVG on the website to match.

[Ayesh]

@morrisonlevi - thank you! I was wondering why we didn't have an SVG, and I'm glad you pointed it out.

I reworked the SVG files by adding the SVG linked above to the square background, and positions adjusted to match the original. I also have a Windows icon by retracing the white shadow, but perhaps it's time we use that actual logo in Windows builds as well.

---

---

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }

      .cls-1, .cls-2 {
        stroke-width: 0px;
      }

      .cls-2 {
        fill: #777bb3;
      }
    </style>
  </defs>
  <rect class="cls-2" width="512" height="512"/>
  <g>
    <path class="cls-1" d="m60,188.22h69.07c20.27.17,34.96,6.01,44.07,17.52,9.11,11.51,12.11,27.23,9.02,47.16-1.2,9.11-3.87,18.04-7.99,26.8-3.95,8.76-9.45,16.66-16.49,23.71-8.59,8.93-17.78,14.6-27.57,17.01-9.79,2.41-19.93,3.61-30.41,3.61h-30.92l-9.79,48.96H23.15l36.85-184.78h0m30.15,29.38l-15.46,77.31c1.03.17,2.06.26,3.09.26h3.61c16.49.17,30.24-1.46,41.23-4.9,10.99-3.61,18.38-16.15,22.16-37.63,3.09-18.04,0-28.44-9.28-31.18-9.11-2.75-20.53-4.04-34.28-3.87-2.06.17-4.04.26-5.93.26h-5.41l.26-.26"/>
    <path class="cls-1" d="m222.96,139h35.56l-10.05,49.22h31.96c17.52.35,30.58,3.95,39.17,10.82,8.76,6.87,11.34,19.93,7.73,39.17l-17.27,85.82h-36.08l16.49-81.95c1.72-8.59,1.2-14.69-1.55-18.3-2.75-3.61-8.67-5.41-17.78-5.41l-28.61-.26-21.13,105.92h-35.56l37.11-185.03h0"/>
    <path class="cls-1" d="m365.52,188.22h69.07c20.27.17,34.96,6.01,44.07,17.52,9.11,11.51,12.11,27.23,9.02,47.16-1.2,9.11-3.87,18.04-7.99,26.8-3.95,8.76-9.45,16.66-16.49,23.71-8.59,8.93-17.78,14.6-27.57,17.01-9.79,2.41-19.93,3.61-30.41,3.61h-30.92l-9.79,48.96h-35.82l36.85-184.78h0m30.15,29.38l-15.46,77.31c1.03.17,2.06.26,3.09.26h3.61c16.49.17,30.24-1.46,41.23-4.9,10.99-3.61,18.38-16.15,22.16-37.63,3.09-18.04,0-28.44-9.28-31.18-9.11-2.75-20.53-4.04-34.28-3.87-2.06.17-4.04.26-5.93.26h-5.41l.26-.26"/>
  </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }

      .cls-1, .cls-2, .cls-3 {
        stroke-width: 0px;
      }

      .cls-2 {
        fill: #231f20;
      }

      .cls-3 {
        fill: #777bb3;
      }
    </style>
  </defs>
  <rect class="cls-3" x=".28" y=".2" width="512" height="512"/>
  <path class="cls-1" d="m43.41,149.09l147.74-.04,8.84-49.46,92.61.33-6.47,49.49,188.26-.47c69.26,11.14,42.66,193.53-30.28,195.32-1.13.03-2.27.18-3.42.12l-45.62.17-10.38,50.27-94.81-.04,9.88-50.22H101.97l-9.76,50.27-90.31-.1v-31.62l41.51-214Z"/>
  <g>
    <path class="cls-2" d="m62.28,179.42h69.07c20.27.17,34.96,6.01,44.07,17.52,9.11,11.51,12.11,27.23,9.02,47.16-1.2,9.11-3.87,18.04-7.99,26.8-3.95,8.76-9.45,16.66-16.49,23.71-8.59,8.93-17.78,14.6-27.57,17.01-9.79,2.41-19.93,3.61-30.41,3.61h-30.92l-9.79,48.96H25.43l36.85-184.78h0m30.15,29.38l-15.46,77.31c1.03.17,2.06.26,3.09.26h3.61c16.49.17,30.24-1.46,41.23-4.9,10.99-3.61,18.38-16.15,22.16-37.63,3.09-18.04,0-28.44-9.28-31.18-9.11-2.75-20.53-4.04-34.28-3.87-2.06.17-4.04.26-5.93.26h-5.41l.26-.26"/>
    <path class="cls-2" d="m225.24,130.2h35.56l-10.05,49.22h31.96c17.52.35,30.58,3.95,39.17,10.82,8.76,6.87,11.34,19.93,7.73,39.17l-17.27,85.82h-36.08l16.49-81.95c1.72-8.59,1.2-14.69-1.55-18.3-2.75-3.61-8.67-5.41-17.78-5.41l-28.61-.26-21.13,105.92h-35.56l37.11-185.03h0"/>
    <path class="cls-2" d="m367.8,179.42h69.07c20.27.17,34.96,6.01,44.07,17.52,9.11,11.51,12.11,27.23,9.02,47.16-1.2,9.11-3.87,18.04-7.99,26.8-3.95,8.76-9.45,16.66-16.49,23.71-8.59,8.93-17.78,14.6-27.57,17.01-9.79,2.41-19.93,3.61-30.41,3.61h-30.92l-9.79,48.96h-35.82l36.85-184.78h0m30.15,29.38l-15.46,77.31c1.03.17,2.06.26,3.09.26h3.61c16.49.17,30.24-1.46,41.23-4.9,10.99-3.61,18.38-16.15,22.16-37.63,3.09-18.04,0-28.44-9.28-31.18-9.11-2.75-20.53-4.04-34.28-3.87-2.06.17-4.04.26-5.93.26h-5.41l.26-.26"/>
  </g>
</svg>

[imshvc]

@morrisonlevi The coordinates of the glyphs differ on purpose.

We should not deviate from that, because the coordinates have been selected manually in order to provide the best result possible when downsampling.

The SVGs available in this commit have been specifically crafted for icon purposes.

I also don't understand what you meant by if the coordinates are better in some way ..., then we could update the SVG on the website.

The SVG you provided is rectangular and not square, which means its meant for a completely different purpose/application.

[medabkari]

@oxou Is there any chance you can continue your work on this? I don't think there's much left to finishing the awesome work you've done here

[imshvc]

@medabkari The work is done, it's up to the maintainers to come to a conclusion as to whether they want to merge or not.

[medabkari]

@Ayesh Sorry, i didnt know who to ping. Is there something left undone for this to be merged? I believe its mergeable no?

[Ayesh]

I'm unfortunately not a decision maker either. It is easy to make technical decisions, but aesthetic/political decisions like this are quite difficult to get a consensus on. I don't think we have a solid procedure for changes like this either.

@oxou understandably closed the issue, likely because of the lack of follow-up. Perhaps, either php/doc-en or php/doc-base are the right repositories to get some attention too, as well as emailing the Internals list again.

[imshvc]

I somehow just now realized the PR is closed, that was completely unintentional.

Having removed the fork from my account which in turn closed the PR.

Despite this the files are still accessible but only maintainers can merge so I'm guessing this will either need be put on the Internals list again as mentioned by @Ayesh, or someone else can do it as I've unsubscribed from the list.

Personally I don't want to be unpleasantly self-assertive about it as such a minor change doesn't affect the program in any way, but it would be really cool to see the newly updated icon on display, especially as someone who's running above 100% DPI on Windows and for the most part working inside the PHP Interactive shell, the icon is always on full display in the taskbar and on .PHP files.

[Ayesh]

Yeah GitHub started (a few months ago, IIRC) to close all PRs when deleting the fork.

I will ask the people from the PHP Foundation if there is an initiative for this, or if there is capacity to start one too.

[cmb69]

I'm very late to this party, but I would really appreciate to update the Windows icon of php.exe (etc.) Since this PR cannot be re-opened, maybe somebody wants to make a new PR, and assuming there are no copyright issues regarding the icon, that shouldn't even require a discussion on the internals mailing list – after all, it's just overdue to replace the old pixelation.

[imshvc]

@cmb69 If someone wants to make a PR based on assets from this one then go ahead - I'd be very happy.
I would do it myself but busy with stuff...

[Ayesh]

I created #14964 with the changes, with some modifications to the mkico.sh file, and using the last SVG file that we tried on this PR.