Сам стандарт можно почитать вот здесь – https://www.whatwg.org. Правда он на английском языке, но Google Translate вполне сносно его переводить на русский язык.
В HTML5 прописано, что можно указывать различные логотипы, которые отображаются в зависимости от операционной системы или требуемого размера самого логотипа. Пока я не совсем понимаю, где бы это могло пригодится и зачем это вообще нужно, но вставлять логотип сайта, вместо случайного снимка в SpeedDial`е можно использовать уже прямо сейчас.
Единственным минусом всего этого является то, что на сегодняшний момент это работает только в браузере Opera. Но внедрение этой возможности в «понимание» барузеров, зависит только от разработчиков и я уверен, что не за горами то время, когда все браузеры будут понимать это новшество HTML5. Именно из-за этого вебмастера должны уже сегодня задумываться о этой возможности и по максимуму использовать ее на своих сайтах, чтобы уже сейчас быть готовыми.
Как добавить логотип для SpeedDial`а на свой сайт?
Оказывается очень просто. За это отвечает html-контейнер (или как это правильно называть), который должен выглядеть, примерно, так:
<link rel="icon" type="image/png" href="https://adminway.ru/logo.png">Вот несколько правил для размещения логотипа:
- Изображение должно иметь:
- максимальные размеры – 260 × 195 пикселей (больше этого оно может быть, но, увы, его красоты никто не увидит)
- минимальные 114 х 114 пикселей (можно и меньше, но в некоторых случаях оно будет растянуто, а это выглядит, ой, как нелепо)
- если Вы укажите только одно изображение, скажем изображение размером 260 × 195 пикселей, то оно будет использоваться и в SpeedDial, и в качестве favicon`а, поэтому нужно добавить такую же строчку кода, но с меньшими размерами изображения, для favicon`а (об этом подробнее ниже)
- размещаться приведенный выше код должен между тегами <head>…</head>
На этом сайте я использую вот такой вот html-код:
<head>
...
<link rel="icon" type="image/png" href="https://adminway.ru/logo.png">
<link rel="icon" type="image/png" href="https://adminway.ru/favicon.ico">
...
</head>Первая строчка – это добавление логотипа для SpeedDial, а вторая строчка добавляет favicon для ваших web-страничек.
P.S. Во-втором пункте я обещал, что поясню такое поведение. В HTML5 принято, что если Вы указываете одно изображение, то оно используется везде. Но если Вы укажите два изображения, который будут иметь разное графическое разрешение, то браузер будет самостоятельно вставлять, там где это необходимо, меньшее изображение (в качестве favicon`а), а там где требуется более серьезный размер, использовать большое. Все гениальное просто. Если Вы укажите 2 одинаковых изображения, то будет использоваться только то, что объявлено выше остального.
Комментарии
Нет комментариев к данной статье.
Комментарии