There are a few reasons for this:
Error pages are content scarce. Adding illustrations bulks it up a bit.
Stumbling upon an error page isn't fun for a user. Adding illustrations and a touch of humor (its common sidekick) is an attempt to balance the bad vibes out.
It's currently trending and successful software patterns tend to catch on.
I think it's done because of a couple of reasons.
1. To be welcoming to the user
Error 404 never occurs in a situation where everything is alright. The same goes for connectivity errors, server down, etc.
You'd see marketing, forum-based, social and shopping websites doing this the most. Enterprise-level software or websites never do this. The reason ...
One problem with your first example is in deciding which message to summarize.
In your example, there appear to be two messages (one informative: there's an update available; one error/warning: connection issue). By showing an summary of the informative message, you are actively hiding the presence of the warning message (the user might not want to update ...
Gives more details, but not a quick overview of the amount of things present
Is more interesting to the user, since he can quickly assess how interesting this information is for him and decide if it is worth it to click on it at all
Provides general overview, but without any context
Depending on frequency of the notifications, users ...
There's a third option similar to the one used on this page: the message tray icon that is only activated when it has some content with the corresponding number.
The message tray can contain any type of message or alert: not just a type but any
It doesn't disappear when there is no any alert, it simply occupies the same place, it's a way of ...
I think your first option provides more context to the user. Gives a clearer idea of what is happening and I would suggest dropping the icon and instead, go for a coloured label to indicate something. Like Sketch do here...