Creating favicons with ChatGPT

Published 26 December 2022

Creating favicons is a task that in the past I have found to take hours. It’s not a task I wish to spend so much time on. I attempted to speed up this process using ChatGPT.

Two apps I have developed recently were in need of favicons:

The design I had in mind for Panel layout generator was a simple 3×3 grid of colour squares using the demo data from the app.

Here is the conversation:

Please create me an svg of a 3x3 grid of colours using this matrix of colours

[
  ['rgb(245, 169, 188)', 'rgb(243, 247, 129)', 'rgb(169, 188, 245)'],
  ['rgb(169, 245, 208)', 'rgb(245, 169, 188)', 'rgb(169, 245, 208)'],
  ['rgb(169, 188, 245)', 'rgb(243, 247, 129)', 'rgb(245, 169, 188)']
]

Sure! Here’s an SVG that uses your matrix of colors to create a 3x3 grid:

<svg width="300" height="300">
  <rect x="0" y="0" width="100" height="100" fill="rgb(245, 169, 188)" />
  <rect x="100" y="0" width="100" height="100" fill="rgb(243, 247, 129)" />
  <rect x="200" y="0" width="100" height="100" fill="rgb(169, 188, 245)" />
  <rect x="0" y="100" width="100" height="100" fill="rgb(169, 245, 208)" />
  <rect x="100" y="100" width="100" height="100" fill="rgb(245, 169, 188)" />
  <rect x="200" y="100" width="100" height="100" fill="rgb(169, 245, 208)" />
  <rect x="0" y="200" width="100" height="100" fill="rgb(169, 188, 245)" />
  <rect x="100" y="200" width="100" height="100" fill="rgb(243, 247, 129)" />
  <rect x="200" y="200" width="100" height="100" fill="rgb(245, 169, 188)" />
</svg>

This SVG consists of nine rect elements, each with a fill attribute set to one of the colors in your matrix. The x and y attributes determine the position of each rectangle within the SVG, and the width and height attributes determine the size of each rectangle.

I hope this helps! Let me know if you have any questions.

favicon 0

The SVG was exactly what I wanted. I just added the XML Namespace tag xmlns=“http://www.w3.org/2000/svg”

My second attempt at generating a favicon with ChatGPT was for Crate Guide. The design I had in mind was again very simple. I wanted it to look like a vinyl record. This time I defined in my prompt the requirement that the svg be a favicon.

Here is the conversation:

Can you please create for me an svg favicon that looks like a vinyl record

Sure! Here is an SVG code snippet that you can use to create a favicon that looks like a vinyl record:

<svg
  width="128"
  height="128"
  viewBox="0 0 128 128"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <circle cx="64" cy="64" r="60" fill="#333333" />
  <circle cx="64" cy="64" r="56" fill="#EEEEEE" />
  <circle cx="64" cy="64" r="45" fill="#333333" />
</svg>

This code creates a 128x128 pixel SVG image with three circles. The outermost circle is filled with a dark color and has a radius of 60 pixels. The middle circle is filled with a light color and has a radius of 56 pixels. The innermost circle is filled with a dark color and has a radius of 45 pixels.

To use this SVG as a favicon, you can save it as a file with the .svg extension and then link to it from the <head> of your HTML file using the <link> element like this:

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

This is the result:

favicon 1

Can you change the diameter of the inner circle to 60% of what it is now and half the distance between the middle and outer circles by increasing the inner circle?

Certainly! Here is the modified SVG code snippet that you requested:

<svg
  width="128"
  height="128"
  viewBox="0 0 128 128"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <circle cx="64" cy="64" r="60" fill="#333333" />
  <circle cx="64" cy="64" r="49" fill="#EEEEEE" />
  <circle cx="64" cy="64" r="45" fill="#333333" />
</svg>

This code creates an SVG image with the same overall dimensions as the original, but with some changes to the circles. The outermost circle has the same radius as before, but the middle circle has a radius of 49 pixels, which is slightly smaller than the original. The innermost circle has the same radius as before, but it is now positioned closer to the middle circle because the distance between the circles has been reduced.

The inner circle’s radius is now 45 pixels, which is 60% of the original radius of 75 pixels. The distance between the middle and outer circles has been halved by increasing the inner circle’s radius by 15 pixels (half of the original 30-pixel gap).

I hope this helps! Let me know if you have any further questions or need additional assistance.


Unfortunately the result still did not resemble a vinyl record:

favicon 2

The model performed well this time in providing me with attributes on the SVG tag and the html tag required, however it failed to generate a convincing record svg.

I modified the results to achieve the following:

<svg
  width="128"
  height="128"
  viewBox="0 0 128 128"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <circle cx="64" cy="64" r="60" fill="#000" />
  <circle cx="64" cy="64" r="59" fill="#181818" />
  <circle cx="64" cy="64" r="51" fill="#000" />
  <circle cx="64" cy="64" r="50" fill="#181818" />
  <circle cx="64" cy="64" r="41" fill="#000" />
  <circle cx="64" cy="64" r="40" fill="#181818" />
  <circle cx="64" cy="64" r="31" fill="#000" />
  <circle cx="64" cy="64" r="30" fill="#181818" />
  <circle cx="64" cy="64" r="22" fill="#000" />
  <circle cx="64" cy="64" r="20" fill="#f9f2de" />
  <circle cx="64" cy="64" r="1" fill="#000" />
</svg>
favicon 3

Summary

Despite the failures of my second attempt, ChatGPT was very helpful in this task. I’ll be looking for opportunities to use it again for more elaborate tasks with better prompts.

back to other posts