Корректная favicon-иконка с прозрачностью

Позаботиться об иконке favicon.ico для своего сайта очень желательно. Это не просто картинка, которая показывается в адресной строке в браузере. Гораздо важнее, что она делает закладку с вашим сайтом в браузере более узнаваемой. Также сайт становится легко узнаваем в выдаче поисковиков.

Делается favicon-иконка легко. В любом графическом редакторе готовим картинку размером 32×32 пикселя. Сегодня лучше именно такой размер, а не 16×16, как было ранее. Более большая иконка без проблем подхватывается браузерами, а на всяких устройствах с Retina-дисплеями, например, на iPad 4, она выглядит более гладко и красиво.

Могу рекомендовать использовать редактор Paint.Net. Он бесплатен и все что нужно в нем есть. Просто открываем в нем картинку, если нужно изменяем ее размер до 32×32. Если у вас исходник не квадратный, то доводим его до квадрата, путем увеличения холста или обрезкой.

Favicon в Paint.Net

Картинку можно подготовить с прозрачным фоном. Если значок/буква, или что там у вас, заполняет не все пространство изображения, как у меня буква «D», то прозрачность крайне желательна. Сохранять результат следует в формат PNG 32-бит. Собственно, только так и получится записать PNG с прозрачностью.

Теперь идем на этот сайт и загружаем там свою картинку, сохраняем себе результат. Я пробовал разные сайты для генерации favicon-иконок, но именно этот мне понравился. Он делает корректную иконку/файл, который 100% открывается везде. Кроме того он не уродует контуры изображения на прозрачном фоне и вообще делает иконку с прозрачностью так, как надо.

Размещать файл favicon.ico следует обязательно в корне сайта. Если у вас шаблон сайта или  движок предусматривает его расположение в каком-то каталоге, то можете разместить в каталоге, но дополнительно все равно скопируйте файл и в корень сайта. Так его точно подхватят все, кто только может.

В HTML-коде сайта favicon.ico прописывается внутри тега head так:

<link rel="shortcut icon" href="favicon.ico" >

5 Комментариев

  1. Интресная программка, спасибо. Там еще заголовок надо добавить на Apache правильный ;)

    • По всей видимости имеется в виду файл .htaccess и команда image/x-icon ico, сообщающая что файлы ico являются типом image/x-icon. Я не использую Apache на серверах уже года два-три. Если действительно на Apache возникает ситуация, что ico-файлы не распознаются правильно, то команду стоит добавить, иначе поисковики не увидят иконку.

  2. Огромное спасибо, Дмитрий!!!! Несколько дней согласно разным статьям различными методами генерировала и ставила этот несчастный фавикон. По Вашей статье — за пять минут! И она СРАЗУ ЖЕ! Прозрачная! Появилась в ИЕ! )) И в других браузерах! Чудеса да и только! ))

    • На заметку — пыталась авторизоваться через ФБ на Ваш сайт — вывалилась ошибка. А ВК рассказал предварительно какую-то страшную историю про пользование личными данными. Не знаю, на сколько это корректно. На всякий случай, — пишу

Добавить комментарий