Страницы
Промо
Как сделать 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. Нашел картинки, порезал, загнал в генератор иконок, залил на сайт и сразу расстроился.
Вот так чудо, что за белые края у рисунка. Естественно я сразу начал грешить на сайты генераторы иконок и прочее. Нашел несколько других сайтов генераторов, но счастливее не стал.
После недолгих «сексуальных игр» с Фотошопом все получилось :). Для начала нужно сделать картинку, из которой мы будем создавать иконку.
Сделаем это в Photoshop:
Изображение обязательно должно быть равносторонним. Ширина картинки равна Высоте. Если хоть на 1 пиксель ни будут отличаться, иконка получится кривая.
Размер иконки должен быть не менее 16x16 пикселов. Можно и больше, генератор сам уменьшит картинку.
Создали картинку, отредактировали, почистили как нам надо кисточкой. Учтите, чтобы получилась прозрачность нужно. Чтобы фон был прозрачным. Эту настройку указываем при создании изображение в фотошопе. Background Contents, обычно она по умолчанию Transparent. Так и оставим.
После редактирования нажимает Ctrl + Alt + Shift + S и сохраняем нашу картинку в формате PNG.
Полученный файл загоняем в онлайн генератор. Я использовал https://tools.dynamicdrive.com/favicon/
И сгенерируем. Как результат, на выходе получаем файл *.ICO. Который в тулбаре, закладках и везде имеет прозрачность, где нам необходимо.
Готово. Есть ведь разница? :)
Комментарии
| Комментарий от [ 25 апреля, 2008, 14:36 ] |
Спасибо за адрес очень полезного сервиса – онлайн генератора. |
| Комментарий от BlackLife [ 7 мая, 2008, 19:44 ] |
А можно просто скачать патч на Фотошоп, спомощью которого мочить иконки ;) |
| Комментарий от [ 7 мая, 2008, 19:53 ] |
Я такого не знаю :) |
| Комментарий от DirtyMoney [ 30 июля, 2008, 11:27 ] |
по поводу прозрачности я и так знал, а вот за то что такой класный сервис спалил – спасибо! |
| Комментарий от Лена Агаркова [ 2 августа, 2008, 19:30 ] |
Это хорошо что вы начали вести блог,ведь у вас это отлично получается и надеюсь будет еще лучше. Главное писать о том,в чем вы разбираетесь. Удачи. :) |
| Комментарий от Приколист [ 8 августа, 2008, 10:50 ] |
Сдается мне, на вашем сайте развелось слишком много так называемых говн*комментатров, которым лишь бы ляпнуть чего-нибудь:) |
| Комментарий от [ 26 августа, 2009, 22:05 ] |
по поводу прозрачности я и так знал, – спасибо! |
| Комментарий от [ 6 ноября, 2009, 12:28 ] |
Плагин для фотошопа называется ICOFormat-1.8f3-win.zip, Яндекс знает (: |
| Комментарий от [ 9 ноября, 2009, 16:22 ] |
А можно забить на IE6 и использовать favicon в формате PNG |
| Комментарий от [ 9 января, 2010, 13:28 ] |
качество картинки испротилось. но за сайт генератор спс! |
| Комментарий от Вадим [ 9 февраля, 2010, 03:02 ] |
Спасибо, очень нужный пост! А то я уже расстраиваться начал) |
| Комментарий от [ 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. С генератором портится качество (картинка размытая). На моём сайте favicon с расширением png, благо в админке есть возможность через редактирование шаблона задать картинку для фавикона. Что сделала: Всё заработало даже без очистки кеша. В частности, вот на этом сайте: https://zolotoy-bereg-trk.ru |
| Комментарий от [ 19 апреля, 2013, 00:10 ] |
спасибо за помощь=) |
| Комментарий от [ 23 апреля, 2013, 22:56 ] |
У меня 9 фотошоп в нём нет сохранить в формате .ico |
| Комментарий от Вишенка [ 15 декабря, 2014, 15:47 ] |
Спасибо за статью. Все понятно описано, и без лишних слов. Все получилось, любуюсь творением :) |
| Комментарий от Василий [ 12 января, 2021, 17:41 ] |
Ради фавиконки покупать Фотошоп? Вы хоть поняли что предлагаете?? |
Написать комментарий