Значок монтаж без фона

Содержание

Значок монтаж без фона
Комментарии
Корректная favicon-иконка с прозрачностью
Простой вариант
Рекомендуемый вариант
Как восстановить прозрачный фон подписи под ярлыками Рабочего стола

Значок монтаж без фона

Сегодня мы будем делать иконку для сайта, FAVICON с прозрачностью.

Что же такое Favicon?

Favicon (сокр. от англ. Favorites ICON) — значок сайта. Отображается браузером в адресной строке перед URL страницы, а также в качестве иконки к закладке, в табах и в других элементах интерфейса.
Обычно используется изображение размера 16×16 пикселов формата ICO. Традиционно помещается в корень сайта под именем favicon.ico, т. к. исторически сложилось, что там его ищет Internet Explorer. Все современные браузеры понимают явное указание положения значка в HTML-коде примерно в таком формате:

Путь к файлу, его формат и размеры изображения могут быть любыми, допустимыми для WWW (за исключением Internet Explorer, который допускает для значка только формат ICO).

Создаём прозрачность.

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

Вот так чудо, что за белые края у рисунка. Естественно я сразу начал грешить на сайты генераторы иконок и прочее. Нашел несколько других сайтов генераторов, но счастливее не стал.

После недолгих «сексуальных игр» с Фотошопом все получилось :). Для начала нужно сделать картинку, из которой мы будем создавать иконку.

Сделаем это в Photoshop:

Изображение обязательно должно быть равносторонним. Ширина картинки равна Высоте. Если хоть на 1 пиксель ни будут отличаться, иконка получится кривая.
Размер иконки должен быть не менее 16×16 пикселов. Можно и больше, генератор сам уменьшит картинку.

Создали картинку, отредактировали, почистили как нам надо кисточкой. Учтите, чтобы получилась прозрачность нужно. Чтобы фон был прозрачным. Эту настройку указываем при создании изображение в фотошопе. Background Contents, обычно она по умолчанию Transparent. Так и оставим.

После редактирования нажимает Ctrl + Alt + Shift + S и сохраняем нашу картинку в формате PNG.

Полученный файл загоняем в онлайн генератор. Я использовал https://tools.dynamicdrive.com/favicon/

И сгенерируем. Как результат, на выходе получаем файл *.ICO. Который в тулбаре, закладках и везде имеет прозрачность, где нам необходимо.

Готово. Есть ведь разница? 🙂

по поводу прозрачности я и так знал, а вот за то что такой класный сервис спалил – спасибо!
На других генераторах вроде генфавикон и фавикон.ру всё равно остаётся белая рамка

Комментарий от DirtyMoney [ 30 июля, 2008, 11:27 ]

Это хорошо что вы начали вести блог,ведь у вас это отлично получается и надеюсь будет еще лучше. Главное писать о том,в чем вы разбираетесь. Удачи. 🙂

Комментарий от Лена Агаркова [ 2 августа, 2008, 19:30 ]

Сдается мне, на вашем сайте развелось слишком много так называемых говн*комментатров, которым лишь бы ляпнуть чего-нибудь:)

Комментарий от Приколист [ 8 августа, 2008, 10:50 ]

по поводу прозрачности я и так знал, – спасибо!

Комментарий от Prod [ 26 августа, 2009, 22:05 ]

Плагин для фотошопа называется ICOFormat-1.8f3-win.zip, Яндекс знает (:

Комментарий от Tooree [ 6 ноября, 2009, 12:28 ]

А можно забить на IE6 и использовать favicon в формате PNG

Комментарий от JuicyIgor [ 9 ноября, 2009, 16:22 ]

качество картинки испротилось. но за сайт генератор спс!

Комментарий от Кирилл [ 9 января, 2010, 13:28 ]

Спасибо, очень нужный пост! А то я уже расстраиваться начал)

Комментарий от Вадим [ 9 февраля, 2010, 03:02 ]

благодарю за полезную информацию

Комментарий от mitry [ 2 сентября, 2010, 01:43 ]

Спасибо за инфу 🙂

Комментарий от Spaun [ 14 ноября, 2010, 18:11 ]

Недавно столкнулся с этим. Файл с расширением .ico можно сделать с помощью GIMP. Просто при сохранении файла нужно прописать это расширение вручную.

Комментарий от Андрей [ 6 декабря, 2010, 14:42 ]

Все гораздо проще – и генераторы не нужны! В фотошопе делаем файл 16х16 пикселей, с прозрачностью в нужных местах, и сохраняем СРАЗУ в формате ico. Только убедитесь, что при сохранении стоит галочка “сохранять альфа-каналы” – и все))!

Комментарий от яя [ 9 апреля, 2011, 21:09 ]

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

Комментарий от Татьяна [ 16 марта, 2013, 00:06 ]

спасибо за помощь=)

Комментарий от Кирилл [ 19 апреля, 2013, 00:10 ]

У меня 9 фотошоп в нём нет сохранить в формате .ico

Комментарий от Александр [ 23 апреля, 2013, 22:56 ]

Спасибо за статью. Все понятно описано, и без лишних слов. Все получилось, любуюсь творением 🙂

Комментарий от Вишенка [ 15 декабря, 2014, 15:47 ]

Ради фавиконки покупать Фотошоп? Вы хоть поняли что предлагаете??

Источник

Корректная 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 так:

Как восстановить прозрачный фон подписи под ярлыками Рабочего стола

В операционной системе Windows на рабочем столе возможна настройка отображения подписей под ярлыками и значками на прозрачном фоне с тенями.

Такие подписи смотрятся намного лучше на фоне симпатичных обоев (фонового рисунка), чем на цветных прямоугольниках с фоном подложки рабочего стола (цвет задан по умолчанию или настроен пользователем).

В основном у большинства пользователей компьютера названия пиктограмм находятся на прозрачном фоне. Однако случается, что откуда ни возьмись, появляются цветные обрамления вокруг названий и хоть тресни, от них не получается избавиться.

Что в таких случаях советуют предпринять?

1. Проверяем, включена ли функция «Отбрасывание теней значками на рабочем столе»:

2. Убеждаемся, что в качестве фона рабочего стола у вас установлено изображение в формате jpeg. Так как проблемы возникают при использовании прозрачных или анимационных картинок, соответственно с расширениями png или gif. Если это ваша ситуация, поменяйте их на обычное растровое изображение.

3. Посмотрим, возможно, что на Рабочем столе размещен и закреплен web – контент. Клик ПКМ на свободном пространстве Рабочего стола — Свойства, в диалоговом окне «Свойства: Экран» выбираем вкладку «Рабочий стол».

Сначала смените фоновый рисунок на любой из набора, предложенного операционной системой и нажмите кнопку «Применить». Затем нажмите кнопку «Настройка Рабочего стола», в открывшемся диалоговом окне «Элементы рабочего стола» выбираем вкладку Веб. Если в области «Веб-страницы» есть установленные флажки, снимите их и флажок «Закрепить элементы рабочего стола» тоже (если установлен). Подтвердите свои действия, нажав кнопку ОК последовательно в двух закрываемых окнах.

4. Попробуем еще кликнуть ПКМ на свободном пространстве рабочего стола, в появившемся меню выбираем верхнюю строчку «Упорядочить значки», затем в подменю снимем «птичку» с команды «Закрепить веб-элементы на рабочем столе».

5. Рассмотрим также ситуацию, когда причиной может стать использование системой режима повышенной контрастности. Эту настройку операционной системы можно отменить через панель управления Windows. Нажимаем Пуск — Панель управления — Специальные возможности — Настройка контрастности текста и цвета экрана — снять галочку в поле «Высокая контрастность» — нажать кнопку OK.