Как сделать иконку для сайта прозрачными
<link href=»/favicon.ico» rel=»icon» type=»image/x-icon» />
Комментарии
Спасибо за адрес очень полезного сервиса – онлайн генератора.
А можно просто скачать патч на Фотошоп, спомощью которого мочить иконки 😉
Я такого не знаю 🙂
по поводу прозрачности я и так знал, а вот за то что такой класный сервис спалил – спасибо!
На других генераторах вроде генфавикон и фавикон.ру всё равно остаётся белая рамка
Это хорошо что вы начали вести блог,ведь у вас это отлично получается и надеюсь будет еще лучше. Главное писать о том,в чем вы разбираетесь. Удачи. 🙂
Сдается мне, на вашем сайте развелось слишком много так называемых говн*комментатров, которым лишь бы ляпнуть чего-нибудь:)
по поводу прозрачности я и так знал, – спасибо!
Плагин для фотошопа называется ICOFormat-1.8f3-win.zip, Яндекс знает (:
А можно забить на IE6 и использовать favicon в формате PNG
качество картинки испротилось. но за сайт генератор спс!
Спасибо, очень нужный пост! А то я уже расстраиваться начал)
благодарю за полезную информацию
Спасибо за инфу 🙂
Недавно столкнулся с этим. Файл с расширением .ico можно сделать с помощью GIMP. Просто при сохранении файла нужно прописать это расширение вручную.
Все гораздо проще – и генераторы не нужны! В фотошопе делаем файл 16х16 пикселей, с прозрачностью в нужных местах, и сохраняем СРАЗУ в формате ico. Только убедитесь, что при сохранении стоит галочка “сохранять альфа-каналы” – и все))!
1. С генератором портится качество (картинка размытая).
2. Плагин для фотошопа только помогает сохранить картинку с расширением ico, а белые поля остаются.
3. Альфа-каналы не так просто сохранить. Поискала в инете, как сохранить альфа-каналы. Оказалось не так просто (вобщем, не получилось). К тому же нашла, что Яндекс-робот, например, не умеет открывать картинки с альфа-каналами (статья была от 2009г, сейчас 2013, может уже научился).
На моём сайте favicon с расширением png, благо в админке есть возможность через редактирование шаблона задать картинку для фавикона.
Но на другом сайте нет такой возможности. И на помощь пришёл как всегда бубен.
Что сделала:
1. Cохранить картинку без фона в формате png: favicon.png
2. Положила картинку в корень сайта
3. Нашла php с функцией addFavicon
4. В этой функции и далее по тексту исправила:
image/vnd.microsoft.icon на image/png
favicon.ico на favicon.png
Всё заработало даже без очистки кеша. В частности, вот на этом сайте: https://zolotoy-bereg-trk.ru
спасибо за помощь=)
У меня 9 фотошоп в нём нет сохранить в формате .ico
Спасибо за статью. Все понятно описано, и без лишних слов. Все получилось, любуюсь творением 🙂
Корректная 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-код, который требуется разместить в шапке сайта. На входе там лучше использовать изображение логотипа в большом разрешении. Сайт сам делает оптимизацию и нужные форматы. Если исходник будет большой, то результат будет более качественный.
Как создать прозрачный favicon?
Озадачился вопросом: каким образом быстро и без усилий получить из прозрачного .png файла прозрачную же иконку? Был найден быстрый буржуйский (как всегда) онлайн генератор favicon: http://tools.dynamicdrive.com/favicon/
Подготавливаем картинку 16х16, добавляем (1), жмем Create Icon (2) и вуаля! Можно жать на кнопку Download Icon (3) и скачать к себе на комп.
Поддерживаемые форматы, из которых создается favicon: JPEG, PNG, GIF, BMP, TIFF.
Добавить комментарий Отменить ответ
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.