Favicon или иконка в адресной строке

Favicon или иконка в адресной строке

Всем привет!

Сегодня получил в отзывы вопрос такого содержания: “Скажите, а как можно поставить иконку в строку адреса?”

Что ж, раз такие вопросы возникают, значит, это кому-нибудь нужно. Ну а раз это кому-то нужно, значит прямо сейчас и поговорим о создании таких иконок.

Содержание статьи:

Не знаю, правда это или нет, но есть предположение, что название “favicon” пошло от “favorite icon” (“избранная иконка” или “иконка в Избранном”). И действительно, благодаря этой мелочи сайт не теряется среди закладок, приобретает какую-то уникальность, “избранность”, выделяется на фоне серой массы закладок с иконками по умолчанию.

Готовим картинку

Ну а теперь, наконец, о том, как же ее сделать.

Можно нарисовать её самому, а можно воспользоваться онлайн сервисом, он сгенерируют фавиконку из загруженной Вами картинки.

В любом случае, Вам потребуется картинка размером 16x16 пикселей с названием favicon.ico.

Добавляем на сайт

  1. Самое простое - скопировать иконку в корневой каталог сайта, при этом ее название обязательно должно быть favicon.ico и никак иначе.

  2. А если нужно разместить ее не в корневом каталоге? Если честно, вряд ли это может стать чьим-то обязательным требованием, это просто такое вот стремление к красоте: все картинки у меня лежат в images, чем иконка лучше?! Забрасываем нашу иконку ко всем остальным картинкам, а в контейнере тега <head> пишем вот такое:

html
1
2
<link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />

Порядок, теперь favicon прекрасно видится из того каталога, в котором ей и было указано лежать и не отсвечивать, где не просят. Ну а вопрос, думаю, на этом можно закрывать. Желаю каждому своему читателю выделяться самим и выделять свои творения, например, при помощи favicon. А почему бы и нет?

Заключение

К сожалению, не все браузеры понимают размещение favicon.ico в каталоге, поэтому все же предпочтительнее будет размещать файл с иконкой прямо в корне Вашего сайта, чтобы избежать лишних проблем.

Если статья была Вам полезна. не забываем поделиться ею в социальных сетях.

Спасибо!