How do I make a home button using an image for the icon on tkinter?

Question

I tried a few methods to complete this but none have worked so far. Heres the design of the page im trying to make and notice the home button on the top left is what im having trouble with.

This is the code from my most recent attempt:

from tkinter import *

home = Tk()
home.title("Home Page")
home.resizable(0,0)

header = LabelFrame(home, bg="#12a8e3")
content = LabelFrame(home, bg="white")

header.columnconfigure(0, weight=1) # Forces column to expand to fill all available space

homeButton=Button(header,width=80,height=200)
try:
    homeIcon=PhotoImage(file="font-awesome-computer-icons-house-font-address.jpg")
    homeButton.config(image=homeIcon)
    homeButton.image = image
except TclError:
    pass
homeButton.pack(side=LEFT)

papersLabel = Label(content, text="Exam Papers", padx=430, pady=15, bg="#12a8e3", fg="white", font=("Ariel",25, "bold"), activebackground="#12a8e3", anchor="w", justify="left")
papersLabel.grid(row=1, column=0, columnspan=3, padx=15, pady=40)
papersPhysics = Label(content, text="Physics")
papersPhysics.grid(row=2, column=0)

practiceLabel = Label(content, text="Practice exam questions", padx=341, pady=15, bg="#12a8e3", fg="white", font=("Ariel",25, "bold"), activebackground="#12a8e3", anchor="w", justify="left")
practiceLabel.grid(row=3, column=0, columnspan=3, padx=15, pady=40)

videoLabel = Label(content, text="Helpful videos", padx=421, pady=15, bg="#12a8e3", fg="white", font=("Ariel",25, "bold"), activebackground="#12a8e3", anchor="w", justify="left")
videoLabel.grid(row=4, column=0, columnspan=3, padx=15, pady=40)

header.grid(row=0, sticky='NSEW')
content.grid(row=1, sticky='NSEW')

home.mainloop()

The design is all messed up when I add this and I cant figure out why. If you comment the button out youll see the page i designed that is messed up by this. Does anyone know any fixes?

Heres the image of the home icon if needed

Remove your `try ... except ...` block and show the Tracback. You probably get: [tkinter-tclerror-couldnt-recognize-data-in-image-file](https://stackoverflow.com/questions/48492727) — stovfl, Jun 23 '20 at 10:22
Your image is too big, try resizing the image to desired size. — acw1668, Jun 23 '20 at 10:23
What is the error you are getting? You are swalloging it up, python is trying to tell you what the problem is but you're ignoring it. — Bryan Oakley, Jun 23 '20 at 13:16

score 1 · Accepted Answer · answered Jun 23 '20 at 14:52

The reason it isn't working is because PhotoImage() only works with .png and other formats, not .jpg.

So, I converted it to a .png, and here is the code:

from tkinter import *

home = Tk()
home.title("Home Page")
home.resizable(0,0)

header = LabelFrame(home, bg="#12a8e3")
content = LabelFrame(home, bg="white")

header.columnconfigure(0, weight=1) # Forces column to expand to fill all available space

homeButton=Button(header,width=80,height=200)
try:
    homeIcon=PhotoImage(file="yes.png")
    homeButton.config(image=homeIcon)
    homeButton.image = homeIcon

except TclError:
    print("here")
homeButton.pack(side=LEFT)

papersLabel = Label(content, text="Exam Papers", padx=430, pady=15, bg="#12a8e3", fg="white", font=("Ariel",25, "bold"), activebackground="#12a8e3", anchor="w", justify="left")
papersLabel.grid(row=1, column=0, columnspan=3, padx=15, pady=40)
papersPhysics = Label(content, text="Physics")
papersPhysics.grid(row=2, column=0)

practiceLabel = Label(content, text="Practice exam questions", padx=341, pady=15, bg="#12a8e3", fg="white", font=("Ariel",25, "bold"), activebackground="#12a8e3", anchor="w", justify="left")
practiceLabel.grid(row=3, column=0, columnspan=3, padx=15, pady=40)

videoLabel = Label(content, text="Helpful videos", padx=421, pady=15, bg="#12a8e3", fg="white", font=("Ariel",25, "bold"), activebackground="#12a8e3", anchor="w", justify="left")
videoLabel.grid(row=4, column=0, columnspan=3, padx=15, pady=40)

header.grid(row=0, sticky='NSEW')
content.grid(row=1, sticky='NSEW')

home.mainloop()

Image for reference:

Hope this helps!

thanks this is perfect. I resized the image aswell so it would fit in there but this is exactly what i was aiming for thanks — alvindraper, Jun 23 '20 at 16:12

How do I make a home button using an image for the icon on tkinter?

1 Answers1