Меню
Категории
Как сделать favicon с прозрачностью (прозрачный favicon)
10 ноября, 2007 Веб

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

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

Favicon (сокр. от англ. Favorites ICON) — значок сайта. Отображается браузером в адресной строке перед URL страницы, а также в качестве иконки к закладке, в табах и в других элементах интерфейса.
Обычно используется изображение размера 16×16 пикселов формата 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 пиксель ни будут отличаться, иконка получится кривая.
Размер иконки должен быть не менее 16×16 пикселов. Можно и больше, генератор сам уменьшит картинку.

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

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

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

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

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

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

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

20 комментариев
  1. Спасибо за адрес очень полезного сервиса – онлайн генератора.

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

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

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

  5. Лена Агаркова

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

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

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

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

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

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

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

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

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

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

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

  16. 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

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

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

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

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

Добавить комментарий




*