Корректная favicon-иконка с прозрачностью
Позаботиться об иконке favicon.ico для своего сайта очень желательно. Это не просто картинка, которая показывается в адресной строке в браузере. Гораздо важнее, что она делает закладку с вашим сайтом в браузере более узнаваемой. Также сайт становится легко узнаваем в выдаче поисковиков.
Простой вариант
Делается favicon-иконка легко. В любом графическом редакторе готовим картинку размером 32×32 пикселя. Сегодня лучше именно такой размер, а не 16×16, как было ранее. Большая иконка без проблем подхватывается браузерами, а на всяких устройствах с Retina-дисплеями выглядит более гладко и красиво.
Под Windows могу рекомендовать редактор Paint.Net. Он бесплатен и все что нужно в нем есть.
Просто открываем в нем картинку, если нужно изменяем ее размер до 32×32.
Если у вас исходник не квадратный, то доводим его до квадрата, путем увеличения холста или обрезкой.
Картинку можно подготовить с прозрачным фоном. Если значок/буква, или что там у вас, заполняет не все пространство изображения, как в примере буква «D», то прозрачность крайне желательна. Сохранять результат следует в формат PNG 32-бит. Только так получится сделать PNG с прозрачностью.
Теперь идем на этот сайт и загружаем там свою картинку, сохраняем себе результат.
Я пробовал разные сайты для генерации favicon-иконок, но именно этот мне понравился. Он делает корректную иконку/файл, который 100% открывается везде. Кроме того он не уродует контуры изображения на прозрачном фоне и вообще делает иконку с прозрачностью так, как надо.
Размещать файл favicon.ico следует обязательно в корне сайта.
Если у вас шаблон сайта или движок предусматривает расположение иконки в каком-то каталоге, то можете разместить её там, но дополнительно все равно скопируйте файл и в корень сайта. Так его точно подхватят все, кто только может.
В HTML-коде сайта favicon.ico прописывается внутри тега head так:
Рекомендуемый вариант
Я последнее время пользуюсь этим сайтом. Он генерирует сразу несколько иконок, которые оптимизированы для использования на разных устройствах. При этом кроме самих иконок вам будет предложен HTML-код, который требуется разместить в шапке сайта. На входе там лучше использовать изображение логотипа в большом разрешении. Сайт сам делает оптимизацию и нужные форматы. Если исходник будет большой, то результат будет более качественный.
Как сделать прозрачную иконку?
Вариантов несколько, а програм, позволяющих это сделать — десятки, если не сотни.
1. Редактируя оригинальное изображение.
Открыть в фотошопе или любом другом редакторе. добавить альфа-канал и удалить ненужный фон. Сохранить в формате иконки. Если не получится, сохранить в формате, например png и каким либо конвертором форматов/просмотрщиком, понимающим ico перевести в ico.
2. Редактируя уже готовую иконку
Открыть в редакторе иконок. Выбрать цвет кисти «Фон» и залить этим цветом область, которую необходимо сделать прозрачной.
Современные редакторы позволяют делать градации прозрачности (полупрозрачные области) .