Познавательный блог Мобильная врсия

Страницы

Промо

Как сделать favicon с прозрачностью (прозрачный favicon)

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

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

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

<link href="/favicon.ico" rel="icon" type="image/x-icon" />

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

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

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

21 - Как сделать favicon с прозрачностью (прозрачный favicon)

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

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

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

1 - Как сделать favicon с прозрачностью (прозрачный favicon)

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

0 - Как сделать favicon с прозрачностью (прозрачный favicon)

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

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

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

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

6 - Как сделать favicon с прозрачностью (прозрачный favicon)

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

Комментарии

Комментарий от filma [ 25 апреля, 2008, 14:36 ]

Спасибо за адрес очень полезного сервиса — онлайн генератора.

Комментарий от BlackLife [ 7 мая, 2008, 19:44 ]

А можно просто скачать патч на Фотошоп, спомощью которого мочить иконки ;)

Комментарий от kas [ 7 мая, 2008, 19:53 ]

Я такого не знаю :)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо за инфу :)

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

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

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

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

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

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

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

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

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

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

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

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

Написать комментарий








Поиск по сайту

Промо

Статистика

Мета

  Разработка и дизайн — StvPromo.ru