Познавательный блог  

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

Гугль

Архивы

Как сделать 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.jpg

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

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

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

1.jpg

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

0.jpg

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

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

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

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

6.jpg

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

Комментарии

Комментарий от 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

Всё заработало даже без очистки кеша. В частности, вот на этом сайте: http://zolotoy-bereg-trk.ru

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

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

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

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

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

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

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








Страницы

Свежие записи

Гугль

Мета

Счетчики


Rambler's Top100

Рубрики

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