Позаботиться об иконке favicon.ico для своего сайта очень желательно. Это не просто картинка, которая показывается в адресной строке в браузере. Гораздо важнее, что она делает закладку с вашим сайтом в браузере более узнаваемой. Также сайт становится легко узнаваем в выдаче поисковиков.
Простой вариант
Делается favicon-иконка легко. В любом графическом редакторе готовим картинку размером 32x32 пикселя. Сегодня лучше именно такой размер, а не 16x16, как было ранее. Большая иконка без проблем подхватывается браузерами, а на всяких устройствах с Retina-дисплеями выглядит более гладко и красиво.
Под Windows могу рекомендовать редактор Paint.Net. Он бесплатен и все что нужно в нем есть.
Просто открываем в нем картинку, если нужно изменяем ее размер до 32x32.
Если у вас исходник не квадратный, то доводим его до квадрата, путем увеличения холста или обрезкой.
Картинку можно подготовить с прозрачным фоном. Если значок/буква, или что там у вас, заполняет не все пространство изображения, как в примере буква «D», то прозрачность крайне желательна. Сохранять результат следует в формат PNG 32-бит. Только так получится сделать PNG с прозрачностью.
Теперь идем на этот сайт и загружаем там свою картинку, сохраняем себе результат.
Я пробовал разные сайты для генерации favicon-иконок, но именно этот мне понравился. Он делает корректную иконку/файл, который 100% открывается везде. Кроме того он не уродует контуры изображения на прозрачном фоне и вообще делает иконку с прозрачностью так, как надо.
Размещать файл favicon.ico следует обязательно в корне сайта.
Если у вас шаблон сайта или движок предусматривает расположение иконки в каком-то каталоге, то можете разместить её там, но дополнительно все равно скопируйте файл и в корень сайта. Так его точно подхватят все, кто только может.
В HTML-коде сайта favicon.ico прописывается внутри тега head так:
<link rel="shortcut icon" href="favicon.ico" >Рекомендуемый вариант
Я последнее время пользуюсь этим сайтом. Он генерирует сразу несколько иконок, которые оптимизированы для использования на разных устройствах. При этом кроме самих иконок вам будет предложен HTML-код, который требуется разместить в шапке сайта. На входе там лучше использовать изображение логотипа в большом разрешении. Сайт сам делает оптимизацию и нужные форматы. Если исходник будет большой, то результат будет более качественный.