ruSKweb.ru

"Самая хорошая работа – это высокооплачиваемое хобби"

Генри Форд

Как создать favicon для сайта

faviconb

Для того что бы узнать, как создать favicon.ico для сайта, нужно для начала узнать что это собственно такое и для чего оно нужно, тем кто этого не знает)

Тут все очень просто – фавикон, это так называемый файл favicon с расширением ico, который помещается в корневой каталог вашего сайта.  Другими словами – это иконка вашего сайта, картинка, которая отображается в закладках или во вкладке браузера. Так же она иногда  используются поисковиками и другими сервисами.

Как создать фавикон (favicon.ico)

Если  в корневой директории вашего сайта не будет файла favicon.ico то браузер не будет отображать никакой картинки, или же будет подставлять свои по умолчанию заданные. Поэтому если мы хотим придать большей индивидуальности нашему сайту и сделать его более запоминающимся, то нам нужно создать ему иконку.

Как создать favicon.ico для сайта

Есть несколько способов.

  • Можно нарисовать фавикон вручную, с помощью графического редактора (фотошоп не умеет сохранять файлы с расширением .ico поэтому нужен будет или специальный плагин, или другая программа) главное помните – размеры должны быть 16х16.
  • А можно из готовой картинки сделать фавикон,  воспользовавшись одним из онлайн-сервисов которых сейчас довольно много.  Я использовал вот этот при создании фавикона для ruskweb.ru. Раньше я пользовался другим сервисом, но там иконки получались размытыми, этот мне понравился гораздо больше, иконки более четкие.

Делов тут на пол минуты. Заходим на сайт, жмем кнопку Import Image

Как создать фавикон (favicon.ico)

Выбираем наше изображение, из которого хотим сделать иконку

Как создать фавикон (favicon.ico)

И скачиваем его к себе на компьютер Как создать фавикон (favicon.ico)

Теперь у нас есть готовый favicon.ico размером 16х16 который просто нужно загрузить в корневую папку вашего сайта.  Кстати там же можно и нарисовать его вручную по пикселям, это уже на любителей.

Для того что бы увидеть изменения нужно закрыть страницу нашего сайта и очистить кэш браузера. Затем заново загрузить страницу и наслаждаться красивой иконкой)

Как сделать еще более уникальным ваш блог на WordPress можно прочитать в других моих постах.

 

Понравилась статья? Жми лайк:

3 комментариев

  1. belyan пишет:

    Как раз в планах была статья про favicon, только как обычно с другого ракурса :))
    Подключить favicon.ico можно даже если он не лежит в корне, а размер может быть не только 16×16 и даже не только ICO.
    Как обстоит дело в современных браузерах, можно узнать у меня Как работает favicon
    А увидеть новую иконку можно перезагрузив страницу через Ctrl+F5 (в большинстве браузеров).

    P.S> Мне начинает казаться что я слишком навязчив :(

    [Ответить]

    Сергей Кобзарь отвечает:

    У тебя там целая книга про фавиконы)) Ну да с другого ракурса, думаю эти статьи дополнят друг друга)
    Эта статья для новичков, что бы не пугать их кодами взял стандарты) По умолчанию браузеры сами ищут favicon.ico в корне, так зачем выдумывать велосипед)
    Остальные форматы и размеры – все не так просто, как видно из твоей статьи)

    В опере и огнелисе мне Ctrl+F5 не помогало, лишь после закрытия страницы, очистки кеша и нового открытия значек менялся.

    [Ответить]

  2. В качестве фавикона я использовал анимированный gif-файл: в Firefix анимация отлично воспроизводится, а остальные браузеры без проблем отображают его статично. Вот пример: http://www.cultural-humor.org/

    [Ответить]

Оставить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: