Use favicon img as Entry Icon for blog post

[motusmove]

Hi there,

I am wondering if it would be possible to change the entry icon for blog posts to the same image as I use as favicon? I am trying to achieve a very custom look for my blog.

Hope you can help me with this

Regards,
Carina

[rad]

Hi Carina,

Thanks for reaching out.

That could be possible but I’m not sure which entry icon you’re referring. If you’re referring to the icon here on post title http://demo.theme.co/icon-1/blog/, then it’s simply as adding this CSS to Theme Options > CSS with the URL of your favicon.

.blog .entry-title:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(http://example.com/wp-content/uploads/favicon.jpg);
}

It should be an image and not an .ico file.

Thanks!

[motusmove]

@Rad

.blog .entry-title:before {
content: “”;
display: inline-block;
width: 16px;
height: 16px;
background: url(http://example.com/wp-content/uploads/favicon.jpg);
}

Hi Rad,

Thanks for det code! However, when I insert it and change the URL to my uploaded png, the entry icon is just removed completely.

[rad]

Hi @motusmove,

It seems you’re adding a really big image, I assumed it’s just as size as favicon (16x16). For that, I recommend changing that to this

.blog .entry-title:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url(http://example.com/wp-content/uploads/favicon.jpg);
background-size: cover;
}

Then just change the 16px width and height according to your preferred size.

Thanks!

[motusmove]

@Rad

.blog .entry-title:before {
content: “”;
display: inline-block;
width: 16px;
height: 16px;
background: url(http://example.com/wp-content/uploads/favicon.jpg);
background-size: cover;
}

Hi Rad,

Thanks, changing the size of the png worked like a charm!

• Carina

[friech]

We are delighted to assist you with this.

Cheers!